From 622a66fcf85e8f91fa774095d48c825efe74e49d Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <maximilian@kaske.org>
Date: Thu, 1 Oct 2026 22:02:34 +0200
Subject: [PATCH] fix:

---
 .../src/app/login/_components/email-form.tsx  | 85 +++++++++++++++++--
 .../app/login/_components/login-button.tsx    |  7 +-
 apps/dashboard/src/app/login/page.tsx         | 53 ++++++------
 3 files changed, 106 insertions(+), 39 deletions(-)

diff --git a/apps/dashboard/src/app/login/_components/email-form.tsx b/apps/dashboard/src/app/login/_components/email-form.tsx
index a4eb4972..bb4313c6 100644
--- a/apps/dashboard/src/app/login/_components/email-form.tsx
+++ b/apps/dashboard/src/app/login/_components/email-form.tsx
@@ -1,18 +1,41 @@
 "use client";
 
+import { Button } from "@openstatus/ui/components/ui/button";
 import { Input } from "@openstatus/ui/components/ui/input";
-import { useActionState } from "react";
+import { Separator } from "@openstatus/ui/components/ui/separator";
+import { useActionState, useEffect, useState } from "react";
 
 import { type EmailFormState, continueWithEmail } from "./actions";
-import { LoginButton } from "./login-button";
+import { LoginButton, STORAGE_KEY } from "./login-button";
 
 const initialState: EmailFormState = {};
 
