or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ai.mdanalytics.mdapp-check.mdauth-guard.mdauthentication.mddata-connect.mddatabase.mdfirebase-app.mdfirestore.mdfunctions.mdindex.mdmessaging.mdperformance.mdremote-config.mdstorage.mdvertexai.md
tile.json

authentication.mddocs/

Authentication

Firebase Authentication provides comprehensive user authentication with support for email/password, social providers, anonymous authentication, custom tokens, and multi-factor authentication. All authentication functions are Zone-wrapped for proper Angular change detection.

Capabilities

Standalone Provider

Modern Angular standalone API for providing Firebase Auth instances.

/**
 * Provides Firebase Auth instance using standalone API
 * @param fn - Function that returns initialized Auth instance
 * @returns Environment providers for dependency injection
 */
export function provideAuth(fn: () => Auth): EnvironmentProviders;

/**
 * Get Firebase Auth instance
 * @param app - Optional Firebase app instance
 * @returns Firebase Auth instance
 */
export function getAuth(app?: FirebaseApp): Auth;

NgModule Provider

Traditional NgModule API for providing Firebase Auth instances.

/**
 * Firebase Auth NgModule for traditional module-based setup
 */
export class AuthModule {
  static forRoot(): ModuleWithProviders<AuthModule>;
}

Angular Services

Injectable services for accessing Firebase Auth instances in Angular components.

/**
 * Injectable service providing access to Firebase Auth instance
 */
export class Auth extends Auth {}

/**
 * Collection of all Firebase Auth instances
 */
export class AuthInstances extends Array<Auth> {}

/**
 * Observable stream of Firebase Auth instances
 */
export const authInstance$: Observable<Auth>;

User Authentication

Core authentication functions for user sign-in, sign-up, and sign-out.

/**
 * Sign in user with email and password
 * @param auth - Firebase Auth instance
 * @param email - User email address
 * @param password - User password
 * @returns Promise resolving to UserCredential
 */
export function signInWithEmailAndPassword(
  auth: Auth,
  email: string,
  password: string
): Promise<UserCredential>;

/**
 * Create new user account with email and password
 * @param auth - Firebase Auth instance
 * @param email - User email address
 * @param password - User password
 * @returns Promise resolving to UserCredential
 */
export function createUserWithEmailAndPassword(
  auth: Auth,
  email: string,
  password: string
): Promise<UserCredential>;

/**
 * Sign in user anonymously
 * @param auth - Firebase Auth instance
 * @returns Promise resolving to UserCredential
 */
export function signInAnonymously(auth: Auth): Promise<UserCredential>;

/**
 * Sign out current user
 * @param auth - Firebase Auth instance
 * @returns Promise that resolves when sign out is complete
 */
export function signOut(auth: Auth): Promise<void>;

Social Authentication

Authentication with social providers like Google, Facebook, Twitter, etc.

/**
 * Sign in with popup window
 * @param auth - Firebase Auth instance
 * @param provider - Authentication provider
 * @returns Promise resolving to UserCredential
 */
export function signInWithPopup(
  auth: Auth,
  provider: AuthProvider
): Promise<UserCredential>;

/**
 * Sign in with redirect
 * @param auth - Firebase Auth instance
 * @param provider - Authentication provider
 * @returns Promise that resolves when redirect is initiated
 */
export function signInWithRedirect(
  auth: Auth,
  provider: AuthProvider
): Promise<void>;

/**
 * Get redirect result after social sign-in
 * @param auth - Firebase Auth instance
 * @returns Promise resolving to UserCredential or null
 */
export function getRedirectResult(auth: Auth): Promise<UserCredential | null>;

/**
 * Sign in with credential
 * @param auth - Firebase Auth instance
 * @param credential - Authentication credential
 * @returns Promise resolving to UserCredential
 */
export function signInWithCredential(
  auth: Auth,
  credential: AuthCredential
): Promise<UserCredential>;

Custom Authentication

Authentication with custom tokens and phone numbers.

/**
 * Sign in with custom token
 * @param auth - Firebase Auth instance
 * @param customToken - Custom authentication token
 * @returns Promise resolving to UserCredential
 */
