Authentifizierung – Übersicht

Request Flow:

Browser Request
    |
    v
Middleware (middleware.ts)
    |--- Public route? ---> Allow through (auth state still available)
    |--- Protected route? --> Clerk auth.protect() --> Redirect to /login if unauthenticated
    |
    v
ClerkProvider (layout.tsx)
    |--- Production: Real Clerk SDK
    |--- Test/Demo: Bypassed (no ClerkProvider)
    |
    v
Route Component
    |--- Server Component: getServerAuth() / currentUser()
    |--- Client Component: useConditionalAuth() / useConditionalUser()
    |
    v
Database (via webhook sync)
    |--- user.created --> prisma.user.upsert (Free Tier + credits)
    |--- user.updated --> prisma.user.update (email, name)
    |--- user.deleted --> prisma.user.delete

// Production/Development: Wrap with ClerkProvider
  // Test: Return content directly without ClerkProvider
  return useClerk ? (
    <ClerkProvider
      dynamic
      appearance={{
        elements: {
          formButtonPrimary: 'bg-primary hover:bg-primary/90',
          footerActionLink: 'text-primary hover:text-primary/90',
        },
      }}
    >
      {content}
    </ClerkProvider>
  ) : (
    content
  )
}

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/login
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/register
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

export function shouldUseClerk(): boolean {
  // Priority 0: Demo Mode always bypasses Clerk (even in production)
  // This allows public demo deployments without real auth
  if (process.env.NEXT_PUBLIC_DEMO_MODE === 'true') {
    return false
  }

  // Priority 1: Never use test auth in production (safety first)
  if (isProduction()) {
    return true
  }

  // Priority 2: Use test auth in test environments (explicit disable)
  if (isTestEnvironment()) {
    return false
  }

  // Priority 3: In development, use Clerk if credentials are available
  return hasClerkCredentials()
}

export const authConfig = {
  isTest: isTestEnvironment(),
  isProd: isProduction(),
  hasKeys: hasClerkCredentials(),
  useClerk: shouldUseClerk(),

  // Helper for debugging
  debug() {
    console.log('Auth Config:', {
      NODE_ENV: process.env.NODE_ENV,
      CLERK_ENABLED: process.env.NEXT_PUBLIC_CLERK_ENABLED,
      VERCEL_ENV: process.env.VERCEL_ENV,
      HAS_PUBLISHABLE_KEY: !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
      USE_CLERK: this.useClerk,
    })
  },
}

export async function getServerAuth() {
  // Test mode: Return mock auth data
  if (!shouldUseClerk()) {
    return {
      userId: testUser.id,
      sessionId: 'test-session-123',
      sessionClaims: null,
      actor: null,
      orgId: null,
      orgRole: null,
      orgSlug: null,
      orgPermissions: null,
      has: () => false,
      debug: () => null,
    }
  }

  // Production mode: Use real Clerk auth with dynamic import
  try {
    const { auth } = await import('@clerk/nextjs/server')
    return await auth()
  } catch (error) {
    console.error('[Server Auth] Failed to load Clerk auth:', error)
    throw new Error('Authentication unavailable')
  }
}

import { getServerAuth, getServerUser } from '@/lib/auth/server-helpers'

// In einer Server Component oder API-Route:
const { userId } = await getServerAuth()
const user = await getServerUser()

import { useConditionalAuth, useConditionalUser } from '@/lib/auth/use-conditional-auth'

function MyComponent() {
  const { userId, isSignedIn } = useConditionalAuth()
  const { user } = useConditionalUser()

  if (!isSignedIn) return <p>Please sign in</p>
  return <p>Hello, {user?.firstName}</p>
}