-export function EmailForm({ redirectTo }: { redirectTo?: string }) {
+type Mode = "closed" | "sso" | "email";
+
+/**
+ * One form, two doors: "Continue with SSO" sits with the OAuth buttons, the
+ * magic link hides behind a text link so OAuth stays the obvious path. Both
+ * submit the same action, which routes verified SSO domains server-side.
+ * Reopens by itself for returning email/SSO users.
+ */
+export function EmailForm({
+  redirectTo,
+  sso,
+}: {
+  redirectTo?: string;
+  sso: boolean;
+}) {
   const [state, formAction, isPending] = useActionState(
     continueWithEmail,
     initialState,
   );
+  const [mode, setMode] = useState<Mode>("closed");
+
+  useEffect(() => {
+    const last = localStorage.getItem(STORAGE_KEY);
+    if (last === "email") setMode("email");
+    if (last === "sso" && sso) setMode("sso");
+  }, [sso]);
 
   if (state.sent) {
     return (
@@ -25,7 +48,7 @@ export function EmailForm({ redirectTo }: { redirectTo?: string }) {
     );
   }
 
-  return (
+  const form = (
     <form action={formAction} className="grid w-full gap-2">
       {redirectTo ? (
         <input type="hidden" name="redirectTo" value={redirectTo} />
@@ -34,9 +57,12 @@ export function EmailForm({ redirectTo }: { redirectTo?: string }) {
         name="email"
         type="email"
         required
+        autoFocus
         autoComplete="email"
-        placeholder="gilfoyle@piedpiper.dev"
-        aria-label="Email"
+        placeholder={
+          mode === "sso" ? "you@company.com" : "gilfoyle@piedpiper.dev"
+        }
+        aria-label={mode === "sso" ? "Work email" : "Email"}
         aria-invalid={state.error ? true : undefined}
         aria-describedby={state.error ? "email-error" : undefined}
       />
@@ -47,12 +73,53 @@ export function EmailForm({ redirectTo }: { redirectTo?: string }) {
       ) : null}
       <LoginButton
         type="submit"
-        provider="email"
-        variant="default"
+        provider={mode === "sso" ? "sso" : "email"}
         disabled={isPending}
       >
-        {isPending ? "Continuing…" : "Continue"}
+        {mode === "sso"
+          ? isPending
+            ? "Redirecting…"
+            : "Continue with SSO"
+          : isPending
+            ? "Continuing…"
+            : "Continue with email"}
       </LoginButton>
     </form>
   );
+
+  return (
+    <>
+      {sso ? (
+        mode === "sso" ? (
+          form
+        ) : (
+          <Button
+            type="button"
+            variant="secondary"
+            className="w-full"
+            onClick={() => setMode("sso")}
+          >
+            Continue with SSO
+          </Button>
+        )
+      ) : null}
+      <div className="flex items-center gap-3">
+        <Separator className="flex-1" />
+        <span className="text-muted-foreground text-xs">or</span>
+        <Separator className="flex-1" />
+      </div>
+      {mode === "email" ? (
+        form
+      ) : (
+        <Button
+          type="button"
+          variant="ghost"
+          className="text-muted-foreground w-full"
+          onClick={() => setMode("email")}
+        >
+          Continue with email
+        </Button>
+      )}
+    </>
+  );
 }
diff --git a/apps/dashboard/src/app/login/_components/login-button.tsx b/apps/dashboard/src/app/login/_components/login-button.tsx
index 327cf1dc..2225549e 100644
--- a/apps/dashboard/src/app/login/_components/login-button.tsx
+++ b/apps/dashboard/src/app/login/_components/login-button.tsx
@@ -5,15 +5,16 @@ import { Button } from "@openstatus/ui/components/ui/button";
 import { cn } from "@openstatus/ui/lib/utils";
 import { useEffect, useState } from "react";
 
-const STORAGE_KEY = "openstatus:last-login-provider";
+export const STORAGE_KEY = "openstatus:last-login-provider";
 
-type Provider = "github" | "google" | "oidc" | "email";
+type Provider = "github" | "google" | "oidc" | "sso" | "email";
 
 export function LoginButton({
   provider,
   children,
   onClick,
   className,
+  variant = "secondary",
   ...props
 }: {
   provider: Provider;
@@ -27,7 +28,7 @@ export function LoginButton({
 
   return (
     <Button
-      variant="secondary"
+      variant={variant}
       className={cn(
         "relative w-full",
         isLastUsed && "border-primary border",
diff --git a/apps/dashboard/src/app/login/page.tsx b/apps/dashboard/src/app/login/page.tsx
index 3c747004..ec6d6e0d 100644
--- a/apps/dashboard/src/app/login/page.tsx
+++ b/apps/dashboard/src/app/login/page.tsx
@@ -1,6 +1,5 @@
 import { GitHubIcon } from "@openstatus/icons/brand";
 import { GoogleIcon } from "@openstatus/icons/brand";
-import { Separator } from "@openstatus/ui/components/ui/separator";
 import type { Metadata } from "next";
 import Link from "next/link";
 import type { SearchParams } from "nuqs/server";
@@ -11,6 +10,10 @@ import { EmailForm } from "./_components/email-form";
 import { LoginButton } from "./_components/login-button";
 import { searchParamsCache } from "./search-params";
 
+const hasWorkOS = Boolean(
+  process.env.AUTH_WORKOS_ID && process.env.AUTH_WORKOS_SECRET,
+);
+
 // Auth.js error codes that land on `/login?error=`; anything else stays silent.
 const ERROR_MESSAGES: Record<string, string> = {
   AccessDenied:
@@ -51,44 +54,40 @@ export default async function Page(props: {
           {ERROR_MESSAGES[error]}
         </p>
       ) : null}
-      <div className="grid gap-4 p-4">
-        <EmailForm redirectTo={redirectTo ?? undefined} />
-        <Separator />
-        <div className="grid grid-cols-2 gap-4">
-          <form
-            action={async () => {
-              "use server";
-              await signIn("github", { redirectTo: redirectTo ?? undefined });
-            }}
-          >
-            <LoginButton type="submit" provider="github">
-              <GitHubIcon className="h-4 w-4" /> GitHub
-            </LoginButton>
-          </form>
-          <form
-            action={async () => {
-              "use server";
-              await signIn("google", { redirectTo: redirectTo ?? undefined });
-            }}
-          >
-            <LoginButton type="submit" provider="google">
-              <GoogleIcon className="h-4 w-4" /> Google
-            </LoginButton>
-          </form>
-        </div>
+      <div className="grid gap-3 p-4">
+        <form
+          action={async () => {
+            "use server";
+            await signIn("github", { redirectTo: redirectTo ?? undefined });
+          }}
+        >
+          <LoginButton type="submit" provider="github" variant="default">
+            <GitHubIcon className="h-4 w-4" /> Continue with GitHub
+          </LoginButton>
+        </form>
+        <form
+          action={async () => {
+            "use server";
+            await signIn("google", { redirectTo: redirectTo ?? undefined });
+          }}
+        >
+          <LoginButton type="submit" provider="google" variant="default">
+            <GoogleIcon className="h-4 w-4" /> Continue with Google
+          </LoginButton>
+        </form>
         {process.env.AUTH_OIDC_ISSUER ? (
           <form
             action={async () => {
               "use server";
               await signIn("oidc", { redirectTo: redirectTo ?? undefined });
             }}
-            className="w-full"
           >
             <LoginButton type="submit" provider="oidc">
               Continue with {process.env.AUTH_OIDC_NAME ?? "SSO"}
             </LoginButton>
           </form>
         ) : null}
+        <EmailForm redirectTo={redirectTo ?? undefined} sso={hasWorkOS} />
       </div>
       <p className="text-muted-foreground mx-auto max-w-md px-8 text-center text-xs text-pretty">
         By clicking continue, you agree to our{" "}
-- 
2.51.2