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?