Authenticate NextJs with Supabase

Supabase Auth in NextJS 13

Supabase Auth is one of the several service that help you to manage user in NextJS. For Alternative you can use Firebase or Clerk. You can check this article if you wanna use Clerk. So Let’s Go! to the Tutorial.

Step 1: Install Dependency

To using Supabase Auth we need Supabase Next.js Auth Helper, to install run this command:

npm install @supabase/auth-helpers-nextjs

Step 2: Setting Environtment

Create new file .env.local on the root folder

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

Change the value with your supabase url and anon key from Supabase Dashboard.

Step 3: Build UI

• Modify file /app/global.css like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

• Modify index page /app/page.tsx like this :

export default function Home() {
  return (
    <main className="antialiased flex min-h-screen flex-col items-center justify-between p-24">
      <div className="flex gap-4 items-center">
        Welcome, Guest!
      </div>…