---
import MainLayout from '../../layouts/main.astro';
import { withBase } from '@/lib/base-path';
---

<MainLayout title="Authentication & SSO - Gitea Mirror">
  <main class="max-w-5xl mx-auto px-4 py-12">
    <div class="sticky top-4 z-10 mb-6">
      <a
        href={withBase('/docs/')}
        class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-card text-foreground hover:bg-muted transition-colors border border-border focus:ring-2 focus:ring-ring outline-none"
      >
        <span aria-hidden="true">&larr;</span> Back to Documentation
      </a>
    </div>

    <article class="bg-card rounded-2xl shadow-lg p-6 md:p-8 border border-border">
      <!-- Header -->
      <div class="mb-12 space-y-4">
        <div class="flex items-center gap-2 text-sm text-muted-foreground mb-2">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
          </svg>
          <span>Authentication</span>
        </div>
        <h1 class="text-4xl font-bold tracking-tight">Authentication & SSO Configuration</h1>
        <p class="text-lg text-muted-foreground leading-relaxed max-w-4xl">
          Configure authentication methods including email/password, Single Sign-On (SSO), and OIDC provider functionality for Gitea Mirror.
        </p>
      </div>

      <!-- Overview -->
      <section class="mb-12">
        <h2 class="text-2xl font-bold mb-6">Authentication Overview</h2>
        
        <div class="bg-gradient-to-r from-primary/5 to-transparent rounded-lg p-6 border-l-4 border-primary mb-6">
          <p class="text-base leading-relaxed">
            Gitea Mirror uses <strong>Better Auth</strong>, a modern authentication library that supports multiple authentication methods. 
            All authentication settings can be configured through the web UI without editing configuration files.
          </p>
        </div>

        <h3 class="text-lg font-semibold mb-4">Supported Authentication Methods</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[
            {
              icon: '✉️',
              title: 'Email & Password',
              desc: 'Traditional authentication with email and password. Always enabled by default.',
              status: 'Always Enabled'
            },
            {
              icon: '🌐',
              title: 'Single Sign-On (SSO)',
              desc: 'Allow users to sign in using external OIDC providers like Google, Okta, or Azure AD.',
              status: 'Optional'
            },
            {
              icon: '🔑',
              title: 'OIDC Provider',
              desc: 'Act as an OIDC provider, allowing other applications to authenticate through Gitea Mirror.',
              status: 'Optional'
            }
          ].map(method => (
            <div class="bg-card rounded-lg border border-border p-4 hover:border-primary/50 transition-colors">
              <div class="text-2xl mb-3">{method.icon}</div>
              <h4 class="font-semibold mb-2">{method.title}</h4>
              <p class="text-sm text-muted-foreground mb-3">{method.desc}</p>
              <span class={`text-xs px-2 py-1 rounded-full ${method.status === 'Always Enabled' ? 'bg-green-500/10 text-green-600 dark:text-green-500' : 'bg-blue-500/10 text-blue-600 dark:text-blue-500'}`}>
                {method.status}
              </span>
            </div>
          ))}
        </div>
      </section>

      <div class="my-12 h-px bg-border/50"></div>

      <!-- Accessing Authentication Settings -->
      <section class="mb-12">
        <h2 class="text-2xl font-bold mb-6">Accessing Authentication Settings</h2>
        
        <ol class="space-y-3">
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">1</span>
            <span>Navigate to the <strong>Configuration</strong> page</span>
          </li>
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">2</span>
            <span>Click on the <strong>Authentication</strong> tab</span>
          </li>
          <li class="flex gap-3">
            <span class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">3</span>
            <span>Configure SSO providers or OAuth applications as needed</span>
          </li>
        </ol>
      </section>

      <div class="my-12 h-px bg-border/50"></div>

      <!-- SSO Configuration -->
      <section class="mb-12">
        <h2 class="text-2xl font-bold mb-6">Single Sign-On (SSO) Configuration</h2>
        
        <p class="text-muted-foreground mb-6">
          SSO allows your users to authenticate using external identity providers. This is useful for organizations that already have centralized authentication systems.
        </p>

        <h3 class="text-xl font-semibold mb-4">Adding an SSO Provider</h3>
        
        <div class="bg-card rounded-lg border border-border p-6 mb-6">
          <h4 class="font-semibold mb-4">Required Information</h4>
          
          <div class="space-y-4">
            {[
              { name: 'Issuer URL', desc: 'The OIDC issuer URL of your provider', example: 'https://accounts.google.com' },
              { name: 'Domain', desc: 'The email domain for this provider', example: 'example.com' },
              { name: 'Provider ID', desc: 'A unique identifier for this provider', example: 'google-sso' },
              { name: 'Client ID', desc: 'OAuth client ID from your provider', example: '123456789.apps.googleusercontent.com' },
              { name: 'Client Secret', desc: 'OAuth client secret from your provider', example: 'GOCSPX-...' }
            ].map(field => (
              <div class="border-l-2 border-muted pl-4">
                <div class="flex items-baseline gap-2 mb-1">
                  <strong class="text-sm">{field.name}</strong>
                  <span class="text-xs text-muted-foreground">Required</span>
                </div>
                <p class="text-sm text-muted-foreground">{field.desc}</p>
                <code class="text-xs bg-muted px-2 py-0.5 rounded mt-1 inline-block">{field.example}</code>
              </div>
            ))}
          </div>
        </div>

        <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 mb-6">
          <div class="flex gap-3">
            <div class="text-blue-600 dark:text-blue-500">
              <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <div>
              <p class="font-semibold text-blue-600 dark:text-blue-500 mb-1">Auto-Discovery</p>
              <p class="text-sm">Most OIDC providers support auto-discovery. Simply enter the Issuer URL and click "Discover" to automatically populate the endpoint URLs.</p>
            </div>
          </div>
        </div>

        <h3 class="text-xl font-semibold mb-4">Redirect URL Configuration</h3>
        
        <div class="bg-muted/30 rounded-lg p-4">
          <p class="text-sm mb-2">When configuring your SSO provider, use this redirect URL:</p>
          <code class="bg-muted rounded px-3 py-2 block">https://your-domain.com/api/auth/sso/callback/{`{provider-id}`}</code>
          <p class="text-xs text-muted-foreground mt-2">Replace <code>{`{provider-id}`}</code> with your chosen Provider ID (e.g., google-sso)</p>
        </div>
      </section>

      <div class="my-12 h-px bg-border/50"></div>

      <!-- Example SSO Configurations -->
      <section class="mb-12">
        <h2 class="text-2xl font-bold mb-6">Example SSO Configurations</h2>
        
        <!-- Google Example -->
        <div class="mb-8">
          <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
            <img src="https://www.google.com/favicon.ico" alt="Google" class="w-5 h-5" />
            Google SSO
          </h3>
          
          <div class="bg-card rounded-lg border border-border p-6">
            <ol class="space-y-4">
              <li>
                <strong>1. Create OAuth Client in Google Cloud Console</strong>
                <ul class="mt-2 space-y-1 text-sm text-muted-foreground pl-4">
                  <li>• Go to <a href="https://console.cloud.google.com/" class="text-primary hover:underline">Google Cloud Console</a></li>
                  <li>• Create a new OAuth 2.0 Client ID</li>
                  <li>• Add authorized redirect URI: <code class="bg-muted px-1 rounded">https://your-domain.com/api/auth/sso/callback/google-sso</code></li>
                </ul>
              </li>
              <li>
                <strong>2. Configure in Gitea Mirror</strong>
                <div class="mt-2 bg-muted/30 rounded-lg p-3 text-sm">
                  <div class="grid grid-cols-1 gap-2">
                    <div><strong>Issuer URL:</strong> <code>https://accounts.google.com</code></div>
                    <div><strong>Domain:</strong> <code>your-company.com</code></div>
                    <div><strong>Provider ID:</strong> <code>google-sso</code></div>
                    <div><strong>Client ID:</strong> <code>[Your Google Client ID]</code></div>
                    <div><strong>Client Secret:</strong> <code>[Your Google Client Secret]</code></div>
                  </div>
                </div>
              </li>
              <li>
                <strong>3. Use Auto-Discovery</strong>
                <p class="text-sm text-muted-foreground mt-1">Click "Discover" to automatically populate the endpoint URLs</p>
              </li>
            </ol>
          </div>
        </div>

        <!-- Okta Example -->
        <div class="mb-8">
          <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
            <span class="w-5 h-5 bg-blue-600 rounded flex items-center justify-center text-white text-xs font-bold">O</span>
            Okta SSO
          </h3>
          
          <div class="bg-card rounded-lg border border-border p-6">
            <ol class="space-y-4">
              <li>
                <strong>1. Create OIDC Application in Okta</strong>
                <ul class="mt-2 space-y-1 text-sm text-muted-foreground pl-4">
                  <li>• In Okta Admin Console, create a new OIDC Web Application</li>
                  <li>• Set Sign-in redirect URI: <code class="bg-muted px-1 rounded">https://your-domain.com/api/auth/sso/callback/okta-sso</code></li>
                  <li>• Note the Client ID and Client Secret</li>
                </ul>
              </li>
              <li>
                <strong>2. Configure in Gitea Mirror</strong>
                <div class="mt-2 bg-muted/30 rounded-lg p-3 text-sm">
                  <div class="grid grid-cols-1 gap-2">
                    <div><strong>Issuer URL:</strong> <code>https://your-okta-domain.okta.com</code></div>
                    <div><strong>Domain:</strong> <code>your-company.com</code></div>
                    <div><strong>Provider ID:</strong> <code>okta-sso</code></div>
                    <div><strong>Client ID:</strong> <code>[Your Okta Client ID]</code></div>
                    <div><strong>Client Secret:</strong> <code>[Your Okta Client Secret]</code></div>
                  </div>
                </div>
              </li>
            </ol>
          </div>
        </div>

        <!-- Azure AD Example -->
        <div>
          <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
            <span class="w-5 h-5 bg-blue-500 rounded flex items-center justify-center text-white text-xs">M</span>
            Azure AD / Microsoft Entra ID
          </h3>
          
          <div class="bg-card rounded-lg border border-border p-6">
            <ol class="space-y-4">
              <li>
                <strong>1. Register Application in Azure Portal</strong>
                <ul class="mt-2 space-y-1 text-sm text-muted-foreground pl-4">
                  <li>• Go to Azure Portal → Azure Active Directory → App registrations</li>
                  <li>• Create a new registration</li>
                  <li>• Add redirect URI: <code class="bg-muted px-1 rounded">https://your-domain.com/api/auth/sso/callback/azure-sso</code></li>
                </ul>
              </li>
              <li>
                <strong>2. Configure in Gitea Mirror</strong>
                <div class="mt-2 bg-muted/30 rounded-lg p-3 text-sm">
                  <div class="grid grid-cols-1 gap-2">
                    <div><strong>Issuer URL:</strong> <code>https://login.microsoftonline.com/{`{tenant-id}`}/v2.0</code></div>
                    <div><strong>Domain:</strong> <code>your-company.com</code></div>
                    <div><strong>Provider ID:</strong> <code>azure-sso</code></div>
                    <div><strong>Client ID:</strong> <code>[Your Application ID]</code></div>
                    <div><strong>Client Secret:</strong> <code>[Your Client Secret]</code></div>
                  </div>
                </div>
              </li>
            </ol>
          </div>
        </div>
      </section>

      <div class="my-12 h-px bg-border/50"></div>

      <!-- OIDC Provider Configuration -->
      <section class="mb-12">
        <h2 class="text-2xl font-bold mb-6">OIDC Provider Configuration</h2>
        
        <p class="text-muted-foreground mb-6">
          The OIDC Provider feature allows Gitea Mirror to act as an authentication provider for other applications. 
          This is useful when you want to centralize authentication through Gitea Mirror.
        </p>

        <h3 class="text-xl font-semibold mb-4">Creating OAuth Applications</h3>
        
        <div class="bg-card rounded-lg border border-border p-6 mb-6">
          <ol class="space-y-4">
            <li class="flex gap-3">
              <span class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">1</span>
              <div>
                <strong>Navigate to OAuth Applications</strong>
                <p class="text-sm text-muted-foreground mt-1">Go to Configuration → Authentication → OAuth Applications</p>
              </div>
            </li>
            <li class="flex gap-3">
              <span class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">2</span>
              <div>
                <strong>Create New Application</strong>
                <p class="text-sm text-muted-foreground mt-1">Click "Create Application" and provide:</p>
                <ul class="mt-2 space-y-1 text-sm text-muted-foreground pl-4">
                  <li>• Application Name</li>
                  <li>• Application Type (Web, Mobile, or Desktop)</li>
                  <li>• Redirect URLs (one per line)</li>
                </ul>
              </div>
            </li>
            <li class="flex gap-3">
              <span class="flex-shrink-0 w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center text-sm font-semibold">3</span>
              <div>
                <strong>Save Credentials</strong>
                <p class="text-sm text-muted-foreground mt-1">You'll receive a Client ID and Client Secret. Store these securely!</p>
              </div>
            </li>
          </ol>
        </div>

        <h3 class="text-xl font-semibold mb-4">OIDC Endpoints</h3>
        
        <div class="bg-muted/30 rounded-lg p-4 mb-6">
          <p class="text-sm mb-3">Applications can use these standard OIDC endpoints:</p>
          <div class="space-y-2 text-sm">
            <div class="flex gap-2">
              <strong class="w-32">Discovery:</strong>
              <code class="bg-muted px-2 py-0.5 rounded flex-1">https://your-domain.com/.well-known/openid-configuration</code>
            </div>
            <div class="flex gap-2">
              <strong class="w-32">Authorization:</strong>
              <code class="bg-muted px-2 py-0.5 rounded flex-1">https://your-domain.com/api/auth/oauth2/authorize</code>
            </div>
            <div class="flex gap-2">
              <strong class="w-32">Token:</strong>
              <code class="bg-muted px-2 py-0.5 rounded flex-1">https://your-domain.com/api/auth/oauth2/token</code>
            </div>
            <div class="flex gap-2">
              <strong class="w-32">UserInfo:</strong>
              <code class="bg-muted px-2 py-0.5 rounded flex-1">https://your-domain.com/api/auth/oauth2/userinfo</code>
            </div>
            <div class="flex gap-2">
              <strong class="w-32">JWKS:</strong>
              <code class="bg-muted px-2 py-0.5 rounded flex-1">https://your-domain.com/api/auth/jwks</code>
            </div>
          </div>
        </div>

        <h3 class="text-xl font-semibold mb-4">Supported Scopes</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[
            { scope: 'openid', desc: 'Required - provides user ID', claims: 'sub' },
            { scope: 'profile', desc: 'User profile information', claims: 'name, username, picture' },
            { scope: 'email', desc: 'Email address', claims: 'email, email_verified' }
          ].map(item => (
            <div class="bg-card rounded-lg border border-border p-4">
              <code class="text-sm font-semibold text-primary">{item.scope}</code>
              <p class="text-sm text-muted-foreground mt-2">{item.desc}</p>
              <p class="text-xs text-muted-foreground mt-2">Claims: {item.claims}</p>
            </div>
          ))}
        </div>
      </section>

      <div class="my-12 h-px bg-border/50"></div>

      <!-- User Experience -->
      <section class="mb-12">
        <h2 class="text-2xl font-bold mb-6">User Experience</h2>
        
        <h3 class="text-xl font-semibold mb-4">Login Flow with SSO</h3>
        
        <div class="bg-gradient-to-r from-primary/5 to-transparent rounded-lg p-6 border-l-4 border-primary mb-6">
          <p class="mb-4">When SSO is configured, users will see authentication options on the login page:</p>
          <ol class="space-y-2 text-sm">
            <li class="flex gap-2"><span class="font-semibold">1.</span> Email & Password tab for traditional login</li>
            <li class="flex gap-2"><span class="font-semibold">2.</span> SSO tab with provider buttons or email input</li>
            <li class="flex gap-2"><span class="font-semibold">3.</span> Automatic redirect to the appropriate provider</li>
            <li class="flex gap-2"><span class="font-semibold">4.</span> Return to Gitea Mirror after successful authentication</li>
          </ol>
        </div>

        <h3 class="text-xl font-semibold mb-4">OAuth Consent Flow</h3>
        
        <div class="bg-gradient-to-r from-primary/5 to-transparent rounded-lg p-6 border-l-4 border-primary">
          <p class="mb-4">When an application requests authentication through Gitea Mirror:</p>
          <ol class="space-y-2 text-sm">
            <li class="flex gap-2"><span class="font-semibold">1.</span> User is redirected to Gitea Mirror</li>
            <li class="flex gap-2"><span class="font-semibold">2.</span> Login prompt if not already authenticated</li>
            <li class="flex gap-2"><span class="font-semibold">3.</span> Consent screen showing requested permissions</li>
            <li class="flex gap-2"><span class="font-semibold">4.</span> User approves or denies the request</li>
            <li class="flex gap-2"><span class="font-semibold">5.</span> Redirect back to the application with auth code</li>
          </ol>
        </div>
      </section>

      <div class="my-12 h-px bg-border/50"></div>

      <!-- Security Considerations -->
      <section class="mb-12">
        <h2 class="text-2xl font-bold mb-6">Security Considerations</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            {
              icon: '🔒',
              title: 'Client Secrets',
              items: [
                'Store OAuth client secrets securely',
                'Never commit secrets to version control',
                'Rotate secrets regularly'
              ]
            },
            {
              icon: '🔗',
              title: 'Redirect URLs',
              items: [
                'Only add trusted redirect URLs',
                'Use HTTPS in production',
                'Validate exact URL matches'
              ]
            },
            {
              icon: '🛡️',
              title: 'Scopes & Permissions',
              items: [
                'Grant minimum required scopes',
                'Review requested permissions',
                'Users can revoke access anytime'
              ]
            },
            {
              icon: '⏱️',
              title: 'Token Security',
              items: [
                'Access tokens have expiration',
                'Refresh tokens for long-lived access',
                'Tokens can be revoked'
              ]
            }
          ].map(section => (
            <div class="bg-card rounded-lg border border-border p-4">
              <div class="flex items-center gap-3 mb-3">
                <span class="text-2xl">{section.icon}</span>
                <h4 class="font-semibold">{section.title}</h4>
              </div>
              <ul class="space-y-1 text-sm text-muted-foreground">
                {section.items.map(item => (
                  <li class="flex gap-2">
                    <span>•</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      <div class="my-12 h-px bg-border/50"></div>

      <!-- Troubleshooting -->
      <section class="mb-12">
        <h2 class="text-2xl font-bold mb-6">Troubleshooting</h2>
        
        <div class="space-y-4">
          <div class="bg-amber-500/10 border border-amber-500/20 rounded-lg p-4">
            <h4 class="font-semibold text-amber-600 dark:text-amber-500 mb-2">SSO Login Issues</h4>
            <ul class="space-y-2 text-sm">
              <li class="flex gap-2">
                <span class="text-amber-600 dark:text-amber-500">•</span>
                <div>
                  <strong>"Invalid origin" error:</strong> Check that your Gitea Mirror URL matches the configured redirect URI
                </div>
              </li>
              <li class="flex gap-2">
                <span class="text-amber-600 dark:text-amber-500">•</span>
                <div>
                  <strong>"Provider not found" error:</strong> Ensure the provider is properly configured and saved
                </div>
              </li>
              <li class="flex gap-2">
                <span class="text-amber-600 dark:text-amber-500">•</span>
                <div>
                  <strong>Redirect loop:</strong> Verify the redirect URI in both Gitea Mirror and the SSO provider match exactly
                </div>
              </li>
            </ul>
          </div>

          <div class="bg-amber-500/10 border border-amber-500/20 rounded-lg p-4">
            <h4 class="font-semibold text-amber-600 dark:text-amber-500 mb-2">OIDC Provider Issues</h4>
            <ul class="space-y-2 text-sm">
              <li class="flex gap-2">
                <span class="text-amber-600 dark:text-amber-500">•</span>
                <div>
                  <strong>Application not found:</strong> Ensure the client ID is correct and the app is not disabled
                </div>
              </li>
              <li class="flex gap-2">
                <span class="text-amber-600 dark:text-amber-500">•</span>
                <div>
                  <strong>Invalid redirect URI:</strong> The redirect URI must match exactly what's configured
                </div>
              </li>
              <li class="flex gap-2">
                <span class="text-amber-600 dark:text-amber-500">•</span>
                <div>
                  <strong>Consent not working:</strong> Check browser cookies are enabled and not blocked
                </div>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <div class="my-12 h-px bg-border/50"></div>

      <!-- Migration from JWT -->
      <section>
        <h2 class="text-2xl font-bold mb-6">Migration from JWT Authentication</h2>
        
        <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
          <div class="flex gap-3">
            <div class="text-blue-600 dark:text-blue-500">
              <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <div>
              <p class="font-semibold text-blue-600 dark:text-blue-500 mb-2">For Existing Users</p>
              <ul class="space-y-1 text-sm">
                <li>• Email/password authentication continues to work</li>
                <li>• No action required from existing users</li>
                <li>• SSO can be added as an additional option</li>
                <li>• JWT_SECRET is no longer required in environment variables</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </article>
  </main>
</MainLayout>