fix: stateless sign out

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

@@ -6,8 +6,8 @@ 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 LoginPage() {
-  const handleOIDCLogin = async () => {
+export default function SignInPage() {
+  const handleOIDCSignIn = async () => {
     try {
       console.log("Initiating OIDC sign-in...");
       const { data, error } = await authClient.signIn.oauth2({
@@ -35,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">
@@ -44,7 +44,7 @@ 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_PROVIDER_NAME}

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,3 +1,4 @@
+import type { BetterAuthOptions } from "better-auth";
 import { betterAuth } from "better-auth";
 import { genericOAuth } from "better-auth/plugins";
 
@@ -37,9 +38,9 @@ export const auth = betterAuth({
           clientId: process.env.OIDC_CLIENT_ID || "",
           clientSecret: process.env.OIDC_CLIENT_SECRET || "",
           scopes: ["openid", "email", "profile"],
-          pkce: false,
+          pkce: true,
         },
       ],
     }),
   ],
-});
+} as BetterAuthOptions);