feat(auth): Authentik OIDC sign-in + Gravatar avatars

Adds optional SSO via Authentik (or any OIDC provider) alongside the
existing password flow, and pulls profile images from the provider's
`picture` claim or Gravatar so the sharing UI stops looking anonymous.
Password login stays available as a recovery path; JIT provisioning and
admin-group mapping are env-configurable.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/auth/LoginPage.tsx

@@ -1,16 +1,46 @@
-import { useState, type FormEvent } from 'react'
+import { useEffect, useState, type FormEvent } from 'react'
 import { useAuth } from '../../contexts/AuthContext'
+import api from '../../services/api'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 
+interface OidcConfig {
+  enabled: boolean
+  label: string
+  login_url: string
+}
+
+interface AuthConfig {
+  oidc: OidcConfig | null
+}
+
 export function LoginPage() {
   const { login } = useAuth()
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
+  const [oidc, setOidc] = useState<OidcConfig | null>(null)
+
+  // Ask the backend which login methods to show. Failure is silent —
+  // worst case the SSO button just doesn't appear and the user falls
+  // back to username/password.
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const res = await api.get<AuthConfig>('/auth/config')
+        if (!cancelled) setOidc(res.data.oidc)
+      } catch {
+        /* ignore — SSO button stays hidden */
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault()
@@ -29,10 +59,7 @@ export function LoginPage() {
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-bg px-4">
-      <form
-        onSubmit={handleSubmit}
-        className="w-full max-w-sm space-y-5 rounded-lg border border-border bg-surface p-8 shadow-xl"
-      >
+      <div className="w-full max-w-sm space-y-5 rounded-lg border border-border bg-surface p-8 shadow-xl">
         <h1 className="text-center text-xl font-semibold text-text">
           Sign in to Mulita
         </h1>
@@ -43,33 +70,51 @@ export function LoginPage() {
           </Alert>
         )}
 
-        <div className="space-y-1.5">
-          <Label htmlFor="login-user">Username</Label>
-          <Input
-            id="login-user"
-            type="text"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            required
-            autoFocus
-          />
-        </div>
+        {oidc?.enabled && (
+          <>
+            {/* Full-page navigation (not a fetch) — Authlib sets a
+             *  signed session cookie in the /oidc/login response, so
+             *  the browser needs to follow the redirect chain itself. */}
+            <Button asChild variant="outline" className="w-full">
+              <a href={oidc.login_url}>Sign in with {oidc.label}</a>
+            </Button>
+            <div className="flex items-center gap-3 text-[11px] uppercase tracking-wide text-text-muted">
+              <span className="h-px flex-1 bg-border" />
+              or continue with password
+              <span className="h-px flex-1 bg-border" />
+            </div>
+          </>
+        )}
 
-        <div className="space-y-1.5">
-          <Label htmlFor="login-pass">Password</Label>
-          <Input
-            id="login-pass"
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
-        </div>
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div className="space-y-1.5">
+            <Label htmlFor="login-user">Username</Label>
+            <Input
+              id="login-user"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              autoFocus
+            />
+          </div>
 
-        <Button type="submit" disabled={loading} className="w-full">
-          {loading ? 'Signing in\u2026' : 'Sign In'}
-        </Button>
-      </form>
+          <div className="space-y-1.5">
+            <Label htmlFor="login-pass">Password</Label>
+            <Input
+              id="login-pass"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+
+          <Button type="submit" disabled={loading} className="w-full">
+            {loading ? 'Signing in…' : 'Sign In'}
+          </Button>
+        </form>
+      </div>
     </div>
   )
 }