Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices. Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.
Firebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend.
Learn more about Firebase Authentication
As a prerequisite, ensure that AngularFire has been added to your project via
ng add @angular/fireProvide a Auth instance in the application's app.config.ts:
import{provideFirebaseApp,initializeApp}from'@angular/fire/app';import{provideAuth,getAuth}from'@angular/fire/auth';exportconstappConfig: ApplicationConfig={providers: [provideFirebaseApp(()=>initializeApp({ ... })),provideAuth(()=>getAuth()), ... ], ... })Next inject Auth into your component:
import{Component,inject}from'@angular/core';import{Auth}from'@angular/fire/auth'; @Component({ ... })exportclassLoginComponent{privateauth=inject(Auth); ... }AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
Update the imports from import { ... } from 'firebase/auth' to import { ... } from '@angular/fire/auth' and follow the official documentation.
Getting Started | API Reference
To support Auth context in server-side rendering, you can provide FirebaseServerApp:
import{ApplicationConfig,PLATFORM_ID,inject}from'@angular/core';import{isPlatformBrowser}from'@angular/common';import{provideFirebaseApp,initializeApp,initializeServeApp,initializeServerApp}from'@angular/fire/app';import{provideAuth,getAuth}from'@angular/fire/auth';exportconstappConfig: ApplicationConfig={providers: [provideFirebaseApp(()=>{if(isPlatformBrowser(inject(PLATFORM_ID))){returninitializeApp(firebaseConfig);}// Optional, since it's null in dev-mode and SSGconstrequest=inject(REQUEST,{optional: true});constauthIdToken=request?.headers.authorization?.split("Bearer ")[1];returninitializeServerApp(firebaseConfig,{ authIdToken,releaseOnDeref: request||undefined});}),provideAuth(()=>getAuth(inject(FirebaseApp)), ... ], ... })Follow Firebase's Session Management with Service Workers documentation to learn how to pass the idToken to the server. Note: this will not currently work in dev-mode as Angular SSR does not provide a method to get the Request headers.
AngularFire provides observables to allow convenient use of the Firebase Authentication with RXJS.
The user observable streams events triggered by sign-in, sign-out, and token refresh events.
Example code:
import{Auth,User,user}from'@angular/fire/auth'; ... exportclassUserComponentimplementsOnDestroy{privateauth: Auth=inject(Auth);user$=user(auth);userSubscription: Subscription; ... constructor(){this.userSubscription=this.user$.subscribe((aUser: User|null)=>{//handle user state changes here. Note, that user will be null if there is no currently logged in user.console.log(aUser);})}ngOnDestroy(){// when manually subscribing to an observable remember to unsubscribe in ngOnDestroythis.userSubscription.unsubscribe();}}The authState observable streams events triggered by sign-in and sign-out events.
Example code:
import{Auth,authState}from'@angular/fire/auth'; ... exportclassUserComponentimplementsOnDestroy{privateauth: Auth=inject(Auth);authState$=authState(auth);authStateSubscription: Subscription; ... constructor(){this.authStateSubscription=this.authState$.subscribe((aUser: User|null)=>{//handle auth state changes here. Note, that user will be null if there is no currently logged in user.console.log(aUser);})}ngOnDestroy(){// when manually subscribing to an observable remember to unsubscribe in ngOnDestroythis.authStateSubscription.unsubscribe();}}The idToken observable streams events triggered by sign-in, sign-out and token refresh events.
Example code:
import{Auth,idToken}from'@angular/fire/auth'; ... exportclassUserComponentimplementsOnDestroy{privateauth: Auth=inject(Auth);idToken$=idToken(auth);idTokenSubscription: Subscription; ... constructor(){this.idTokenSubscription=this.idToken$.subscribe((token: string|null)=>{//handle idToken changes here. Note, that user will be null if there is no currently logged in user.console.log(string);})}ngOnDestroy(){// when manually subscribing to an observable remember to unsubscribe in ngOnDestroythis.idTokenSubscription.unsubscribe();}}import{connectAuthEmulator,getAuth,provideAuth}from'@angular/fire/auth'; @NgModule({imports: [provideAuth(()=>{constauth=getAuth();connectAuthEmulator(auth,'http://localhost:9099',{disableWarnings: true});returnauth;}),]})