lumina-nextjs-template/.claude/skills/supabase-auth/SKILL.md

name, description

name	description
supabase-auth	Supabase Authentication Setup und User Management. Nutze diesen Skill fuer Login, Signup, OAuth, Sessions, Password Reset und geschuetzte Routen. Aktiviert bei Begriffen wie "Login", "Anmeldung", "Registrierung", "Signup", "Auth", "Authentication", "User", "Benutzer", "Session", "Passwort", "OAuth", "Google Login", "geschuetzt", "protected route".

Supabase Authentication Skill

Dieser Skill hilft bei Authentication mit Supabase.

Auth Client Setup

// lib/supabase.ts - Browser Client
import { createClient } from '@supabase/supabase-js';

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

// lib/supabase-admin.ts - Server Client
export const supabaseAdmin = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!,
  {
    auth: {
      autoRefreshToken: false,
      persistSession: false
    }
  }
);

Sign Up / Sign In

// Email/Password Signup
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'secure-password',
  options: {
    data: { full_name: 'Max Mustermann' }
  }
});

// Email/Password Login
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password'
});

// Magic Link
const { error } = await supabase.auth.signInWithOtp({
  email: 'user@example.com',
  options: {
    emailRedirectTo: `${window.location.origin}/auth/callback`
  }
});

// OAuth (Google, GitHub, etc.)
const { error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: `${window.location.origin}/auth/callback`
  }
});

Session Management

// Aktuelle Session
const { data: { session } } = await supabase.auth.getSession();

// Aktueller User
const { data: { user } } = await supabase.auth.getUser();

// Auth State Listener
supabase.auth.onAuthStateChange((event, session) => {
  console.log(event, session);
});

// Logout
await supabase.auth.signOut();

Password Reset

// Reset anfordern
const { error } = await supabase.auth.resetPasswordForEmail(email, {
  redirectTo: `${window.location.origin}/auth/reset-password`
});

// Neues Passwort setzen
const { error } = await supabase.auth.updateUser({
  password: 'new-password'
});

Middleware (Protected Routes)

// middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let response = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get: (name) => request.cookies.get(name)?.value,
        set: (name, value, options) => {
          response.cookies.set({ name, value, ...options });
        },
        remove: (name, options) => {
          response.cookies.set({ name, value: '', ...options });
        },
      },
    }
  );

  const { data: { session } } = await supabase.auth.getSession();

  // Redirect wenn nicht eingeloggt
  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return response;
}

export const config = {
  matcher: ['/dashboard/:path*', '/api/protected/:path*']
};

Auth Context

Siehe templates/AuthContext.tsx fuer einen kompletten Auth Provider.

Best Practices

1. SSR Auth mit @supabase/ssr
2. Middleware fuer Route Protection
3. Service Role Key nur serverseitig
4. User-freundliche Fehlermeldungen
5. Email Verification aktivieren