Build Firebase Authentication with Angular v12

₹3,749

Build Firebase Authentication with Angular 12

Course
14 Lessons

In this tutorial, we are going to share how to build Angular 12 Firebase authentication system from scratch using Firebase Real-time NoSQL cloud database.

Enroll now

Getting Started

Before we go ahead, make sure you have Node JS set up on your local development machine.

Install Angular CLI, Ignore if already installed.

npm install -g @angular/cli

Next, create Angular 12 application.

Use the given below cmd to setup the Angular project.

ng new angularfiebase-authentication

Once the project is downloaded, get into the project directory.

cd angularfirebase-authentication

Install Bootstrap CSS Framework in Angular 12 application.

npm install bootstrap

Go to angular.json file and replace the given below code with “styles”: [ ] array.

"styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "src/styles.css"
          ]

Build Angular 12 Firebase Authentication system

Step by Step Explanation

How to setup a basic Firebase account and set up a Firebase Project?

Install AngularFire2 Package

Generate Angular Components

Create Angular Routes

Create Firebase Authentication Service

Create Angular Login with Firebase API

User Registration with Angular 12 Firebase

Angular 12 Forgot Password with Firebase

Send Verification Email

Use Route Guards to Protect Angular Routes

Manage Firebase User Authentication State with LocalStorage

Bonus Application - Firebase Authentication with Angular Material UI v12

Features:
1. Implemented Lazy Loading Modules.
2. Firebase Authentication
3. Angular 12 With Material UI
4. Defined Application Structure
5. Route Guards

Build Firebase Authenciation with Angular 12 (Material UI).zip