fix: better-auth configuration (#29)

* fix: auth configuration

* fix: stateless sign out

* fix: replace all port

* chore: removed unneeded configuration

Author: peppescg

src/app/dashboard/page.tsx

@@ -1,14 +1,32 @@
-import { headers } from "next/headers";
-import { redirect } from "next/navigation";
-import { auth } from "@/lib/auth";
+"use client";
 
-export default async function DashboardPage() {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { signOut, useSession } from "@/lib/auth-client";
 
-  if (!session) {
-    redirect("/login");
+export default function DashboardPage() {
+  const router = useRouter();
+  const { data: session, isPending } = useSession();
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  useEffect(() => {
+    if (!isPending && !session) {
+      router.push("/sign-in");
+    }
+  }, [session, isPending, router]);
+
+  const handleSignOut = async () => {
+    setIsSigningOut(true);
+    try {
+      await signOut();
+    } catch (error) {
+      console.error("Sign-out error:", error);
+      setIsSigningOut(false);
+    }
+  };
+
+  if (isPending || !session) {
+    return null;
   }
 
   return (
@@ -36,14 +54,14 @@ export default async function DashboardPage() {
           </div>
         </div>
 
-        <form action="/api/auth/sign-out" method="POST">
-          <button
-            type="submit"
-            className="rounded-full bg-red-600 px-6 py-3 text-white transition-colors hover:bg-red-700"
-          >
-            Sign Out
-          </button>
-        </form>
+        <button
+          type="button"
+          onClick={handleSignOut}
+          disabled={isSigningOut}
+          className="rounded-full bg-red-600 px-6 py-3 text-white transition-colors hover:bg-red-700 disabled:opacity-50"
+        >
+          {isSigningOut ? "Signing Out..." : "Sign Out"}
+        </button>
       </main>
     </div>
   );

src/app/page.tsx

@@ -33,13 +33,13 @@ export default function Home() {
         ) : (
           <div className="flex flex-col items-center gap-4">
             <p className="text-zinc-600 dark:text-zinc-400">
-              Please log in to access the application
+              Please sign in to access the application
             </p>
             <Link
-              href="/login"
+              href="/sign-in"
               className="rounded-full bg-black px-6 py-3 text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
             >
-              Log In
+              Sign In
             </Link>
           </div>
         )}

src/app/login/page.tsx src/app/sign-in/page.tsxsrc/app/login/page.tsx renamed to src/app/sign-in/page.tsx

@@ -2,12 +2,16 @@
 
 import { authClient } from "@/lib/auth-client";
 
-export default function LoginPage() {
-  const handleOIDCLogin = async () => {
+const OIDC_PROVIDER_ID = process.env.NEXT_PUBLIC_OIDC_PROVIDER_ID || "oidc";
+const OIDC_PROVIDER_NAME =
+  process.env.NEXT_PUBLIC_OIDC_PROVIDER_NAME || "OIDC Provider";
+
+export default function SignInPage() {
+  const handleOIDCSignIn = async () => {
     try {
       console.log("Initiating OIDC sign-in...");
       const { data, error } = await authClient.signIn.oauth2({
-        providerId: "oidc",
+        providerId: OIDC_PROVIDER_ID,
         callbackURL: "/dashboard",
       });
 
@@ -31,7 +35,7 @@ export default function LoginPage() {
     <div className="flex min-h-screen items-center justify-center bg-zinc-50 dark:bg-black">
       <main className="flex flex-col items-center gap-8 rounded-lg bg-white p-12 shadow-lg dark:bg-zinc-900">
         <h1 className="text-3xl font-bold text-black dark:text-white">
-          Log In
+          Sign In
         </h1>
 
         <p className="text-center text-zinc-600 dark:text-zinc-400">
@@ -40,10 +44,10 @@ export default function LoginPage() {
 
         <button
           type="button"
-          onClick={handleOIDCLogin}
+          onClick={handleOIDCSignIn}
           className="rounded-full bg-black px-8 py-3 text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
         >
-          Sign In with OIDC
+          Sign In with {OIDC_PROVIDER_NAME}
         </button>
       </main>
     </div>

src/lib/auth-client.ts

@@ -7,5 +7,18 @@ export const authClient = createAuthClient({
   plugins: [genericOAuthClient()],
 });
 
-// You can also export specific methods if you prefer
-export const { signIn, signOut, useSession } = authClient;
+export const { signIn, useSession } = authClient;
+
+export const signOut = async (options?: { redirectTo?: string }) => {
+  const redirectUri = options?.redirectTo || "/sign-in";
+
+  // Note: This does NOT logout from Okta SSO session
+  // User will be automatically re-authenticated on next sign-in (SSO behavior)
+  await authClient.signOut({
+    fetchOptions: {
+      onSuccess: () => {
+        window.location.href = redirectUri;
+      },
+    },
+  });
+};

src/lib/auth.ts

@@ -1,86 +1,41 @@
+import type { BetterAuthOptions } from "better-auth";
 import { betterAuth } from "better-auth";
 import { genericOAuth } from "better-auth/plugins";
 
-// Read from environment variables to support any OIDC provider
-const OIDC_ISSUER = process.env.OIDC_ISSUER_URL || "";
-const OIDC_CLIENT_ID = process.env.OIDC_CLIENT_ID || "";
-const OIDC_CLIENT_SECRET = process.env.OIDC_CLIENT_SECRET || "";
-const BETTER_AUTH_SECRET =
-  process.env.BETTER_AUTH_SECRET || "build-time-placeholder";
-const BETTER_AUTH_URL = process.env.BETTER_AUTH_URL || "http://localhost:3000";
+const OIDC_PROVIDER_ID = process.env.OIDC_PROVIDER_ID || "oidc";
+const OIDC_ISSUER = process.env.OIDC_ISSUER || "";
+const BASE_URL = process.env.BETTER_AUTH_URL || "http://localhost:3000";
 
-// Validate required environment variables (warnings only during build)
-const isBuild = process.env.NEXT_PHASE === "phase-production-build";
-
-if (!process.env.BETTER_AUTH_SECRET) {
-  const message =
-    "[Better Auth] BETTER_AUTH_SECRET is required. Set it in .env.local to a strong, random value.";
-  if (isBuild) {
-    console.warn(message);
-  } else {
-    throw new Error(message);
-  }
-}
-
-if (!OIDC_ISSUER || !OIDC_CLIENT_ID || !OIDC_CLIENT_SECRET) {
-  const message =
-    "[Better Auth] OIDC configuration is incomplete. Set OIDC_ISSUER_URL, OIDC_CLIENT_ID, and OIDC_CLIENT_SECRET in .env.local";
-  if (isBuild) {
-    console.warn(message);
-  } else {
-    throw new Error(message);
-  }
-}
-
-console.log("[Better Auth] OIDC Configuration:", {
-  issuer: OIDC_ISSUER,
-  clientId: OIDC_CLIENT_ID,
-  baseURL: BETTER_AUTH_URL,
-  discoveryUrl: `${OIDC_ISSUER}/.well-known/openid-configuration`,
-  callbackURL: `${BETTER_AUTH_URL}/api/auth/oauth2/callback/oidc`,
-});
-
-// Configure trusted origins - defaults to localhost ports for development
-// Set TRUSTED_ORIGINS environment variable for production (comma-separated list)
 const trustedOrigins = process.env.TRUSTED_ORIGINS
-  ? process.env.TRUSTED_ORIGINS.split(",").map((origin) => origin.trim())
-  : [
-      "http://localhost:3000",
-      "http://localhost:3001",
-      "http://localhost:3002",
-      "http://localhost:3003",
-    ];
+  ? process.env.TRUSTED_ORIGINS.split(",").map((s) => s.trim())
+  : [BASE_URL, "http://localhost:3002", "http://localhost:3003"];
 
-// Always include BETTER_AUTH_URL if not already present
-if (BETTER_AUTH_URL && !trustedOrigins.includes(BETTER_AUTH_URL)) {
-  trustedOrigins.push(BETTER_AUTH_URL);
+if (!trustedOrigins.includes(BASE_URL)) {
+  trustedOrigins.push(BASE_URL);
 }
 
 export const auth = betterAuth({
-  secret: BETTER_AUTH_SECRET,
-  baseURL: BETTER_AUTH_URL,
+  secret: process.env.BETTER_AUTH_SECRET || "build-time-placeholder",
+  baseURL: BASE_URL,
   trustedOrigins,
-  // No database configuration - running in stateless mode
   session: {
-    expiresIn: 60 * 60 * 24 * 7, // 7 days
     cookieCache: {
       enabled: true,
-      maxAge: 30 * 24 * 60 * 60, // 30 days cache duration
-      strategy: "jwe", // Use encrypted tokens for better security
-      refreshCache: true, // Enable stateless refresh
     },
   },
   plugins: [
     genericOAuth({
       config: [
         {
-          providerId: "oidc",
+          providerId: OIDC_PROVIDER_ID,
           discoveryUrl: `${OIDC_ISSUER}/.well-known/openid-configuration`,
-          clientId: OIDC_CLIENT_ID,
-          clientSecret: OIDC_CLIENT_SECRET,
+          redirectURI: `${BASE_URL}/api/auth/oauth2/callback/${OIDC_PROVIDER_ID}`,
+          clientId: process.env.OIDC_CLIENT_ID || "",
+          clientSecret: process.env.OIDC_CLIENT_SECRET || "",
           scopes: ["openid", "email", "profile"],
+          pkce: true,
         },
       ],
     }),
   ],
-});
+} as BetterAuthOptions);