Angular-Firebase authentication

3 min readMar 14, 2019

Create project step by step

1.- Create Angular project

ng new project-name --routing --style=scss

2.- Connect Firebase to Angular

Create project firebase on 👉 [Firebase console], once you have created the firebase project you will be redirected to the following screen:

3.- Configure environment

Add credentials in our Angular project configuration file environment.ts located in src/environments/environment.ts

4.- Install dependencies

npm install bootstrap jquery popper.js --save

Configure angular.json, add styles and scripts

5.- Install AngularFire and Firebase

npm install firebase @angular/fire --save

6.- Imports on app.module.ts

7.- Create User interface

ng g i interfaces/User

8.- Create service

ng g s providers/auth

In the auth.service.ts file, import AngularFireAuth, firebase and Observable. Create an observable user variable, inject FirebaseAuth in the constructor and create sign in methods.

9.- Create login component

ng g c components/login --skipTests --inlineStyle

In the button we add ngClick directive with the method loginWithGoogle()

Import service and injects on constructor in login.component.ts:

Create method loginWithGoogle() and through the injected service we call the method created on the service.

10.- Create dashboard component

ng g c components/dashboard --skipTests --inlineStyle

With userdata variable call properties from interface, in this case ‘displayName, email, uid and photoURL’, remember that the userdata of type UserData stores the data that is brought from the firebase service.

The button call method logout() with the ngClick directive for close session.

Create variable of User type and assigns empty value to the properties.

In constructor injects the service and router and subscribe to the authentication state, userdara variable saves the data from firebase authentication. This verify if user is logged.

Now, create method `logout()` to close session.