AngularFireAuth.user provides you an Observable<User|null> to monitor your application's authentication State.
AngularFireAuth promise proxies an initialized firebase.auth.Auth instance, allowing you to log users in, out, etc. See the Firebase docs for more information on what methods are available.
NOTE: AngularFire has a new tree-shakable API, you're looking at the documentation for the compatability version of the library. See the v7 upgrade guide for more information on this change..
Example app:
import{Component}from'@angular/core';import{AngularFireAuth}from'@angular/fire/compat/auth';importfirebasefrom'firebase/compat/app'; @Component({selector: 'app-root',template: ` <div *ngIf="auth.user | async as user; else showLogin"> <h1>Hello {{ user.displayName }}!</h1> <button (click)="logout()">Logout</button> </div> <ng-template #showLogin> <p>Please login.</p> <button (click)="login()">Login with Google</button> </ng-template> `,})exportclassAppComponent{constructor(publicauth: AngularFireAuth){}login(){this.auth.signInWithPopup(newfirebase.auth.GoogleAuthProvider());}logout(){this.auth.signOut();}}The AngularFireAuth Module provides several DI tokens to further configure your authentication process.
Using the SETTINGS DI Token (default: null), we can set the current Auth instance's settings. This is used to edit/read configuration related options like app verification mode for phone authentication, which is useful for testing.
import{SETTINGSasAUTH_SETTINGS}from'@angular/fire/compat/auth'; @NgModule({// ... Existing configurationproviders: [// ... Existing Providers{provide: AUTH_SETTINGS,useValue: {appVerificationDisabledForTesting: true}},]})exportclassAppModule{}Read more at Firebase Auth Settings.
Using the USE_DEVICE_LANGUAGE DI Token (default: null), which is a boolean that allow you to set the current language to the default device/browser preference. This allows to localize emails but be aware that this only applies if you use the standard template provided by Firebase.
import{USE_DEVICE_LANGUAGE}from'@angular/fire/compat/auth'; @NgModule({// ... Existing configurationproviders: [// ... Existing Providers{provide: USE_DEVICE_LANGUAGE,useValue: true},]})exportclassAppModule{}If you want to set a different language, you can use LANGUAGE_CODE DI Token (default: null).
More info at the firebase auth docs.
import{LANGUAGE_CODE}from'@angular/fire/compat/auth'; @NgModule({// ... Existing configurationproviders: [// ... Existing Providers{provide: LANGUAGE_CODE,useValue: 'fr'},]})exportclassAppModule{}Firebase Auth default behavior is to persist a user's session even after the user closes the browser. To change the current type of persistence on the current Auth instance for the currently saved Auth session and apply this type of persistence for future sign-in requests, including sign-in with redirect requests, you can use the PERSISTENCE DI Token (default: null).
The possible types are 'local', 'session' or 'none'. Read more at authentication state persistence.
import{PERSISTENCE}from'@angular/fire/compat/auth'; @NgModule({// ... Existing configurationproviders: [// ... Existing Providers{provide: PERSISTENCE,useValue: 'session'},]})exportclassAppModule{}If you need to use multi-tenancy, you can set the current Auth instance's tenant ID using TENANT_ID DI Token (default: null).
More tutorials regarding this topic are coming soon.
import{TENANT_ID}from'@angular/fire/compat/auth'; @NgModule({// ... Existing configurationproviders: [// ... Existing Providers{provide: TENANT_ID,useValue: 'tenant-id-app-one'},]})exportclassAppModule{}- Material Design : ngx-auth-firebaseui
- Bootstrap : @firebaseui/ng-bootstrap
Learn how to setup Firebase Authentication with Cordova in the Firebase Guides.
