Integrating Supabase Auth in Next App Router for Secure Apps

Prerequisite

1. Next 14 (App Router)
2. TailwindCSS
3. Supabase Auth

Installation

Run this command to install Supabase Auth Client

npm install @supabase/supabase-js @supabase/ssr

Setup Env

Create new file.env.local and set this key with your value from Supabase

NEXT_PUBLIC_SUPABASE_URL=<your_supabase_project_url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>

Setup Supabase Client

Supabase Client can be access in two different ways, through Client Component (Browser), or Server (Server Component, Server Action, Route Handler)

1. Supabase for Client Component

Create new file inside utils/supabase/client.ts and follow this code:

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

2. Supabase for Server Component