Setting up Auth with firebase and AngularFire

Here’s how to set up auth in firebase with angular using angularfire, I had to jump around to connect the dots, so this guide will save you time.

This is a set up for a single user (me), I used the Email/Password sign-in method and hard-coded authencation inside my code (I’ll be the only user)

I encourage you to use this as a point of departure to learn more about setting up security rules in Firebase. Security is important and they offer tons of things so you don’t have to deal with user management.

This article assumes you have:

Firebase firestore set up
Your angular project set up with angularfire

Here are the steps:

Setup authencation in the firebase console.
I added myself as a user using Email/Password as the Sign-in method
Import and Inject auth into your app

import { Component, inject} from '@angular/core';
import { Auth } from '@angular/fire/auth';

@Component({ ... })
export class LoginComponent {
  private auth = inject(Auth);
  ...
}

Import and send in credentials using Email/Password as the Sign-in method

import { signInWithEmailAndPassword } from "firebase/auth";

// The auth variable here is the variable from above, you won't
// need to import getAuth.
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

And finally here is my rules setup in firebase.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if request.auth != null;
    }
  }
}

Tobias Wright

I like to build stuff for the internet

Setting up Auth with firebase and AngularFire