Authentication

How to setup authentication.

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

Supabase#

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"

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#

Copy apps/nextjs/.env.example to apps/nextjs/.env and add your public Magic API Key.

NEXT_PUBLIC_MAGIC_API_KEY="..."

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?