Supabase
Authentication
Hướng dẫn tích hợp Supabase Auth với Next.js
cài đặt
- Cài đặt dự án Next JS
pnpm create next-app next-supabase-auth- Typescript --> yes
- Eslint --> yes
- Tubopack --> no
- src --> yes
- @ --> no
- Thêm thư viện Supabase
pnpm add @supabase/supabase-js @supabase/ssr- Tạo file
.env.local
NEXT_PUBLIC_SUPABASE_URL=<your_supabase_project_url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>- Tạo client và server
import { createBrowserClient } from '@supabase/ssr'
export function createClient() {
return createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
}- Tạo middleware để kiểm soát
import { type NextRequest } from 'next/server'
import { updateSession } from '@/utils/supabase/middleware'
export async function middleware(request: NextRequest) {
return await updateSession(request)
}
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
* Feel free to modify this pattern to include more paths.
*/
'/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
],
}