A bug is never just a mistake. It represents something bigger. An error of thinking. That makes you who you are. — Mr.Robot¹

Introduction Link to heading

Firebase is a Google development platform for mobile and web applications that provides a wide range of cloud services, including real-time data storage, user authentication, hosting, messaging, analytics, and more. Integrating Firebase into an Angular project can greatly enhance your application’s capabilities. In this article, we will explore step by step how to add Firebase to an Angular project and make the most of its services.

I want to try firebase as storage and hosting for test angular apps, which is offered for free (on low volumes).

Step 1: Create Angular app Link to heading

• Initialize your app by following this guide
• On macOS/Linux environments I highly recommend using NVM
• Install angularFire: npm install firebase @angular/fire
  Tip

  Dec. 3, 2023 - since they have not yet released the package for angular 17, I specified the version by hand npm i @angular/[email protected]
• Configure application environment: ng generate environments

Step 2: Generate firebase API Keys Link to heading

• Open the Firebase console
• Add Project and create app
• copy&paste this to your environment file

const firebaseConfig = {
  apiKey: "************************",
  authDomain: "********************",
  projectId: "*********************",
  storageBucket: "*****************",
  messagingSenderId: "*************",
  appId: "*************************"
};

• Enable Authentication section in firebase console, for testing i will use google auth and email/psw login
• OPTIONAL: install firebase CLI and deploy to firebase hosting

Step 3: Create Angular Components and add routes Link to heading

ng g c components/dashboard
ng g c components/sign-in
ng g c components/sign-up
ng g c components/forgot-password
ng g c components/verify-email

Add routes in app.routes.ts

import { Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
import { SignInComponent } from './components/sign-in/sign-in.component';
import { SignUpComponent } from './components/sign-up/sign-up.component';
import { VerifyEmailComponent } from './components/verify-email/verify-email.component';

export const routes: Routes = [
    { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
    { path: 'sign-in', component: SignInComponent },
    { path: 'register-user', component: SignUpComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'forgot-password', component: ForgotPasswordComponent },
    { path: 'verify-email-address', component: VerifyEmailComponent }
];

Step 4: Create the service for Firebase authentication. Link to heading

• Generate the user interface ng generate interface shared/services/user and add the properties

export interface User {
    uid: string;
    email: string;
    displayName: string;
    photoURL: string;
    emailVerified: boolean;
}

• Creates the ng g s shared/auth service.