PKCE Auth Flow

Enforces PKCE-based OAuth code flow replacing implicit auth flows for modern Supabase auth.

Overview

This tile implements Proof Key for Code Exchange (PKCE) as the mandatory auth flow for Supabase projects using modern SSR frameworks. PKCE replaces the implicit flow (token-in-fragment) with a secure code exchange performed server-side. Tokens are synchronized via secure HTTP-only cookies, eliminating exposure through localStorage or URL fragments.

Reference

Client Configuration

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

const supabase = createClient(url, anonKey, {
  auth: { flowType: 'pkce' }
});

Server-Side Callback (Next.js App Router)

// app/auth/callback/route.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const code = searchParams.get('code');
  if (code) {
    const supabase = createServerClient(/* cookie config */);
    await supabase.auth.exchangeCodeForSession(code);
  }
  return NextResponse.redirect(new URL('/', request.url));
}

Session Refresh Middleware

// middleware.ts
const supabase = createServerClient(/* cookie config */);
await supabase.auth.getUser(); // refreshes session via cookies

Dependencies

• supabase-mcp-verification — Root prerequisite. MUST be installed and passing.
• @supabase/ssr — Required for cookie-based session management.
• Incompatible with: supabase/implicit-auth-flow.

Composition Position

• Stage: auth-foundation
• Priority: HIGH
• Executes after supabase-mcp-verification. All downstream auth consumers MUST use PKCE-issued sessions.