feat: add OAuth2/OIDC with PKCE for SSO login

Add opt-in SSO authentication alongside Basic Auth. OAuth endpoints are auto-discovered via .well-known, with support for external IdPs (Keycloak, Authentik) via configurable OAUTH_ISSUER_URL. Sessions persist through httpOnly refresh token cookies with automatic renewal.
2026-02-25 23:41:37 +01:00
parent 110dd98ad4
commit ec06b0c494
20 changed files with 857 additions and 92 deletions
@@ -0,0 +1,114 @@
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useAuthStore } from "@/stores/auth-store";
+import { Loader2, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useParams } from "next/navigation";
+
+function OAuthCallbackInner() {
+  const router = useRouter();
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const t = useTranslations("login");
+  const { loginWithOAuth } = useAuthStore();
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const code = searchParams.get("code");
+    const state = searchParams.get("state");
+    const errorParam = searchParams.get("error");
+
+    if (errorParam) {
+      setError(errorParam === "access_denied" ? "access_denied" : "token_exchange_failed");
+      return;
+    }
+
+    if (!code) {
+      setError("missing_params");
+      return;
+    }
+
+    const savedState = sessionStorage.getItem("oauth_state");
+    if (!state || state !== savedState) {
+      setError("invalid_state");
+      return;
+    }
+
+    const codeVerifier = sessionStorage.getItem("oauth_code_verifier");
+    const serverUrl = sessionStorage.getItem("oauth_server_url");
+
+    if (!codeVerifier || !serverUrl) {
+      setError("missing_params");
+      return;
+    }
+
+    const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
+
+    loginWithOAuth(serverUrl, code, codeVerifier, redirectUri)
+      .then((success) => {
+        if (success) {
+          sessionStorage.removeItem("oauth_state");
+          sessionStorage.removeItem("oauth_code_verifier");
+          sessionStorage.removeItem("oauth_server_url");
+          router.push(`/${params.locale}`);
+        } else {
+          setError("token_exchange_failed");
+        }
+      })
+      .catch(() => {
+        setError("token_exchange_failed");
+      });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="w-full max-w-sm mx-auto px-4 text-center">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-red-500/10 mb-6">
+            <AlertCircle className="w-10 h-10 text-red-500" />
+          </div>
+          <h1 className="text-xl font-medium text-foreground mb-2">
+            {t("oauth_error.title")}
+          </h1>
+          <p className="text-muted-foreground text-sm mb-6">
+            {t(`oauth_error.${error}`)}
+          </p>
+          <Button
+            variant="outline"
+            onClick={() => router.push(`/${params.locale}/login`)}
+          >
+            {t("oauth_error.back_to_login")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+      <div className="w-full max-w-sm mx-auto px-4 text-center" role="status">
+        <Loader2 className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
+        <p className="text-muted-foreground text-sm">{t("oauth_completing")}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function OAuthCallbackPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+          <div className="w-full max-w-sm mx-auto px-4 text-center" role="status">
+            <Loader2 className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
+          </div>
+        </div>
+      }
+    >
+      <OAuthCallbackInner />
+    </Suspense>
+  );
+}
@@ -2,19 +2,24 @@

 import { useState, useEffect, useRef } from "react";
 import { useRouter } from "@/i18n/navigation";
+import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAuthStore } from "@/stores/auth-store";
 import { useConfig } from "@/hooks/use-config";
 import { cn } from "@/lib/utils";
