Email & password

A complete login form with email/password fields. Handles multi-step auth flows inline: forgot password, magic link, passkey login, MFA challenge, MFA setup, and workspace selection all appear automatically within the same component when the auth state requires them.

Usage:

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';
import { LoginFormComponent } from '@nebulr-group/bridge-angular';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [LoginFormComponent],
  template: `
    <bridge-login-form
      [showSignupLink]="true"
      signupHref="/auth/signup"
      [showForgotPassword]="true"
      [showMagicLink]="true"
      [showPasskeys]="true"
      (login)="router.navigateByUrl('/dashboard')"
      (error)="onError($event)"
    />
  `,
})
export class LoginPageComponent {
  protected readonly router = inject(Router);

  onError(err: Error): void {
    console.error(err);
  }
}

Inputs & outputs:

Input / output	Type	Default	Description
`showSignupLink`	`boolean`	auto: `signupEnabled` from app config, `true` if unset	Show a link to the signup page
`signupHref`	`string`	`'/auth/signup'`	Signup page URL
`showForgotPassword`	`boolean`	`true`	Show the forgot password link
`forgotPasswordHref`	`string`	`'/auth/forgot-password'`	Reserved for a future external-redirect mode; currently the forgot password link always opens the inline form
`showMagicLink`	`boolean`	auto: `magicLinkEnabled` from app config, `false` if unset	Show the magic link login option
`magicLinkHref`	`string`	`'/auth/magic-link'`	Magic link request page URL
`showPasskeys`	`boolean`	auto: `passkeysEnabled` from app config, `false` if unset	Show the passkey login button
`passkeySetupHref`	`string`	`'/auth/setup-passkey'`	Passkey setup page URL
`(login)`	`EventEmitter<void>`	(none)	Called after successful login (all steps complete)
`(error)`	`EventEmitter<Error>`	(none)	Called on any login error
`(onSsoClick)`	`EventEmitter<string>`	(none)	Called when an SSO button is clicked
`heading`	`string`	`''`	Custom heading text
`ssoConnections`	`FederationConnection[]`	`[]`	SSO connections to display (a federation connection is an SSO identity provider configured for your app, e.g. Google or Azure AD). Auto-derived from app config if not set
`ssoMode`	`'redirect' \| 'popup'`	`'redirect'`	SSO kickoff strategy for the built-in buttons. See SSO mode. Ignored when `(onSsoClick)` is provided.

Auth state transitions: After a successful email/password login, the <bridge-login-form> checks the resulting auth state. If MFA is required, it automatically shows <bridge-mfa-challenge>. If MFA setup is required, it shows <bridge-mfa-setup>. If workspace selection is needed (multi-workspace user), it shows <bridge-tenant-selector>. The (login) output fires only after all steps are complete and the user is fully authenticated.