Quickie auth with firebase and polymer

Embed Size (px)

Citation preview

3rd Quickie Authentication with Firebase and Polymer

Who am I ?

So... Im Sylia Baraka

Co-manager Agenda at GDG Algiers

4th Year Student at ESI

Firebase

The Realtime Backend for your appProblems :Creating shouldnt require managing complex infrastructureThe full stack is never easyThe user dont care about the backend

Firebase

The User cares aboutSpeedOfflineMulti-platformSimple authentication

Polymer

The JS library that helps you create reusable HTML elementsProblems:The Client side is never easyThe App needs to be progressiveThe user doesnt care what you do to achieve it

HomeProfileMessagesSettings

Polymer

Home Profile Messages Settings

From a div soup to .

HomeProfileMessagesSettings

Polymer

Home Profile Messages Settings

... reusable HTML elements

Polymer and Firebase are here to

Solve your Problems

Install bower $ npm install -g bowerInstall polymer-cli$ npm install -g polymer-cliInit your project$ mkdir authWithFirebase$ cd authWithFirebasePolymer init$ bower i --save firebase/polymerfire

Go to https://console.firebase.google.com/And create a new project named authWithFirebase

In your app-element.html add

Go to console overview and click on

add firebase to your web app-------->



Add it to your app-element

Go to authentication in the Console and enable Google authentication

Add paper-button with bower install --save PolymerElements/paper-buttonAnd then add Sign in with Google Welcome [[user.displayName]] ! And in the script tag the property user and the function below :user:{type : Object}SignIn: function( ){this.$.auth.signInWithPopup();}

Sign in with Google

Add paper-button with bower install --save PolymerElements/paper-buttonAnd then add Sign in with Google Welcome [[user.displayName]] ! And in the script tag the property useruser:{type : Object}SignIn: function( ){this.$.auth.signInWithPopup();}

DEMO

Ill add a video later

Find it interesting ?Polymer Project https://www.polymer-project.org/ Firebase https://firebase.google.com/ You can find the code on github https://github.com/amandaSalander/Feedback-GDG-Algiers Contact me at [email protected]

Ill add a video later