-import { Mail, AlertCircle, Loader2, X, ShieldCheck, Info, Eye, EyeOff } from "lucide-react";
+import { Mail, AlertCircle, Loader2, X, ShieldCheck, Info, Eye, EyeOff, LogIn } from "lucide-react";
+import { discoverOAuth, type OAuthMetadata } from "@/lib/oauth/discovery";
+import { generateCodeVerifier, generateCodeChallenge, generateState } from "@/lib/oauth/pkce";
+import { OAUTH_SCOPES } from "@/lib/oauth/tokens";

 export default function LoginPage() {
  const router = useRouter();
  const t = useTranslations("login");
+  const params = useParams();
  const { login, isLoading, error, clearError, isAuthenticated } = useAuthStore();
-  const { appName, jmapServerUrl: serverUrl, isLoading: configLoading, error: configError } = useConfig();
+  const { appName, jmapServerUrl: serverUrl, oauthEnabled, oauthClientId, oauthIssuerUrl, isLoading: configLoading, error: configError } = useConfig();

  const [formData, setFormData] = useState({
    username: "",
@@ -30,6 +35,10 @@ export default function LoginPage() {
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [filteredSuggestions, setFilteredSuggestions] = useState<string[]>([]);
  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+  const [oauthMetadata, setOauthMetadata] = useState<OAuthMetadata | null>(null);
+  const [oauthDiscoveryDone, setOauthDiscoveryDone] = useState(false);
+  const [oauthLoading, setOauthLoading] = useState(false);
+
  const suggestionsRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const justSelectedSuggestion = useRef(false);
@@ -124,6 +133,19 @@ export default function LoginPage() {
    }
  }, [showTotpField]);

+  useEffect(() => {
+    if (!oauthEnabled || !serverUrl) return;
+    discoverOAuth(oauthIssuerUrl || serverUrl)
+      .then((metadata) => {
+        setOauthMetadata(metadata);
+        setOauthDiscoveryDone(true);
+      })
+      .catch(() => {
+        setOauthMetadata(null);
+        setOauthDiscoveryDone(true);
+      });
+  }, [oauthEnabled, serverUrl, oauthIssuerUrl]);
+
  if (configLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
@@ -236,6 +258,31 @@ export default function LoginPage() {
    }
  };

+  const handleOAuthLogin = async () => {
+    if (!oauthMetadata || !oauthClientId) return;
+    setOauthLoading(true);
+
+    const verifier = generateCodeVerifier();
+    const challenge = await generateCodeChallenge(verifier);
+    const state = generateState();
+    const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
+
+    sessionStorage.setItem("oauth_code_verifier", verifier);
+    sessionStorage.setItem("oauth_state", state);
+    sessionStorage.setItem("oauth_server_url", serverUrl!);
+
+    const authUrl = new URL(oauthMetadata.authorization_endpoint);
+    authUrl.searchParams.set("response_type", "code");
+    authUrl.searchParams.set("client_id", oauthClientId);
+    authUrl.searchParams.set("redirect_uri", redirectUri);
+    authUrl.searchParams.set("scope", OAUTH_SCOPES);
+    authUrl.searchParams.set("state", state);
+    authUrl.searchParams.set("code_challenge", challenge);
+    authUrl.searchParams.set("code_challenge_method", "S256");
+
+    window.location.href = authUrl.toString();
+  };
+
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

@@ -453,6 +500,43 @@ export default function LoginPage() {
              t("sign_in")
            )}
          </Button>
+
+          {oauthMetadata && (
+            <>
+              <div className="relative my-6">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t border-border" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-background px-2 text-muted-foreground">{t("or")}</span>
+                </div>
+              </div>
+
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full h-12 font-medium text-base"
+                onClick={handleOAuthLogin}
+                disabled={oauthLoading || isLoading}
+              >
+                {oauthLoading ? (
+                  <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                ) : (
+                  <LogIn className="w-4 h-4 mr-2" />
+                )}
+                {t("sign_in_sso")}
+              </Button>
+            </>
+          )}
+
+          {oauthEnabled && oauthDiscoveryDone && !oauthMetadata && (
+            <div className="mt-4 p-3 bg-amber-500/10 border border-amber-500/20 rounded-lg flex items-start gap-2">
+              <AlertCircle className="w-4 h-4 text-amber-700 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-amber-700 dark:text-amber-400">
+                {t("error.oauth_discovery_failed")}
+              </p>
+            </div>
+          )}
        </form>
      </div>
    </div>
@@ -0,0 +1,193 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { discoverOAuth } from '@/lib/oauth/discovery';
+import { REFRESH_TOKEN_COOKIE } from '@/lib/oauth/tokens';
+
+const CLIENT_SECRET = process.env.OAUTH_CLIENT_SECRET || '';
+
+const COOKIE_OPTIONS = {
+  httpOnly: true,
+  secure: process.env.NODE_ENV === 'production',
+  sameSite: 'lax' as const,
+  path: '/',
+  maxAge: 30 * 24 * 60 * 60,
+};
+
+function getRequiredConfig() {
+  const clientId = process.env.OAUTH_CLIENT_ID;
+  const serverUrl = process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL;
+  const issuerUrl = process.env.OAUTH_ISSUER_URL;
+  if (!clientId || !serverUrl) {
+    throw new Error(`OAuth misconfigured: ${[!clientId && 'OAUTH_CLIENT_ID', !serverUrl && 'JMAP_SERVER_URL'].filter(Boolean).join(', ')} not set`);
+  }
+  const discoveryUrl = issuerUrl?.trim() || serverUrl;
+  if (issuerUrl !== undefined && !issuerUrl.trim()) {
+    logger.warn('OAUTH_ISSUER_URL is set but empty, falling back to JMAP_SERVER_URL for discovery');
+  }
+  return { clientId, serverUrl, discoveryUrl };
+}
+
+async function getTokenEndpoint(): Promise<string> {
+  const { discoveryUrl } = getRequiredConfig();
+  const metadata = await discoverOAuth(discoveryUrl);
+  if (!metadata?.token_endpoint) {
+    throw new Error('OAuth token endpoint not found');
+  }
+  return metadata.token_endpoint;
+}
+
+async function getRevocationEndpoint(): Promise<string | null> {
+  const { discoveryUrl } = getRequiredConfig();
+  const metadata = await discoverOAuth(discoveryUrl);
+  return metadata?.revocation_endpoint || null;
+}
+
+function buildOAuthParams(base: Record<string, string>): URLSearchParams {
+  const { clientId } = getRequiredConfig();
+  const params = new URLSearchParams({ ...base, client_id: clientId });
+  if (CLIENT_SECRET) {
+    params.set('client_secret', CLIENT_SECRET);
+  }
+  return params;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { code, code_verifier, redirect_uri } = await request.json();
+
+    if (!code || !code_verifier || !redirect_uri) {
+      return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
+    }
+
+    const tokenEndpoint = await getTokenEndpoint();
+
+    const params = buildOAuthParams({
+      grant_type: 'authorization_code',
+      code,
+      redirect_uri,
+      code_verifier,
+    });
+
+    const tokenResponse = await fetch(tokenEndpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: params.toString(),
+    });
+
+    if (!tokenResponse.ok) {
+      const errorText = await tokenResponse.text();
+      logger.error('Token exchange failed', { status: tokenResponse.status, error: errorText });
+      return NextResponse.json({ error: 'Token exchange failed' }, { status: 401 });
+    }
+
+    const tokens = await tokenResponse.json();
+
+    if (!tokens.access_token) {
+      logger.error('Token response missing access_token', { response: JSON.stringify(tokens).substring(0, 500) });
+      return NextResponse.json({ error: 'Invalid token response' }, { status: 502 });
+    }
+
+    const response = NextResponse.json({
+      access_token: tokens.access_token,
+      expires_in: tokens.expires_in || 3600,
+    });
+
+    if (tokens.refresh_token) {
+      const cookieStore = await cookies();
+      cookieStore.set(REFRESH_TOKEN_COOKIE, tokens.refresh_token, COOKIE_OPTIONS);
+    }
+
+    return response;
+  } catch (error) {
+    logger.error('Token exchange error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+export async function PUT() {
+  try {
+    const cookieStore = await cookies();
+    const refreshToken = cookieStore.get(REFRESH_TOKEN_COOKIE)?.value;
+
+    if (!refreshToken) {
+      return NextResponse.json({ error: 'No refresh token' }, { status: 401 });
+    }
+
+    const tokenEndpoint = await getTokenEndpoint();
+
+    const params = buildOAuthParams({
+      grant_type: 'refresh_token',
+      refresh_token: refreshToken,
+    });
+
+    const tokenResponse = await fetch(tokenEndpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: params.toString(),
+    });
+
+    if (!tokenResponse.ok) {
+      const errorText = await tokenResponse.text();
+      logger.error('Token refresh failed', { status: tokenResponse.status, error: errorText });
+      cookieStore.delete(REFRESH_TOKEN_COOKIE);
+      return NextResponse.json({ error: 'Refresh failed' }, { status: 401 });
+    }
+
+    const tokens = await tokenResponse.json();
+
+    if (!tokens.access_token) {
+      logger.error('Refresh response missing access_token', { response: JSON.stringify(tokens).substring(0, 500) });
+      return NextResponse.json({ error: 'Invalid token response' }, { status: 502 });
+    }
+
+    if (tokens.refresh_token) {
+      cookieStore.set(REFRESH_TOKEN_COOKIE, tokens.refresh_token, COOKIE_OPTIONS);
+    }
+
+    return NextResponse.json({
+      access_token: tokens.access_token,
+      expires_in: tokens.expires_in || 3600,
+    });
+  } catch (error) {
+    logger.error('Token refresh error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+export async function DELETE() {
+  try {
+    const cookieStore = await cookies();
+    const refreshToken = cookieStore.get(REFRESH_TOKEN_COOKIE)?.value;
+
+    if (refreshToken) {
+      const revocationEndpoint = await getRevocationEndpoint();
+      if (revocationEndpoint) {
+        const params = buildOAuthParams({
+          token: refreshToken,
+          token_type_hint: 'refresh_token',
+        });
+
+        try {
+          const revocationResponse = await fetch(revocationEndpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: params.toString(),
+          });
+          if (!revocationResponse.ok) {
+            logger.warn('Token revocation returned error', { status: revocationResponse.status });
+          }
+        } catch (err) {
+          logger.error('Token revocation network error', { error: err instanceof Error ? err.message : 'Unknown error' });
+        }
+      }
+
+      cookieStore.delete(REFRESH_TOKEN_COOKIE);
+    }
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Token revocation error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
@@ -18,5 +18,8 @@ export async function GET() {
  return NextResponse.json({
    appName: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || 'Webmail',
    jmapServerUrl: process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || '',
+    oauthEnabled: process.env.OAUTH_ENABLED === 'true',
+    oauthClientId: process.env.OAUTH_CLIENT_ID || '',
+    oauthIssuerUrl: process.env.OAUTH_ISSUER_URL || '',
  });
 }