OAuth with Angular and Firebase Tutorial

UPDATE Oct 10th, 2017: Fully updated tutorial for AngularFire v5 and Firestore https://youtu.be/e8GA1UOj8mE


Angular OAuth with Firebase
Tutorial https://angularfirebase.com/le....ssons/angular-fireba

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.

• Category

  How-to & Style