Angular Firebase Auth Guards (Easy Guide)

Today we’re going to learn how to use Angular Firebase Authentication and Angular’s Route Guard feature to secure an app.

We’ll be looking at how to use the Angular Firebase AuthGuard to secure an Angular app.

In other words, Angular + Firebase Authentication + Route Guards = 🔒 🔒 🔒.

This assumes that you’ve already installed Angular Firebase to your project and configured Firebase Authentication.

Let’s get into this!

Angular Route Guard with Firebase Authentication

To start with, we can import the Angular Firebase AuthGuard and use it as a built-in route guard.

Our routes file would look like this.

import { Routes } from '@angular/router';
import { AuthGuard } from '@angular/fire/auth-guard';
import { MainLayoutComponent } from './layouts/main-layout/main-layout.component';
import { dashboardRoutes } from './features/dashboard/dashboard.routes';
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
import { authRoutes } from './features/auth/auth.routes';

export const routes: Routes = [
    {
        path: 'auth',
        component: AuthLayoutComponent,
        children: authRoutes
    },
    {
        path: 'app'…