Class AuthComponent

sample/src/app/auth/auth.component.ts:44–114

    imports: [AsyncPipe]
})
export class AuthComponent implements OnDestroy {

  private readonly auth = inject(Auth);
  protected readonly authState = authState(this.auth);

  private readonly transferState = inject(TransferState);
  private readonly transferStateKey = makeStateKey<string|undefined>("auth:uid");
  protected readonly uid = this.authState.pipe(map(u => u?.uid)).pipe(
    isPlatformServer(inject(PLATFORM_ID)) ?
        tap(it => this.transferState.set(this.transferStateKey, it)) :
        this.transferState.hasKey(this.transferStateKey) ?
          startWith(this.transferState.get(this.transferStateKey, undefined)) :
          tap()
);

  protected readonly showLoginButton = this.uid.pipe(map(it => !it));
  protected readonly showLogoutButton = this.uid.pipe(map(it => !!it));

  private readonly unsubscribeFromOnIdTokenChanged: (() => void) | undefined;
  private readonly unsubscribeFromBeforeAuthStateChanged: (() => void) | undefined;

  constructor() {
    if (isPlatformBrowser(inject(PLATFORM_ID))) {

      this.unsubscribeFromOnIdTokenChanged = onIdTokenChanged(this.auth, async (user) => {
          if (user) {
              const idToken = await user.getIdToken();
              cookies.set("__session", idToken);
          } else {
              cookies.remove("__session");
          }
      });
  
      let priorCookieValue: string|undefined;
      this.unsubscribeFromBeforeAuthStateChanged = beforeAuthStateChanged(this.auth, async (user) => {
          priorCookieValue = cookies.get("__session");
          const idToken = await user?.getIdToken();
          if (idToken) {
              cookies.set("__session", idToken);
          } else {
              cookies.remove("__session");
          }
      }, async () => {
          // If another beforeAuthStateChanged rejects, revert the cookie (best-effort)
          if (priorCookieValue) {
              cookies.set("__session", priorCookieValue);
          } else {
              cookies.remove("__session");
          }
      });
    }
  }

  ngOnDestroy(): void {
      this.unsubscribeFromBeforeAuthStateChanged?.();
      this.unsubscribeFromOnIdTokenChanged?.();
  }