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

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

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

// Custom TypeScript interfaces
interface CustomUser {
  id: string;
  email: string;
}

interface CustomSession {
  user: CustomUser;
  accessToken?: string;
}

// Auth handler functions
const authHandlers = {
  async handleSignup(email: string, password: string) {
    const { data, error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        emailRedirectTo: `${process.env.NEXTAUTH_URL}`,
      },
    });

    if (error) {
      console.error('[AUTH] Signup error:', error);
      throw new Error(error.message);
    }

    if (!data.user?.id) {
      throw new Error('Signup successful. Please check your email to confirm.');
    }

    return { id: data.user.id, email: data.user.email! };
  },

  async handleSignin(email: string, password: string) {
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      console.error('[AUTH] Signin error:', error);
      throw new Error(error.message);
    }

    return { id: data.user.id, email: data.user.email! };
  },
};

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) {
        if (!credentials?.email || !credentials?.password) return null;

        try {
          if (credentials.mode === 'signup') {
            return await authHandlers.handleSignup(
              credentials.email,
              credentials.password
            );
          } else {
            return await authHandlers.handleSignin(
              credentials.email,
              credentials.password
            );
          }
        } catch (error: any) {
          throw new Error(error.message);
        }
      },
    }),
  ],

  session: { strategy: 'jwt' },

  callbacks: {
    async jwt({ token, user }) {
      // Runs after authorize() — store user data in the JWT
      if (user) {
        token.userId = user.id;
        token.email  = user.email;
        token.lastUpdated = Date.now();
      }
      return token;
    },

    async session({ session, token }) {
      // Runs whenever the session is checked — shape the client-facing session
      if (token) {
        session.user = {
          ...session.user,
          id: token.userId as string,
        };
      }
      return session;
    },
  },

  pages: {
    signIn: '/auth/signin',
    error:  '/auth/error',
  },

  secret: process.env.NEXTAUTH_SECRET,
};

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

Frontend form → signIn('credentials', { email, password, mode: 'signup' })
  → NextAuth sees mode='signup'
    → calls handleSignup in route.ts
      → Supabase creates user
        → JWT callback stores userId in token
          → Session callback exposes userId to client

// app/auth/signin/page.tsx
'use client';

import { signIn } from 'next-auth/react';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function SignInPage() {
  const router = useRouter();
  const [email, setEmail]       = useState('');
  const [password, setPassword] = useState('');
  const [mode, setMode]         = useState<'signin' | 'signup'>('signin');
  const [error, setError]       = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    const result = await signIn('credentials', {
      email,
      password,
      mode,
      redirect: false,
    });

    if (result?.error) {
      setError(result.error);
    } else {
      router.push('/dashboard');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <button type="submit">
        {mode === 'signin' ? 'Sign In' : 'Sign Up'}
      </button>
      <button type="button" onClick={() => setMode(mode === 'signin' ? 'signup' : 'signin')}>
        Switch to {mode === 'signin' ? 'Sign Up' : 'Sign In'}
      </button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </form>
  );
}

import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';
import { redirect } from 'next/navigation';

export default async function DashboardPage() {
  const session = await getServerSession(authOptions);

  if (!session) {
    redirect('/auth/signin');
  }

  return <h1>Welcome, {session.user?.email}</h1>;
}

'use client';
import { signOut } from 'next-auth/react';

export function SignOutButton() {
  return (
    <button onClick={() => signOut({ callbackUrl: '/' })}>
      Sign Out
    </button>
  );
}

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

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

Introduction

Deepen Your Knowledge

Stay updated with the latest in AI

Series Overview

Key Players

1. Implementing the Auth Handlers

2. The Full NextAuth Configuration

How the Flow Works

3. Understanding the Callbacks

`jwt` Callback

`session` Callback

5. Protecting Routes

6. Sign-Out

🔜 What's Next?

😊 Conclusion

Resources

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

Introduction

Deepen Your Knowledge

Stay updated with the latest in AI

Series Overview

Key Players

1. Implementing the Auth Handlers

2. The Full NextAuth Configuration

How the Flow Works

3. Understanding the Callbacks

jwt Callback

session Callback

4. The Sign-In Page

5. Protecting Routes

6. Sign-Out

🔜 What's Next?

😊 Conclusion

Resources

`jwt` Callback

`session` Callback