Customize authentication screens

How to customize the built-in authentication screens

Configure your auth screens

The auth screen configuration can be changed in apps/web/config/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',
  },
}

Customize the auth screens

Login screen

The login screen is located in apps/web/features/auth/login/login-page.tsx.

Signup screen

The signup screen is located in apps/web/features/auth/signup/signup-page.tsx.