FirebaseUI Authentication for Angular provides simple, customizable components to make integrating Firebase authentication with Angular applications straightforward.
npm install firebaseui-auth-angularFirebaseUI Authentication for Angular provides simple, customizable components to make integrating Firebase authentication with Angular applications straightforward.

This library is compatible with Angular 18 and utilizes standalone components for a cleaner import structure.
To get started, install the library along with its dependencies using npm:
``bash`
npm install @angular/fire firebaseui-auth firebaseui-auth-angular --save
Ensure you have @angular/fire, and firebaseui-auth as prerequisites for this library.
Before using the FirebaseUI components, initialize AngularFire within your Angular application:
`typescript
import { initializeApp } from 'firebase/app';
const firebaseConfig = {
// your Firebase project configuration
};
initializeApp(firebaseConfig);
`
Import and configure the FirebaseLogin component in your desired Angular component:
`typescript
import { Component, inject, OnInit } from '@angular/core';
import {
Auth,
EmailAuthProvider,
FacebookAuthProvider,
GithubAuthProvider,
GoogleAuthProvider,
PhoneAuthProvider,
TwitterAuthProvider,
} from '@angular/fire/auth';
import { FirebaseLogin } from 'firebaseui-auth-angular';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss'],
standalone: true,
imports: [FirebaseLogin],
})
export class MainComponent implements OnInit {
auth: Auth = inject(Auth);
uiConfig = {
signInFlow: 'popup',
signInOptions: [
GoogleAuthProvider.PROVIDER_ID,
{
provider: FacebookAuthProvider.PROVIDER_ID,
scopes: ['public_profile', 'email', 'user_likes', 'user_friends'],
customParameters: { auth_type: 'reauthenticate' },
},
TwitterAuthProvider.PROVIDER_ID,
GithubAuthProvider.PROVIDER_ID,
{ provider: EmailAuthProvider.PROVIDER_ID, requireDisplayName: false },
PhoneAuthProvider.PROVIDER_ID,
],
tosUrl: '
privacyPolicyUrl: '
};
ngOnInit(): void {}
logout(): void {
this.auth.signOut();
}
successCallback(data: any): void {
console.log('Login successful', data);
}
errorCallback(error: any): void {
console.error('Login failed', error);
}
uiShownCallback(): void {
console.log('UI shown');
}
}
`
In your HTML, add the Firebase login component like so:
`html``
[uiConfig]="uiConfig"
(signInSuccessWithAuthResult)="successCallback($event)"
(signInFailure)="errorCallback($event)"
(uiShown)="uiShownCallback()"
>
Configure sign-in success and failure callbacks to handle user authentication events:
- Sign-In Success: Triggered when a user signs in successfully.
- Sign-In Failure: Triggered if there is an error during the sign-in process.
- UI Shown: Triggered when the authentication UI is displayed to the user.
Contributions, issues, and feature requests are welcome. Stay tuned for updates!
This project is licensed under the MIT License - see the LICENSE file for details.
Kartik Watwani - kartik@workern.com