Add optional OIDC authentication via Better Auth genericOAuth plugin

Support self-hosted OIDC providers (Authentik, Authelia, Keycloak, etc.) configured entirely via environment variables. Uses Better Auth's hooks.before to gate email/password sign-up at the endpoint level, and disables emailAndPassword entirely when DISABLE_PASSWORD_LOGIN is set. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-08-29 02:45:39 -04:00 · 2026-03-03 13:39:15 -05:00
parent e19ac78b39
commit fb785645f8
9 changed files with 320 additions and 135 deletions
@@ -1,11 +1,18 @@
 "use client";

+import { IconKey } from "@tabler/icons-react";
 import { AnimatePresence, motion } from "motion/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { SofaLogo } from "@/components/sofa-logo";
-import { signIn, signUp } from "@/lib/auth/client";
+import { authClient, signIn, signUp } from "@/lib/auth/client";
+
+export interface AuthConfig {
+  oidcEnabled: boolean;
+  oidcProviderName: string | null;
+  passwordLoginDisabled: boolean;
+}

 const fieldVariants = {
  hidden: { opacity: 0, y: 10 },
@@ -16,15 +23,24 @@ const fieldVariants = {
  },
 };

-export function AuthForm({ mode }: { mode: "login" | "register" }) {
+export function AuthForm({
+  mode,
+  authConfig,
+}: {
+  mode: "login" | "register";
+  authConfig?: AuthConfig;
+}) {
  const router = useRouter();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
+  const [oidcLoading, setOidcLoading] = useState(false);

  const isRegister = mode === "register";
+  const showOidc = authConfig?.oidcEnabled ?? false;
+  const showPasswordForm = !(authConfig?.passwordLoginDisabled ?? false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
@@ -54,6 +70,20 @@ export function AuthForm({ mode }: { mode: "login" | "register" }) {
    }
  }

+  async function handleOidcLogin() {
+    setError("");
+    setOidcLoading(true);
+    try {
+      await authClient.signIn.oauth2({
+        providerId: "oidc",
+        callbackURL: "/dashboard",
+      });
+    } catch {
+      setError("Failed to start SSO login");
+      setOidcLoading(false);
+    }
+  }
+
  return (
    <div className="relative mx-auto w-full max-w-sm">
      {/* Subtle glow behind card */}
@@ -77,120 +107,161 @@ export function AuthForm({ mode }: { mode: "login" | "register" }) {
          </p>
        </div>

-        <motion.form
-          onSubmit={handleSubmit}
-          className="space-y-4"
-          initial="hidden"
-          animate="visible"
-          variants={{
-            hidden: {},
-            visible: { transition: { staggerChildren: 0.08 } },
-          }}
-        >
-          {isRegister && (
-            <motion.div variants={fieldVariants} className="space-y-1.5">
-              <label
-                htmlFor="name"
-                className="text-xs font-medium uppercase tracking-wider text-muted-foreground"
-              >
-                Name
-              </label>
-              <input
-                id="name"
-                type="text"
-                required
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                className="flex h-11 w-full rounded-lg border border-border/50 bg-background/50 px-4 text-sm transition-colors placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/20"
-                placeholder="Your name"
-              />
-            </motion.div>
-          )}
-
-          <motion.div variants={fieldVariants} className="space-y-1.5">
-            <label
-              htmlFor="email"
-              className="text-xs font-medium uppercase tracking-wider text-muted-foreground"
+        {showOidc && (
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            variants={{
+              hidden: {},
+              visible: { transition: { staggerChildren: 0.08 } },
+            }}
+          >
+            <motion.button
+              type="button"
+              onClick={handleOidcLogin}
+              disabled={oidcLoading}
+              variants={fieldVariants}
+              whileTap={{ scale: 0.98 }}
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-border/50 bg-background/50 text-sm font-medium transition-all hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
            >
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="flex h-11 w-full rounded-lg border border-border/50 bg-background/50 px-4 text-sm transition-colors placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/20"
-              placeholder="wwhite@graymatter.biz"
-            />
+              <IconKey size={16} />
+              {oidcLoading
+                ? "Redirecting..."
+                : `Sign in with ${authConfig?.oidcProviderName || "SSO"}`}
+            </motion.button>
          </motion.div>
+        )}

-          <motion.div variants={fieldVariants} className="space-y-1.5">
-            <label
-              htmlFor="password"
-              className="text-xs font-medium uppercase tracking-wider text-muted-foreground"
-            >
-              Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              required
-              minLength={8}
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="flex h-11 w-full rounded-lg border border-border/50 bg-background/50 px-4 text-sm transition-colors placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/20"
-              placeholder="Min 8 characters"
-            />
-          </motion.div>
+        {showOidc && showPasswordForm && (
+          <div className="flex items-center gap-3">
+            <div className="h-px flex-1 bg-border/50" />
+            <span className="text-xs text-muted-foreground">or</span>
+            <div className="h-px flex-1 bg-border/50" />
+          </div>
+        )}

-          <AnimatePresence>
-            {error && (
-              <motion.div
-                initial={{ opacity: 0, height: 0 }}
-                animate={{ opacity: 1, height: "auto" }}
-                exit={{ opacity: 0, height: 0 }}
-                className="overflow-hidden rounded-lg bg-destructive/10 px-3 py-2 text-sm text-destructive"
-              >
-                {error}
+        {showPasswordForm && (
+          <motion.form
+            onSubmit={handleSubmit}
+            className="space-y-4"
+            initial="hidden"
+            animate="visible"
+            variants={{
+              hidden: {},
+              visible: { transition: { staggerChildren: 0.08 } },
+            }}
+          >
+            {isRegister && (
+              <motion.div variants={fieldVariants} className="space-y-1.5">
+                <label
+                  htmlFor="name"
+                  className="text-xs font-medium uppercase tracking-wider text-muted-foreground"
+                >
+                  Name
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  required
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="flex h-11 w-full rounded-lg border border-border/50 bg-background/50 px-4 text-sm transition-colors placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/20"
+                  placeholder="Your name"
+                />
              </motion.div>
            )}
-          </AnimatePresence>

-          <motion.button
-            type="submit"
-            disabled={loading}
-            variants={fieldVariants}
-            whileTap={{ scale: 0.98 }}
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-primary font-medium text-primary-foreground transition-all hover:shadow-lg hover:shadow-primary/20 disabled:pointer-events-none disabled:opacity-50"
-          >
-            {loading ? "Loading..." : isRegister ? "Create account" : "Sign in"}
-          </motion.button>
-        </motion.form>
+            <motion.div variants={fieldVariants} className="space-y-1.5">
+              <label
+                htmlFor="email"
+                className="text-xs font-medium uppercase tracking-wider text-muted-foreground"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="flex h-11 w-full rounded-lg border border-border/50 bg-background/50 px-4 text-sm transition-colors placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/20"
+                placeholder="wwhite@graymatter.biz"
+              />
+            </motion.div>

-        <p className="text-center text-sm text-muted-foreground">
-          {isRegister ? (
-            <>
-              Already have an account?{" "}
-              <Link
-                href="/login"
-                className="font-medium text-primary transition-colors hover:text-primary/80"
+            <motion.div variants={fieldVariants} className="space-y-1.5">
+              <label
+                htmlFor="password"
+                className="text-xs font-medium uppercase tracking-wider text-muted-foreground"
              >
-                Sign in
-              </Link>
-            </>
-          ) : (
-            <>
-              Don&apos;t have an account?{" "}
-              <Link
-                href="/register"
-                className="font-medium text-primary transition-colors hover:text-primary/80"
-              >
-                Register
-              </Link>
-            </>
+                Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                required
+                minLength={8}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="flex h-11 w-full rounded-lg border border-border/50 bg-background/50 px-4 text-sm transition-colors placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/20"
+                placeholder="Min 8 characters"
+              />
+            </motion.div>
+
+            <motion.button
+              type="submit"
+              disabled={loading}
+              variants={fieldVariants}
+              whileTap={{ scale: 0.98 }}
+              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-primary font-medium text-primary-foreground transition-all hover:shadow-lg hover:shadow-primary/20 disabled:pointer-events-none disabled:opacity-50"
+            >
+              {loading
+                ? "Loading..."
+                : isRegister
+                  ? "Create account"
+                  : "Sign in"}
+            </motion.button>
+          </motion.form>
+        )}
+
+        <AnimatePresence>
+          {error && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              className="overflow-hidden rounded-lg bg-destructive/10 px-3 py-2 text-sm text-destructive"
+            >
+              {error}
+            </motion.div>
          )}
-        </p>
+        </AnimatePresence>
+
+        {showPasswordForm && (
+          <p className="text-center text-sm text-muted-foreground">
+            {isRegister ? (
+              <>
+                Already have an account?{" "}
+                <Link
+                  href="/login"
+                  className="font-medium text-primary transition-colors hover:text-primary/80"
+                >
+                  Sign in
+                </Link>
+              </>
+            ) : (
+              <>
+                Don&apos;t have an account?{" "}
+                <Link
+                  href="/register"
+                  className="font-medium text-primary transition-colors hover:text-primary/80"
+                >
+                  Register
+                </Link>
+              </>
+            )}
+          </p>
+        )}
      </motion.div>
    </div>
  );