Added sso

frontend/src/components/LoginPage.js

@@ -1,5 +1,12 @@
-import { useState } from 'react';
-import { login, setToken } from '../api/dns';
+import { useState, useEffect } from 'react';
+import { login, setToken, getOidcConfig, oidcCallback } from '../api/dns';
+
+const OIDC_STATE_KEY = 'sloth_oidc_state';
+
+function getRedirectUri() {
+  // Strip any existing query/hash — the redirect_uri must be the clean app URL
+  return `${window.location.origin}${window.location.pathname}`;
+}
 
 export default function LoginPage({ onLogin }) {
   const [username, setUsername] = useState('');
@@ -7,6 +14,69 @@ export default function LoginPage({ onLogin }) {
   const [loading, setLoading]   = useState(false);
   const [error, setError]       = useState('');
 
+  // OIDC state
+  const [oidc, setOidc]               = useState(null);   // null = loading, false = disabled
+  const [oidcLoading, setOidcLoading] = useState(false);
+
+  // 1. Fetch OIDC config on mount
+  useEffect(() => {
+    getOidcConfig()
+      .then(cfg => setOidc(cfg.enabled ? cfg : false))
+      .catch(() => setOidc(false));
+  }, []);
+
+  // 2. Handle redirect back from Authentik (?code=...&state=...)
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const code   = params.get('code');
+    const state  = params.get('state');
+    if (!code) return;
+
+    // Verify state to prevent CSRF
+    const savedState = sessionStorage.getItem(OIDC_STATE_KEY);
+    sessionStorage.removeItem(OIDC_STATE_KEY);
+    if (state && savedState && state !== savedState) {
+      setError('SSO state mismatch — please try again');
+      // Remove code from URL
+      window.history.replaceState({}, '', window.location.pathname);
+      return;
+    }
+
+    // Exchange code for JWT
+    setOidcLoading(true);
+    setError('');
+    const redirectUri = getRedirectUri();
+    // Clean URL before async work so a page refresh won't re-attempt
+    window.history.replaceState({}, '', window.location.pathname);
+
+    oidcCallback(code, redirectUri)
+      .then(data => {
+        setToken(data.token);
+        onLogin(data.user);
+      })
+      .catch(err => {
+        setError(err.message);
+        setOidcLoading(false);
+      });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 3. Initiate Authentik redirect
+  function handleSsoClick() {
+    if (!oidc) return;
+    const state = crypto.randomUUID();
+    sessionStorage.setItem(OIDC_STATE_KEY, state);
+
+    const params = new URLSearchParams({
+      response_type: 'code',
+      client_id:     oidc.clientId,
+      redirect_uri:  getRedirectUri(),
+      scope:         oidc.scope,
+      state,
+    });
+    window.location.href = `${oidc.authorizationEndpoint}?${params}`;
+  }
+
+  // 4. Local login
   async function handleSubmit(e) {
     e.preventDefault();
     setError('');
@@ -22,11 +92,39 @@ export default function LoginPage({ onLogin }) {
     }
   }
 
+  // While exchanging an OIDC code, show a minimal loading screen
+  if (oidcLoading) {
+    return (
+      <div className="login-wrapper">
+        <div className="login-box">
+          <div className="login-logo">🦥</div>
+          <h1 className="login-title">Sloth Manager</h1>
+          <p style={{ textAlign: 'center', marginTop: '1rem' }}>Signing in with Authentik…</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="login-wrapper">
       <div className="login-box">
         <div className="login-logo">🦥</div>
         <h1 className="login-title">Sloth Manager</h1>
+
+        {/* SSO button — shown only when Authentik is configured */}
+        {oidc && (
+          <>
+            <button
+              type="button"
+              className="btn-sso"
+              onClick={handleSsoClick}
+            >
+              Sign in with Authentik
+            </button>
+            <div className="login-divider"><span>or</span></div>
+          </>
+        )}
+
         <form onSubmit={handleSubmit} className="login-form">
           <label>
             Username
@@ -34,7 +132,7 @@ export default function LoginPage({ onLogin }) {
               type="text"
               value={username}
               onChange={e => setUsername(e.target.value)}
-              autoFocus
+              autoFocus={!oidc}
               autoComplete="username"
               required
             />