OAuth with Angular and Firebase Tutorial

Angular OAuth with Firebase

In this episode, were going to build a user authentication system with Angular 4 and Firebase. Authentication is required in almost every Angular application, including this basic todo list app. The app currently has no authentication at all, but we want user to be able to log in with their Google, Facebook, Twitter, or Github account.

At this point, it is assumed you have the AngularFire2 package installed and bootstrapped into your app. If not, go to the docs or checkout this video.

STEP 1 - Generate Files

We are going to keep this feature super simple.

The Auth Service will handle interaction with the Firebase API.
The User Login Component will handle the login and logout buttons.
The User Profile Component will show details about the User.

STEP 2 - Activate Providers in Firebase

Head over to your firebase project and enable the providers you want. For non-google providers, you will need to get your own developer account and API keys.

STEP 3 - Build the Service

The way you handle authentication with Firebase is by subscribing to the AngularFire-Auth observable which returns a Firebase-Auth-State object.

Now that we have the AuthState object, we can take advantage of TypeScript accessors to get attributes. In this case, I'm interested in the User ID.

Here's the beauty of firebase - you can implement 4 social auth providers with very little code. I start by creating a reusable private function that takes the provider as an argument named `Social-Sign-In`.

When a user attempts to sign in two things can happen - success or failure. If it's a success, the `then` code will execute, if its's an error the `catch` code will execute.

You may be wondering what the `updateUserData` function is about. It's optional, but you may want to save user records to the Firebase realtime database. It can be useful if you plan on iterating over users in your app or if you collect additional data during signup.

We finish off the service by creating an action for each of the four providers. This is as simple as returning the result of the `socialSignIn` function.

STEP 4 - Frontend Components

With the auth service complete, we can inject it into components. Here's how you might create a Login Component with functions to login with each provider handleError

In the template we can then bind these functions to the click event.

The accessors we created in the service come in handy in for adding conditional logic to the template.

That wraps it up. Check out the full Firebase OAuth article more detail on code and I'll you next time.

[kalebiskandar]

short, simple, superb....
Can't wait for another learning video.
Keep it up man...

[WilsonManzanoS]

Thanks for your videos man, you are amazing! I have a question for you, did you have a tutorial that explains step by step how did you make the demo app?

[eeballoon]

Can you make a video auth part 2 about using the firebase tokens with their corresponding auth provider in backend?

[OpenSaned]

Who else thought your playback speed was 0.5X lol

[byronglendon]

Is this tutorial still valid for @angular/fire and Angular6?

[vitaliyduvalko]

very cool! can you make the video a littel bit loger?

[ani]

I have tried using authentication via traditional email and password and whenever a page initially reloads it is unable to retrieve the email that the user is logged in with. What is a good way to go about with solving this issue?

[tutorialchannel]

great!
I hope i can learn chat room angular and firebase for you, thanks

[moretins]

please can you share a link to the actual code?

[noherczeg]

Angularfire 2's API does not reflect the state it has been when this video was made. This is a really annoying thing. In case anyone tries to copy-paste stuff from the guide referenced here...

[moretins]

i recieve thsi error when i try to authenticate how can i solve this?
thanks

[alvaromena]

nice video! i have a question, how can do a login with angular 2 +
firebase just using a record from my database inside to firebase? not
authentication serice, only reading my database (usser + password) need
this example T_T