Quickie auth with firebase and polymer

download Quickie auth with firebase and polymer

If you can't read please download the document

Transcript of Quickie auth with firebase and polymer

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