Customize authentication screens

How to customize the built-in authentication screens

Configure your auth screens

Next you'll need to configure your authentication screens. This can be done by editing packages/app-config/src/auth.ts.

1. Authentication type

Here you can change your preferred authentication type, magiclink or password.

export const authType = 'password'

2. Oauth providers

And the OAuth providers you want to use. Set authProviders to undefined to disable social login.

export const authProviders: AvailableProviders = {
  google: {
    icon: FaGoogle,
    name: 'Google',
  },
  github: {
    icon: FaGithub,
    name: 'Github',
  },
}

3. Paths and titles

If you use different paths you can change them here.

export const authPaths: Record<string, any> = {
  '/login': {
    view: 'login',
    title: 'Welcome back',
  },
  '/signup': {
    view: 'signup',
    title: 'Sign up for free',
  },
  '/forgot_password': {
    view: 'forgot_password',
    title: 'Reset your password',
  },
  '/reset_password': {
    view: 'update_password',
    title: 'Enter a new password',
  },
}

Was this helpful?