export function signInWithCustomToken(
  auth: Auth,
  customToken: string
): Promise<UserCredential>;

/**
 * Sign in with phone number
 * @param auth - Firebase Auth instance
 * @param phoneNumber - Phone number to verify
 * @param appVerifier - Application verifier (reCAPTCHA)
 * @returns Promise resolving to ConfirmationResult
 */
export function signInWithPhoneNumber(
  auth: Auth,
  phoneNumber: string,
  appVerifier: ApplicationVerifier
): Promise<ConfirmationResult>;

User Management

Functions for managing user accounts and profiles.

/**
 * Update user profile information
 * @param user - User instance
 * @param profile - Profile data to update
 * @returns Promise that resolves when update is complete
 */
export function updateProfile(
  user: User,
  profile: { displayName?: string | null; photoURL?: string | null }
): Promise<void>;

/**
 * Update user password
 * @param user - User instance
 * @param newPassword - New password
 * @returns Promise that resolves when password is updated
 */
export function updatePassword(user: User, newPassword: string): Promise<void>;

/**
 * Update user email address
 * @param user - User instance
 * @param newEmail - New email address
 * @returns Promise that resolves when email is updated
 */
export function updateEmail(user: User, newEmail: string): Promise<void>;

/**
 * Delete user account
 * @param user - User instance
 * @returns Promise that resolves when account is deleted
 */
export function deleteUser(user: User): Promise<void>;

/**
 * Reload user data
 * @param user - User instance
 * @returns Promise that resolves when user data is reloaded
 */
export function reload(user: User): Promise<void>;

Email Verification and Password Reset

Functions for email verification and password reset workflows.

/**
 * Send email verification to current user
 * @param user - User instance
 * @param actionCodeSettings - Optional action code settings
 * @returns Promise that resolves when email is sent
 */
export function sendEmailVerification(
  user: User,
  actionCodeSettings?: ActionCodeSettings
): Promise<void>;

/**
 * Send password reset email
 * @param auth - Firebase Auth instance
 * @param email - User email address
 * @param actionCodeSettings - Optional action code settings
 * @returns Promise that resolves when email is sent
 */
export function sendPasswordResetEmail(
  auth: Auth,
  email: string,
  actionCodeSettings?: ActionCodeSettings
): Promise<void>;

/**
 * Confirm password reset with code
 * @param auth - Firebase Auth instance
 * @param code - Password reset code from email
 * @param newPassword - New password
 * @returns Promise that resolves when password is reset
 */
export function confirmPasswordReset(
  auth: Auth,
  code: string,
  newPassword: string
): Promise<void>;

/**
 * Apply action code (verify email, recover email, etc.)
 * @param auth - Firebase Auth instance
 * @param code - Action code from email
 * @returns Promise that resolves when code is applied
 */
export function applyActionCode(auth: Auth, code: string): Promise<void>;

/**
 * Check action code validity and get info
 * @param auth - Firebase Auth instance
 * @param code - Action code to check
 * @returns Promise resolving to ActionCodeInfo
 */
export function checkActionCode(auth: Auth, code: string): Promise<ActionCodeInfo>;

Auth State Management

Functions for monitoring authentication state changes.

/**
 * Listen to authentication state changes
 * @param auth - Firebase Auth instance
 * @param nextOrObserver - Callback function or observer
 * @param error - Optional error callback
 * @param completed - Optional completion callback
 * @returns Unsubscribe function
 */
export function onAuthStateChanged(
  auth: Auth,
  nextOrObserver: (user: User | null) => void,
  error?: (error: AuthError) => void,
  completed?: () => void
): Unsubscribe;

/**
 * Listen to ID token changes
 * @param auth - Firebase Auth instance
 * @param nextOrObserver - Callback function or observer
 * @param error - Optional error callback
 * @param completed - Optional completion callback
 * @returns Unsubscribe function
 */
export function onIdTokenChanged(
  auth: Auth,
  nextOrObserver: (user: User | null) => void,
  error?: (error: AuthError) => void,
  completed?: () => void
): Unsubscribe;

