Auth Guard

/**
 * Angular route guard for authentication-based routing
 */
export class AuthGuard implements CanActivate {
  constructor(router: Router, auth: Auth);
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree>;
}

/**
 * Auth Guard NgModule
 */
export class AuthGuardModule {
  static forRoot(): ModuleWithProviders<AuthGuardModule>;
}

/**
 * Basic authentication pipe - checks if user is logged in
 */
export const loggedIn: AuthPipe;

/**
 * Check if user is not anonymous
 */
export const isNotAnonymous: AuthPipe;

/**
 * Check if user's email is verified
 */
export const emailVerified: AuthPipe;

/**
 * Redirect unauthorized users to specified route
 * @param redirect - Route to redirect to
 * @returns Auth pipe function
 */
export function redirectUnauthorizedTo(redirect: any[]): AuthPipe;

/**
 * Redirect logged in users to specified route
 * @param redirect - Route to redirect to
 * @returns Auth pipe function
 */
export function redirectLoggedInTo(redirect: any[]): AuthPipe;

/**
 * Check if user has custom claim
 * @param claim - Claim name to check
 * @returns Auth pipe function
 */
export function hasCustomClaim(claim: string): AuthPipe;

/**
 * Check if user has custom claim with specific value
 * @param claim - Claim name to check
 * @param value - Expected claim value
 * @returns Auth pipe function
 */
export function hasCustomClaimValue(
  claim: string,
  value: any
): AuthPipe;

/**
 * Create route configuration with auth guard
 * @param pipe - Auth pipe or array of auth pipes
 * @returns CanActivate function for route configuration
 */
export function canActivate(
  pipe: AuthPipe | AuthPipe[]
): () => Observable<boolean | string | any[]>;

/**
 * Authentication pipe function type
 */
type AuthPipe = (user: User | null) => boolean | string | any[];

/**
 * Authentication pipe generator function type
 */
type AuthPipeGenerator = (...args: any[]) => AuthPipe;

import { Routes } from '@angular/router';
import { 
  AuthGuard, 
  redirectUnauthorizedTo, 
  redirectLoggedInTo,
  canActivate 
} from '@angular/fire/auth-guard';

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['/login']);
const redirectLoggedInToItems = () => redirectLoggedInTo(['/items']);
const belongsToAccount = (next: any) => hasCustomClaim(`account-${next.params.id}`);

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    ...canActivate(redirectLoggedInToItems)
  },
  {
    path: 'login',
    component: LoginComponent,
    ...canActivate(redirectLoggedInToItems)
  },
  {
    path: 'items',
    component: ItemsComponent,
    ...canActivate(redirectUnauthorizedToLogin)
  },
  {
    path: 'account/:id',
    component: AccountComponent,
    ...canActivate(belongsToAccount)
  }
];

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

@Component({
  selector: 'app-protected',
  template: `
    <div *ngIf="isLoggedIn$ | async; else loginPrompt">
      <h2>Protected Content</h2>
      <div *ngIf="isEmailVerified$ | async; else verifyEmail">
        <p>Welcome, verified user!</p>
      </div>
      <ng-template #verifyEmail>
        <p>Please verify your email address.</p>
      </ng-template>
    </div>
    
    <ng-template #loginPrompt>
      <p>Please log in to access this content.</p>
    </ng-template>
  `,
})
export class ProtectedComponent {
  private auth = inject(Auth);
  
  user$ = user(this.auth);
  isLoggedIn$ = this.user$.pipe(map(user => !!user));
  isEmailVerified$ = this.user$.pipe(
    map(user => user?.emailVerified ?? false)
  );
  isAnonymous$ = this.user$.pipe(
    map(user => user?.isAnonymous ?? true)
  );
}

import { hasCustomClaim, emailVerified, isNotAnonymous } from '@angular/fire/auth-guard';

// Check for admin role
const adminOnly = () => hasCustomClaim('admin');

// Check for specific permission
const canEditPosts = () => hasCustomClaimValue('permissions', 'edit_posts');

// Combine multiple conditions
const verifiedNonAnonymousUser = () => [
  emailVerified,
  isNotAnonymous
];

// Use in routes
const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    ...canActivate(adminOnly)
  },
  {
    path: 'edit-posts',
    component: EditPostsComponent,
    ...canActivate(canEditPosts)
  },
  {
    path: 'verified-area',
    component: VerifiedAreaComponent,
    ...canActivate(verifiedNonAnonymousUser)
  }
];