Next.js Authentication with Supabase and NextAuth.js: A Deep Dive (Part 1 of 3)

Next.js Authentication with Supabase and NextAuth.js: A Deep Dive (Part 1 of 3) | AI-Hub Blog | AI Hub

npm install next-auth

npm install @supabase/supabase-js

npm install --save-dev @types/node @types/react

app/
├── api/
│   └── auth/
│       └── [...nextauth]/
│           └── route.ts
├── auth/
│   ├── error/
│   │   └── page.tsx
│   └── signin/
│       └── page.tsx
└── ...

pages/
├── api/
│   └── auth/
│       └── [...nextauth].ts
├── auth/
│   ├── signin.tsx
│   └── error.tsx
└── ...

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=super_secret_value
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

import NextAuth, { NextAuthOptions } from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      credentials: {
        email:    { label: "Email",    type: "email"    },
        password: { label: "Password", type: "password" },
        mode:     { label: "Mode",     type: "text"     }
      },
      async authorize(credentials) {
        // We'll implement this fully in Part 2
        return null;
      }
    })
  ],
  session: {
    strategy: 'jwt',
  },
  pages: {
    signIn: '/auth/signin',
    error:  '/auth/error'
  },
  secret: process.env.NEXTAUTH_SECRET
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Next.js Authentication with Supabase and NextAuth.js: A Deep Dive (Part 1 of 3)

Next.js Authentication with Supabase and NextAuth.js: A Deep Dive (Part 1 of 3)

Introduction

Deepen Your Knowledge

Stay updated with the latest in AI

🤔 Why NextAuth & Supabase?

1. 🏗️ Project Setup

1.1 Install NextAuth (Core Auth Library)

1.2 Install the Supabase Client

1.3 (Optional) Type Definitions

1.4 Where to Place the NextAuth Route File

(a) Next.js 13+ App Router

(b) Next.js 12 or Earlier (Pages Router)

1.5 Create a Supabase Project

1.6 Environment Variables

2. Building the Foundation

2.1 🔑 Supabase Client

2.2 🎯 Minimal NextAuth Configuration

🔜 What's Next?

😊 Conclusion

Optional Resources