/**
 * Register callback for before auth state changes
 * @param auth - Firebase Auth instance
 * @param callback - Callback function
 * @param onAbort - Optional abort callback
 * @returns Unsubscribe function
 */
export function beforeAuthStateChanged(
  auth: Auth,
  callback: (user: User | null) => void | Promise<void>,
  onAbort?: () => void
): Unsubscribe;

RxFire Observables

Reactive streams for authentication state using RxJS Observables.

/**
 * Observable of authentication state (user or null)
 * @param auth - Firebase Auth instance
 * @returns Observable stream of User or null
 */
export function authState(auth: Auth): Observable<User | null>;

/**
 * Observable of user object (null when signed out)
 * @param auth - Firebase Auth instance
 * @returns Observable stream of User or null
 */
export function user(auth: Auth): Observable<User | null>;

/**
 * Observable of ID token (null when signed out)
 * @param auth - Firebase Auth instance
 * @returns Observable stream of ID token string or null
 */
export function idToken(auth: Auth): Observable<string | null>;

Tokens and Claims

Functions for working with ID tokens and custom claims.

/**
 * Get ID token for current user
 * @param user - User instance
 * @param forceRefresh - Force token refresh
 * @returns Promise resolving to ID token string
 */
export function getIdToken(user: User, forceRefresh?: boolean): Promise<string>;

/**
 * Get ID token result with claims
 * @param user - User instance
 * @param forceRefresh - Force token refresh
 * @returns Promise resolving to IdTokenResult
 */
export function getIdTokenResult(
  user: User,
  forceRefresh?: boolean
): Promise<IdTokenResult>;

Utility Functions

Utility functions for authentication management.

/**
 * Fetch sign-in methods for email
 * @param auth - Firebase Auth instance
 * @param email - Email address to check
 * @returns Promise resolving to array of sign-in methods
 */
export function fetchSignInMethodsForEmail(
  auth: Auth,
  email: string
): Promise<string[]>;

/**
 * Check if action code is valid
 * @param auth - Firebase Auth instance
 * @param code - Action code to verify
 * @returns Promise resolving to ActionCodeInfo
 */
export function verifyPasswordResetCode(
  auth: Auth,
  code: string
): Promise<string>;

/**
 * Connect to Firebase Auth emulator
 * @param auth - Firebase Auth instance
 * @param url - Emulator URL
 * @param options - Optional configuration
 */
export function connectAuthEmulator(
  auth: Auth,
  url: string,
  options?: { disableWarnings?: boolean }
): void;

Types

Core Auth Types

/**
 * Firebase Auth instance
 */
interface Auth {
  readonly app: FirebaseApp;
  readonly currentUser: User | null;
  readonly config: Config;
}

/**
 * User account information
 */
interface User {
  readonly uid: string;
  readonly displayName: string | null;
  readonly email: string | null;
  readonly phoneNumber: string | null;
  readonly photoURL: string | null;
  readonly emailVerified: boolean;
  readonly isAnonymous: boolean;
  readonly metadata: UserMetadata;
  readonly providerData: UserInfo[];
  readonly refreshToken: string;
}

/**
 * User credential returned from authentication
 */
interface UserCredential {
  readonly user: User;
  readonly credential: AuthCredential | null;
  readonly providerId: string | null;
  readonly operationType: OperationType;
}

/**
 * Authentication credential
 */
interface AuthCredential {
  readonly providerId: string;
  readonly signInMethod: string;
}

Provider Types

/**
 * Base authentication provider
 */
abstract class AuthProvider {
  readonly providerId: string;
}

/**
 * Google authentication provider
 */
class GoogleAuthProvider extends AuthProvider {
  static readonly PROVIDER_ID: 'google.com';
  addScope(scope: string): GoogleAuthProvider;
  setCustomParameters(customOAuthParameters: object): GoogleAuthProvider;
}

/**
 * Facebook authentication provider
 */
class FacebookAuthProvider extends AuthProvider {
  static readonly PROVIDER_ID: 'facebook.com';
  addScope(scope: string): FacebookAuthProvider;
  setCustomParameters(customOAuthParameters: object): FacebookAuthProvider;
}

