✨ show last used login idp in smart login form

src/app/auth/login/page.tsx

@@ -16,8 +16,11 @@ import LoginCardHeader from "@app/components/LoginCardHeader";
 import { priv } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { LoginFormIDP } from "@app/components/LoginForm";
-import { ListIdpsResponse } from "@server/routers/idp";
+import { ListIdpsResponse, type GetIdpResponse } from "@server/routers/idp";
 import type { Metadata } from "next";
+import { cookies } from "next/headers";
+import { LAST_USED_IDP_COOKIE_NAME } from "@app/lib/consts";
+import z from "zod";
 
 export const metadata: Metadata = {
     title: "Log In"
@@ -31,6 +34,8 @@ export default async function Page(props: {
     const searchParams = await props.searchParams;
     const user = await verifySession({ skipCheckVerifyEmail: true });
 
+    const lastUsedIdpCookie = (await cookies()).get(LAST_USED_IDP_COOKIE_NAME);
+
     const isInvite = searchParams?.redirect?.includes("/invite");
     const forceLoginParam = searchParams?.forceLogin;
     const forceLogin = forceLoginParam === "true";
@@ -84,19 +89,47 @@ export default async function Page(props: {
         (build === "enterprise" && env.app.identityProviderMode === "org");
 
     let loginIdps: LoginFormIDP[] = [];
+    let lastUsedIdpForSmartLogin: (LoginFormIDP & { orgId?: string }) | null =
+        null;
     if (!useSmartLogin) {
         // Load IdPs for DashboardLoginForm (OSS or org-only IdP mode)
         if (build === "oss" || env.app.identityProviderMode !== "org") {
-            const idpsRes = await cache(
-                async () =>
-                    await priv.get<AxiosResponse<ListIdpsResponse>>("/idp")
-            )();
+            const idpsRes =
+                await priv.get<AxiosResponse<ListIdpsResponse>>("/idp");
             loginIdps = idpsRes.data.data.idps.map((idp) => ({
                 idpId: idp.idpId,
                 name: idp.name,
                 variant: idp.type
             })) as LoginFormIDP[];
         }
+    } else {
+        if (lastUsedIdpCookie) {
+            const lastUsedIdpSchema = z.object({
+                orgId: z.string().optional(),
+                idpId: z.number()
+            });
+            try {
+                const persistedData = lastUsedIdpSchema.parse(
+                    JSON.parse(lastUsedIdpCookie.value)
+                );
+
+                const idpRes = await priv.get<AxiosResponse<GetIdpResponse>>(
+                    `/idp/${persistedData.idpId}`
+                );
+
+                const idp = idpRes.data.data.idp;
+
+                lastUsedIdpForSmartLogin = {
+                    idpId: idp.idpId,
+                    name: idp.name,
+                    variant: idp.type,
+                    orgId: persistedData.orgId,
+                    lastUsed: true
+                };
+            } catch (error) {
+                // the idp might not exist or the data is malformatted, skip this
+            }
+        }
     }
 
     const t = await getTranslations();
@@ -159,6 +192,7 @@ export default async function Page(props: {
                                 redirect={redirectUrl}
                                 forceLogin={forceLogin}
                                 defaultUser={defaultUser}
+                                lastUsedIdp={lastUsedIdpForSmartLogin}
                                 orgSignIn={
                                     !isInvite &&
                                     (build === "saas" ||

src/components/IdpLoginButtons.tsx

@@ -1,26 +1,25 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Button } from "@app/components/ui/button";
-import { Alert, AlertDescription } from "@app/components/ui/alert";
-import { useTranslations } from "next-intl";
+import { generateOidcUrlProxy } from "@app/actions/server";
 import IdpTypeIcon from "@app/components/IdpTypeIcon";
-import {
-    generateOidcUrlProxy,
-    type GenerateOidcUrlResponse
-} from "@app/actions/server";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+import { Button } from "@app/components/ui/button";
+import { cleanRedirect } from "@app/lib/cleanRedirect";
+import { LAST_USED_IDP_COOKIE_NAME } from "@app/lib/consts";
+import { setClientCookie } from "@app/lib/setClientCookie";
+import { useTranslations } from "next-intl";
 import {
     redirect as redirectTo,
-    useParams,
+    useRouter,
     useSearchParams
 } from "next/navigation";
-import { useRouter } from "next/navigation";
-import { cleanRedirect } from "@app/lib/cleanRedirect";
+import { useEffect, useState, useTransition } from "react";
 
 export type LoginFormIDP = {
     idpId: number;
     name: string;
     variant?: string;
+    lastUsed?: boolean;
 };
 
 type IdpLoginButtonsProps = {
@@ -35,7 +34,6 @@ export default function IdpLoginButtons({
     orgId
 }: IdpLoginButtonsProps) {
     const [error, setError] = useState<string | null>(null);
-    const [loading, setLoading] = useState(false);
     const t = useTranslations();
 
     const params = useSearchParams();
@@ -52,10 +50,22 @@ export default function IdpLoginButtons({
         }
     }, []);
 
+    const [loading, startTransition] = useTransition();
+
     async function loginWithIdp(idpId: number) {
-        setLoading(true);
         setError(null);
 
+        setClientCookie(
+            LAST_USED_IDP_COOKIE_NAME,
+            JSON.stringify({
+                orgId,
+                idpId
+            }),
+            {
+                sameSite: "Lax"
+            }
+        );
+
         let redirectToUrl: string | undefined;
         try {
             console.log("generating", idpId, redirect || "/", orgId);
@@ -68,7 +78,6 @@ export default function IdpLoginButtons({
 
             if (response.error) {
                 setError(response.message);
-                setLoading(false);
                 return;
             }
 
@@ -84,7 +93,6 @@ export default function IdpLoginButtons({
                         "An unexpected error occurred. Please try again."
                 })
             );
-            setLoading(false);
         }
 
         if (redirectToUrl) {
@@ -124,20 +132,38 @@ export default function IdpLoginButtons({
                                 idp.variant || idp.name.toLowerCase();
 
                             return (
-                                <Button
+                                <div
+                                    className="w-full relative"
                                     key={idp.idpId}
-                                    type="button"
-                                    variant="outline"
-                                    className="w-full inline-flex items-center space-x-2"
-                                    onClick={() => {
-                                        loginWithIdp(idp.idpId);
-                                    }}
-                                    disabled={loading}
-                                    loading={loading}
                                 >
-                                    <IdpTypeIcon type={effectiveType} size={16} />
-                                    <span>{idp.name}</span>
-                                </Button>
+                                    <Button
+                                        key={idp.idpId}
+                                        type="button"
+                                        variant="outline"
+                                        className="w-full inline-flex items-center space-x-2  after:absolute after:inset-0 after:z-10"
+                                        onClick={() => {
+                                            startTransition(() =>
+                                                loginWithIdp(idp.idpId)
+                                            );
+                                        }}
+                                        disabled={loading}
+                                        loading={loading}
+                                    >
+                                        <IdpTypeIcon
+                                            type={effectiveType}
+                                            size={16}
+                                        />
+                                        <span>{idp.name}</span>
+                                    </Button>
+
+                                    {idp.lastUsed && (
+                                        <div className="absolute inset-0">
+                                            <span className="absolute top-0 right-0 text-xs bg-primary text-primary-foreground rounded-bl-sm rounded-tr-sm px-2 py-0.5">
+                                                {t("idpLastUsed")}
+                                            </span>
+                                        </div>
+                                    )}
+                                </div>
                             );
                         })}
                     </>

src/components/SmartLoginForm.tsx

@@ -27,6 +27,8 @@ import UserProfileCard from "@app/components/UserProfileCard";
 import SecurityKeyAuthButton from "@app/components/SecurityKeyAuthButton";
 import { Separator } from "@app/components/ui/separator";
 import OrgSignInLink from "@app/components/OrgSignInLink";
+import type { LoginFormIDP } from "./LoginForm";
+import IdpLoginButtons from "./IdpLoginButtons";
 
 const identifierSchema = z.object({
     identifier: z.string().min(1, "Username or email is required")
@@ -53,6 +55,7 @@ type SmartLoginFormProps = {
     forceLogin?: boolean;
     defaultUser?: string;
     orgSignIn?: OrgSignInConfig;
+    lastUsedIdp?: (LoginFormIDP & { orgId?: string }) | null;
 };
 
 type ViewState =
@@ -89,7 +92,8 @@ export default function SmartLoginForm({
     redirect,
     forceLogin,
     defaultUser,
-    orgSignIn
+    orgSignIn,
+    lastUsedIdp
 }: SmartLoginFormProps) {
     const router = useRouter();
     const { env } = useEnvContext();
@@ -294,6 +298,15 @@ export default function SmartLoginForm({
                                 </span>
                             </div>
                         </div>
+
+                        {lastUsedIdp && (
+                            <IdpLoginButtons
+                                idps={[lastUsedIdp]}
+                                orgId={lastUsedIdp.orgId}
+                                redirect={redirect}
+                            />
+                        )}
+
                         <OrgSignInLink
                             href={orgSignIn.href}
                             linkText={orgSignIn.linkText}

src/lib/consts.ts

@@ -0,0 +1 @@
+export const LAST_USED_IDP_COOKIE_NAME = "p__last_used_idp";

src/lib/setClientCookie.ts

@@ -0,0 +1,32 @@
+/**
+ * Set a cookie on the client side in javascript code, not on the server
+ * @param name
+ * @param value
+ * @param days
+ * @param options
+ */
+export function setClientCookie(
+    name: string,
+    value: string,
+    options: {
+        days?: number;
+        path?: string;
+        secure?: boolean;
+        sameSite?: "Strict" | "Lax" | "None";
+    } = {}
+): void {
+    let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+
+    if (options.days) {
+        const date = new Date();
+        date.setTime(date.getTime() + options.days * 864e5);
+        cookie += `; expires=${date.toUTCString()}`;
+    }
+
+    cookie += `; path=${options.path ?? "/"}`;
+
+    if (options.secure) cookie += "; Secure";
+    if (options.sameSite) cookie += `; SameSite=${options.sameSite}`;
+
+    document.cookie = cookie;
+}