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.config.ts

1. Authentication type#

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

authType: 'password'

2. Oauth providers#

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

authProviders: {
  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.