Firebase Authentication with Angular: A Step-by-Step Guide

Back to Blog
Angular, Frontend , , , , ,

Adding authentication to your Angular app is made simple and efficient with Firebase and AngularFire. In this guide, we’ll walk you through creating an authentication system using Firebase Authentication, with Angular Material for UI components and Bootstrap for responsive styling.

By the end, you’ll have a fully functional authentication module in your Angular app, featuring sign-in, sign-up, forgot password, and sign-out functionality, with restricted access to certain pages for authenticated users only.

🚀 Ready to supercharge your Angular app with secure, reliable authentication? In this kickoff to our Firebase Authentication in Angular series, we’ll dive into Firebase and how it can simplify your app’s authentication flow—no backend setup required! 🔒 From custom logins to Google sign-ins, Firebase makes it easy. 💻 Follow along with code in our GitHub repository as we guide you through each step. We’ll be covering everything, from route protection to password reset and seamless session management. Start here, grab the basics, and let’s level up your Angular skills with each episode! 🔥

▶️ YouTube Playlist: https://www.youtube.com/playlist?list=PLgWsj7sh9WiYdM2VK5UCIgYzdJGXt7xAg

🚀 GitHub Repository: https://github.com/TechDesignPilot/an…

Each step includes a YouTube video link for an in-depth walkthrough:

Content

1. Setup Firebase Project and Start Angular Project (Youtube Video)
2. Add Angular Material & Bootstrap and Set Up App Structure
3. Create Authentication Modules and Components
4. Build the Different Components’ Forms
4.1. Firebase Authentication: Handle Sign-In (Custom & Google)
4.2. Firebase Authentication: Handle Sign-Up (Custom & Google)
4.3. Authentication Guard to Restrict Access to the Dashboard Module
4.5. Add Forgot Password Feature
4.6. How Firebase Retains Authenticated User Info and Token

 

Section 1: Setup Firebase Project and Start Angular Project

To begin, we’ll create a Firebase project and connect it to our Angular app. This involves setting up Firebase services for authentication and integrating Firebase into the Angular project. Here’s what we’ll cover:

1.1 Create a New Firebase Project

Setting up Firebase is straightforward. First, log into the Firebase console and create a new project. This project will hold your app’s authentication and database resources.

1.2 Start Angular Project

Next, we’ll initialize a new Angular project for our application. Run the following commands to create and navigate to your project directory.

# Command to create a new Angular project
ng new my-angular-auth-app
cd my-angular-auth-app

 

1.3 Add AngularFire and Configure Firebase

The AngularFire library provides Firebase features in Angular projects. Here’s how to install it and configure Firebase settings:

# Install AngularFire and Firebase
ng add @angular/fire

 

Section 2: Add Angular Material & Bootstrap and Set Up App Structure

To create a visually appealing and user-friendly UI, we’ll use Angular Material components and Bootstrap for additional styling.

2.1 Add Angular Material

Angular Material offers a collection of UI components that integrate well with Angular. We’ll start by adding Angular Material to our project:

# Add Angular Material
ng add @angular/material

2.2 Install and Setup Bootstrap

Bootstrap is great for creating responsive layouts. We’ll install it via npm, then configure it in angular.json to be available throughout the app.

# Install Bootstrap via npm
npm install bootstrap

Add Bootstrap CSS and JS in angular.json:

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

Section 3: Create Authentication Modules and Components

Next, we’ll set up the main structure of the app, creating different modules and components for authentication.

3.1 Add Welcome Page Component

The welcome page serves as the entry point for users to navigate to the sign-in or sign-up pages. We’ll create this as a separate component:

# Generate Welcome Component
ng generate component welcome

Welcome page component HTML content

3.2 Create Auth and Dashboard Modules

To organize the app, we’ll create separate modules for authentication (with components for sign-in, sign-up, and forgot password) and a dashboard module that will contain a protected home component accessible only to authenticated users.

# Generate Auth Module with components
ng generate module auth --routing
ng generate component auth/sign-in
ng generate component auth/sign-up
ng generate component auth/forgot-password

# Generate Dashboard Module with a single home component
ng generate module dashboard --routing
ng generate component dashboard/home

Section 4: Build the Different Components

To capture user input, we’ll use Angular’s reactive forms for each authentication component.

4.1 Sign-In Component (Firebase Custom/Google Sign-In)

The above code defines an Angular component for user sign-in, likely for a web application. Here’s a breakdown of what the code does:

Read Code Explanation

Imports:

  • The code imports necessary functionalities from Angular libraries like Component, inject, FormControl, FormGroup, Validators, Router, and Firebase authentication services.

Component Definition:

  • It defines a component named SignInComponent using the @Component decorator. This decorator specifies metadata about the component, including its selector (app-sign-in), template location (./sign-in.component.html), and stylesheet (./sign-in.component.css).

Component Class:

  • The class manages the component’s logic.
  • It initializes a FormGroup named authForm which will hold form controls for email and password.
  • It creates a GoogleAuthProvider object for Google sign-in functionality.
  • It injects the Auth service from Firebase using inject. This service provides methods for user authentication.
  • It defines a boolean flag isSubmissionInProgress to track form submission state.
  • It defines a string errorMessage to display error messages to the user.
  • The constructor initializes the component:
    • It calls the initForm method to create the form group.
  • initForm method:
    • This method creates a FormGroup named authForm with two FormControl objects:
      • email: This control handles the user’s email input with a required validator.
      • password: This control handles the user’s password input with a required validator.
  • onSubmit method:
    • This method handles form submission when the user clicks the sign-in button.
    • It checks if the form is valid. If not, it exits the method.
    • It sets isSubmissionInProgress to true to indicate ongoing submission.
    • If the form is valid, it calls signInWithEmailAndPassword from the injected Auth service. This method attempts to sign in the user with the provided email and password.
      • On successful sign-in, it redirects the user to the dashboard page using the redirectToDashboardPage method.
      • In case of an error during sign-in, it sets isSubmissionInProgress to false and logs the error to the console.
        • It then checks for specific error messages in the error object and displays corresponding user-friendly messages in the errorMessage variable. These messages cover scenarios like invalid email, invalid credentials, weak password, email already in use, and generic errors.
  • onSignInWithGoogle method:
    • This method handles Google sign-in functionality.
    • It calls signInWithPopup from Firebase Auth with the googleAuthProvider object. This attempts to sign in the user using their Google account.
      • On successful sign-in, it redirects the user to the dashboard page using the redirectToDashboardPage method.
      • In case of an error during sign-in, it logs the error to the console and displays a generic error message in the errorMessage variable.
  • redirectToDashboardPage method:
    • This method navigates the user to the dashboard page after successful sign-in using the Router service.

In summary, this component provides a form for email/password sign-in and a button for Google sign-in. It validates user input, handles authentication with Firebase, and displays appropriate messages to the user based on the outcome.

4.2 Sign-Up Component (Firebase Custom/Google Sign-Up)

4.3 Forgot Password Component (Firebase)

4.4 Dashboard Home Component (Restricted Area)

The Dashboard component is part of the Dashboard module and can be accessed through the Dashboard routing module. For more details, refer to their respective GitHub links.

Share this post

Back to Blog