Authentication
How to setup authentication.
Authentication is mocked by default, supported authentication methods are Supabase and Magic.
Supabase#
- Copy
apps/nextjs/.env.example
toapps/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
toapps/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?