/**
 * Twitter authentication provider
 */
class TwitterAuthProvider extends AuthProvider {
  static readonly PROVIDER_ID: 'twitter.com';
  setCustomParameters(customOAuthParameters: object): TwitterAuthProvider;
}

/**
 * GitHub authentication provider
 */
class GithubAuthProvider extends AuthProvider {
  static readonly PROVIDER_ID: 'github.com';
  addScope(scope: string): GithubAuthProvider;
  setCustomParameters(customOAuthParameters: object): GithubAuthProvider;
}

Error and Result Types

/**
 * Authentication error
 */
interface AuthError extends Error {
  readonly code: AuthErrorCodes;
  readonly customData?: Record<string, unknown>;
}

/**
 * Phone number confirmation result
 */
interface ConfirmationResult {
  readonly verificationId: string;
  confirm(verificationCode: string): Promise<UserCredential>;
}

/**
 * ID token result with claims
 */
interface IdTokenResult {
  readonly token: string;
  readonly authTime: string;
  readonly issuedAtTime: string;
  readonly expirationTime: string;
  readonly signInProvider: string | null;
  readonly signInSecondFactor: string | null;
  readonly claims: ParsedToken;
}

/**
 * Action code information
 */
interface ActionCodeInfo {
  readonly operation: ActionCodeOperation;
  readonly data: {
    email?: string;
    previousEmail?: string;
    multiFactorInfo?: MultiFactorInfo;
  };
}

Usage Examples

Basic Email/Password Authentication

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

@Component({
  selector: 'app-auth',
  template: `
    <div *ngIf="user$ | async as user; else signInForm">
      <p>Welcome, {{ user.displayName || user.email }}!</p>
      <button (click)="signOut()">Sign Out</button>
    </div>
    
    <ng-template #signInForm>
      <button (click)="signIn()">Sign In</button>
      <button (click)="signUp()">Sign Up</button>
    </ng-template>
  `,
})
export class AuthComponent {
  private auth = inject(Auth);
  user$ = user(this.auth);

  async signIn() {
    try {
      const credential = await signInWithEmailAndPassword(
        this.auth,
        'user@example.com',
        'password123'
      );
      console.log('Signed in:', credential.user);
    } catch (error) {
      console.error('Sign in error:', error);
    }
  }

  async signUp() {
    try {
      const credential = await createUserWithEmailAndPassword(
        this.auth,
        'user@example.com',
        'password123'
      );
      console.log('Account created:', credential.user);
    } catch (error) {
      console.error('Sign up error:', error);
    }
  }

  async signOut() {
    try {
      await signOut(this.auth);
      console.log('Signed out');
    } catch (error) {
      console.error('Sign out error:', error);
    }
  }
}

Social Authentication with Google

import { Auth, signInWithPopup, GoogleAuthProvider } from '@angular/fire/auth';

@Component({
  // Component configuration...
})
export class SocialAuthComponent {
  private auth = inject(Auth);

  async signInWithGoogle() {
    const provider = new GoogleAuthProvider();
    provider.addScope('profile');
    provider.addScope('email');

    try {
      const result = await signInWithPopup(this.auth, provider);
      console.log('Google sign in successful:', result.user);
    } catch (error) {
      console.error('Google sign in error:', error);
    }
  }
}

Monitoring Auth State

import { Component, inject } from '@angular/core';
import { Auth, authState, user, idToken } from '@angular/fire/auth';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-auth-monitor',
  template: `
    <div>
      <p>Auth State: {{ (authState$ | async) ? 'Signed In' : 'Signed Out' }}</p>
      <p>User Email: {{ (user$ | async)?.email }}</p>
      <p>Has Token: {{ (hasToken$ | async) ? 'Yes' : 'No' }}</p>
    </div>
  `,
})
export class AuthMonitorComponent {
  private auth = inject(Auth);
  
  authState$ = authState(this.auth);
  user$ = user(this.auth);
  hasToken$ = idToken(this.auth).pipe(
    map(token => !!token)
  );
}