Firebase Authentication Setup in Standalone Angular: A Step-by-Step Guide

Are you tired of spending hours implementing authentication in your Angular application? Look no further! In this article, we’ll explore the world of Firebase authentication and show you how to set it up in a standalone Angular project. Buckle up, because we’re about to embark on a journey that will transform your app’s security and user experience.

Why Firebase Authentication?

Firebase authentication is a popular choice among developers due to its ease of use, scalability, and robust security features. With Firebase, you can easily manage user identities, authenticate users, and even handle password recovery. But what really sets Firebase apart is its seamless integration with Angular, making it a top-notch solution for any web application.

Prerequisites

Before we dive into the setup process, make sure you have the following requirements met:

• A standalone Angular project created using Angular CLI (version 11 or higher)
• A Firebase project created in the Firebase console
• The Firebase SDK installed in your Angular project using npm or yarn

Step 1: Create a Firebase Project and Enable Authentication

Head over to the Firebase console and create a new project. Follow these steps to enable authentication:

1. Navigate to the Firebase console and click on “Add project”
2. Enter your project name and click on “Create project”
3. In the sidebar, click on “Authentication” and then click on “Get started”
4. Choose the authentication providers you want to enable (e.g., Google, Facebook, Email/Password)
5. Click on “Save” to save your changes

Firebase Configuration

Next, you’ll need to configure your Firebase project to work with your Angular application. Create a new file called `firebase.config.js` in the root of your project with the following code:

export const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: ''
};

Replace the placeholders with your actual Firebase project configuration values.

Step 2: Install the Firebase SDK in Your Angular Project

Install the Firebase SDK using npm or yarn:

npm install firebase @angular/fire

or

yarn add firebase @angular/fire

Importing the Firebase Module

In your Angular application, create a new file called `app.module.ts` and add the following code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { firebaseConfig } from './firebase.config';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Make sure to import the `AngularFireModule` and `AngularFireAuthModule` in your `AppModule`.

Step 3: Set Up Firebase Authentication in Your Angular Application

Create a new service called `auth.service.ts` to handle authentication:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private afAuth: AngularFireAuth) {}

  async signinWithEmailAndPassword(email: string, password: string) {
    try {
      const userCredential = await this.afAuth.signInWithEmailAndPassword(email, password);
      return userCredential.user;
    } catch (error) {
      console.error(error);
      return null;
    }
  }

  async signout() {
    try {
      await this.afAuth.signOut();
    } catch (error) {
      console.error(error);
    }
  }
}

This service provides two methods: `signinWithEmailAndPassword` and `signout`. The first method signs in a user with their email and password, while the second method signs out the current user.

Implementing Login and Logout Functionality

Create a new component called `login.component.ts` to handle login functionality:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input type="email" [(ngModel)]="email">
      <input type="password" [(ngModel)]="password">
      <button type="submit">Login</button>
    </form>
  `
})
export class LoginComponent implements OnInit {
  email: string;
  password: string;

  constructor(private authService: AuthService) {}

  ngOnInit(): void {}

  onSubmit() {
    this.authService.signinWithEmailAndPassword(this.email, this.password).then((user) => {
      if (user) {
        console.log('User signed in successfully!');
      } else {
        console.error('Error signing in user!');
      }
    });
  }
}

And create a new component called `logout.component.ts` to handle logout functionality:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-logout',
  template: `
    <button (click)="onLogout()">Logout</button>
  `
})
export class LogoutComponent implements OnInit {
  constructor(private authService: AuthService) {}

  ngOnInit(): void {}

  onLogout() {
    this.authService.signout().then(() => {
      console.log('User signed out successfully!');
    });
  }
}

Step 4: Secure Your Angular Application with Firebase Authentication

To secure your Angular application, you’ll need to implement route guards to restrict access to authorized users only. Create a new service called `auth.guard.ts`:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): Promise<boolean> {
    return this.authService.afAuth.authState.pipe(
      take(1),
      tap((user) => {
        if (!user) {
          this.router.navigate(['/login']);
        }
      })
    );
  }
}

This guard checks if the user is authenticated before allowing access to protected routes. If the user is not authenticated, they are redirected to the login page.

Secure Your Routes

Update your `app-routing.module.ts` file to include the `AuthGuard`:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./protected/protected.module').then((m) => m.ProtectedModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'logout',
    component: LogoutComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Now, any route that requires authentication will be protected by the `AuthGuard`.

Conclusion

And that’s it! You’ve successfully set up Firebase authentication in your standalone Angular application. With this setup, you can easily manage user identities, authenticate users, and restrict access to protected routes. Remember to explore the numerous features and customization options available in Firebase to take your application to the next level.

Firebase Feature	Description
Authentication	Manage user identities and authenticate users
Real-time Database	Store and sync data in real-time
Cloud Storage	Store and serve files
Cloud Functions	Run server-side code
Hosting	Host web applications

Firebase offers a plethora of features to enhance your application’s functionality. Explore the Firebase documentation to learn more about these features and how to integrate them into your Angular application.

Here are 5 Questions and Answers about “Firebase authentication setup in standalone Angular” with a creative voice and tone:

Frequently Asked Questions

Get answers to the most common questions about setting up Firebase authentication in your standalone Angular project.