Using Firebase Authentication with Angular

I first used Firebase with React and was amazed on how quick the development would be, and since my first favorite is Angular then I am going to share to you how I used Firebase Authentication with Angular.

The reasons why I like Firebase are:

  • I want to focus my time and attention on the frontend side for my personal app and hackathon projects.
  • Has Built-in Analytics
  • So I can just host my app in Github without setting up the database configuration.
  • Much more secure User Authentication

To start with, I assume you have already setup your Angular Project or have an existing one already.

  1. Install AngularFire and Firebase

npm install @angular/fire firebase –save

2. Create new Firebase project

Go to Firebase Console and add a new web project and then in the configuration page, select Add Firebase to your web app and after that you will get the firebase app configuration that you will need to paste in your environment files.

3. In your environment.ts file add the firebase config:

apiKey: 'yourproject-api-key',
authDomain: 'yourproject.firebaseapp.com',
databaseURL: 'https://yourproject.firebaseio.com',
projectId: 'yourproject-id',
storageBucket: 'yourproject.appspot.com',
messagingSenderId: 'yourproject-sender-id'

4. Set the Firebase in your App Modules

In the /src/app/app.module.ts, inject the Firebase providers and add the Firebase configuration

import { AngularFireModule} from '@angular/fire';
import { AngularFirestoreModule} from '@angular/fire/firestore';
import {environment} from '../environments/environment';

...
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireModule
],

5. You need to create three components for the User Authentication feature that includes the Angular Form, the styling and the logic. In this post, I assumed you already have knowledge on how to generate Components. I suggest to add them inside User folder if you are planning to add more components to your project.

  • Login Component -> will feature the login functionality
  • Register Component -> features create new account
  • User Component -> component that only loggged-in users can access else it will redirect to the login

6. Add Routing

We will use AuthGuard to check if there is a current logged-in user

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, canActivate: [AuthGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AuthGuard] },
  { path: 'user', component: UserComponent, resolve: {data: UserResolver}}
];

7. Create Services that uses firebase packages and authentication logics. So we don’t need to add these logics on each of the components.

The Services are:

  • AuthService -> allows user to register, login and logout with Firebase providers. All the authentication logic will be in this service.
  • UserService ->to get the current User and updates current user
  • UserResolver -> to gets the data of the logged-in user
  • AuthGuard ->to check if there is a current logged-in user.

For Source Code, you can clone here

When you can see your code works, you can check your Firebase console if there Users has been added, for example:

In the repo, this is a project that is a community that can be used by people in the COVID-19 Aftermath.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Powered by WordPress.com.

Up ↑

%d bloggers like this: