Login Page

Customising Text

Change the labels, placeholder text, and button copy without replacing the component:

authConfig={{
  login: {
    title: 'Welcome Back',
    subtitle: 'Sign in to your account',
    submitButtonText: 'Sign In',
    showRememberMe: true,
    defaultTab: 'email',   // 'email' or 'mobile'
    formLabels: {
      email: 'Email Address',
      password: 'Password',
    },
    formPlaceholders: {
      email: 'you@example.com',
      password: '••••••••',
    },
  },
}}

Redirect After Login

By default users are redirected based on their role's configured landing route. To override:

authConfig={{
  login: {
    redirectAfterLogin: '/app/dashboard',
  },
}}

Replacing the Login Page

To build a completely custom login experience, pass a LoginPage component:

import CustomLogin from './custom/pages/CustomLogin';

authConfig={{
  customComponents: {
    LoginPage: CustomLogin,
  },
}}

Your CustomLogin receives standard React props. You're responsible for calling the Zango auth API and handling the redirect.

Replacing Just the Login Card

To keep the page layout but swap only the card:

authConfig={{
  customComponents: {
    LoginCard: MyCustomCard,
  },
}}

Role Selection Page

When a user has multiple roles, a role selection screen appears after login. Customise its text:

authConfig={{
  roleSelection: {
    title: 'Choose your role',
    subtitle: 'Select the role to continue with',
    continueButtonText: 'Continue',
    gridColumns: 2,   // 2 or 3
  },
}}

Two-Factor Auth Page

authConfig={{
  twoFactor: {
    title: 'Verify your identity',
    subtitle: 'Enter the code sent to your device',
    codeLength: 6,
    resendCountdown: 60,
    submitButtonText: 'Verify',
  },
}}