Authentication

How to setup authentication.

Authentication is mocked by default, supported authentication methods are Supabase and Magic.

Supabase#

  1. Copy apps/nextjs/.env.example to apps/nextjs/.env and add your public Supabase URL and KEY.
NEXT_PUBLIC_SUPABASE_URL="https://x.supabase.co"
NEXT_PUBLIC_SUPABASE_KEY="x"
  1. Edit apps/nextjs/src/pages/_app.tsx and update the authservice imports.
import { authService } from '../lib/supabase'
// import { authService } from '../lib/magic'
//import { authService } from '@app/config/mock-auth-service'

Magic#

  1. Copy apps/nextjs/.env.example to apps/nextjs/.env and add your public Magic API Key.
NEXT_PUBLIC_MAGIC_API_KEY="..."
  1. Edit apps/nextjs/src/pages/_app.tsx and update the authservice imports.
//import { authService } from '../lib/supabase'
import { authService } from '../lib/magic'
//import { authService } from '@app/config/mock-auth-service'

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?