Merge pull request #326 from yordis/improve-actions

chore: improve idp integration using server action

apps/login/package.json

@@ -46,6 +46,7 @@
     "copy-to-clipboard": "^3.3.3",
     "deepmerge": "^4.3.1",
     "jose": "^5.3.0",
+    "lucide-react": "0.469.0",
     "moment": "^2.29.4",
     "next": "15.2.0-canary.33",
     "next-intl": "^3.25.1",

apps/login/src/components/idps/base-button.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { clsx } from "clsx";
+import { Loader2Icon } from "lucide-react";
 import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";
+import { useFormStatus } from "react-dom";
 
 export type SignInWithIdentityProviderProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
@@ -15,15 +17,25 @@ export const BaseButton = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
 >(function BaseButton(props, ref) {
+  const formStatus = useFormStatus();
+
   return (
     <button
       {...props}
-      type="button"
+      type="submit"
       ref={ref}
+      disabled={formStatus.pending}
       className={clsx(
-        "transition-all cursor-pointer flex flex-row items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm",
+        "flex-1 transition-all cursor-pointer flex flex-row items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm",
         props.className,
       )}
-    />
+    >
+      <div className="flex-1 justify-between flex items-center gap-4">
+        <div className="flex-1 flex flex-row items-center">
+          {props.children}
+        </div>
+        {formStatus.pending && <Loader2Icon className="w-4 h-4 animate-spin" />}
+      </div>
+    </button>
   );
 });

apps/login/src/components/idps/sign-in-with-github.tsx

@@ -4,6 +4,39 @@ import { useTranslations } from "next-intl";
 import { forwardRef } from "react";
 import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
+function GitHubLogo() {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 1024 1024"
+        className="h-8 w-8 hidden dark:block"
+      >
+        <path
+          fill="#fafafa"
+          fillRule="evenodd"
+          d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 1024 1024"
+        className="h-8 w-8 block dark:hidden"
+      >
+        <path
+          fill="#1B1F23"
+          fillRule="evenodd"
+          d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </>
+  );
+}
+
 export const SignInWithGithub = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
@@ -14,32 +47,7 @@ export const SignInWithGithub = forwardRef<
   return (
     <BaseButton {...restProps} ref={ref}>
       <div className="mx-2 my-2 flex items-center justify-center">
-        <svg
+        <GitHubLogo />
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 1024 1024"
-          className="h-8 w-8 hidden dark:block"
-        >
-          <path
-            fill="#fafafa"
-            fillRule="evenodd"
-            d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z"
-            clipRule="evenodd"
-          ></path>
-        </svg>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 1024 1024"
-          className="h-8 w-8 block dark:hidden"
-        >
-          <path
-            fill="#1B1F23"
-            fillRule="evenodd"
-            d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z"
-            clipRule="evenodd"
-          ></path>
-        </svg>
       </div>
       {children ? (
         children

apps/login/src/components/sign-in-with-idp.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import { idpTypeToSlug } from "@/lib/idp";
-import { startIDPFlow } from "@/lib/server/idp";
+import { redirectToIdp } from "@/lib/server/idp";
 import {
   IdentityProvider,
   IdentityProviderType,
 } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
-import { useRouter } from "next/navigation";
+import { ReactNode, useActionState } from "react";
-import { ReactNode, useCallback, useState } from "react";
 import { Alert } from "./alert";
 import { SignInWithIdentityProviderProps } from "./idps/base-button";
 import { SignInWithApple } from "./idps/sign-in-with-apple";
@@ -31,45 +30,10 @@ export function SignInWithIdp({
   organization,
   linkOnly,
 }: Readonly<SignInWithIDPProps>) {
-  const [loading, setLoading] = useState(false);
+  const [state, action, _isPending] = useActionState(redirectToIdp, {});
-  const [error, setError] = useState<string | null>(null);
-  const router = useRouter();
 
-  const startFlow = useCallback(
+  const renderIDPButton = (idp: IdentityProvider, index: number) => {
-    async (idpId: string, provider: string) => {
-      setLoading(true);
-      const params = new URLSearchParams();
-      if (linkOnly) params.set("link", "true");
-      if (requestId) params.set("requestId", requestId);
-      if (organization) params.set("organization", organization);
-
-      try {
-        const response = await startIDPFlow({
-          idpId,
-          successUrl: `/idp/${provider}/success?` + params.toString(),
-          failureUrl: `/idp/${provider}/failure?` + params.toString(),
-        });
-
-        if (response && "error" in response && response?.error) {
-          setError(response.error);
-          return;
-        }
-
-        if (response && "redirect" in response && response?.redirect) {
-          return router.push(response.redirect);
-        }
-      } catch {
-        setError("Could not start IDP flow");
-      } finally {
-        setLoading(false);
-      }
-    },
-    [requestId, organization, linkOnly, router],
-  );
-
-  const renderIDPButton = (idp: IdentityProvider) => {
     const { id, name, type } = idp;
-    const onClick = () => startFlow(id, idpTypeToSlug(type));
 
     const components: Partial<
       Record<
@@ -93,16 +57,27 @@ export function SignInWithIdp({
 
     const Component = components[type];
     return Component ? (
-      <Component key={id} name={name} onClick={onClick} />
+      <form action={action} className="flex" key={`idp-${index}`}>
+        <input type="hidden" name="id" value={id} />
+        <input type="hidden" name="provider" value={idpTypeToSlug(type)} />
+        <input type="hidden" name="requestId" value={requestId} />
+        <input type="hidden" name="organization" value={organization} />
+        <input
+          type="hidden"
+          name="linkOnly"
+          value={linkOnly ? "true" : "false"}
+        />
+        <Component key={id} name={name} />
+      </form>
     ) : null;
   };
 
   return (
     <div className="flex flex-col w-full space-y-2 text-sm">
       {identityProviders?.map(renderIDPButton)}
-      {error && (
+      {state?.error && (
         <div className="py-4">
-          <Alert>{error}</Alert>
+          <Alert>{state?.error}</Alert>
         </div>
       )}
     </div>

apps/login/src/lib/server/idp.ts

@@ -6,11 +6,45 @@ import {
   startIdentityProviderFlow,
 } from "@/lib/zitadel";
 import { headers } from "next/headers";
+import { redirect } from "next/navigation";
 import { getNextUrl } from "../client";
 import { getServiceUrlFromHeaders } from "../service";
 import { checkEmailVerification } from "../verify-helper";
 import { createSessionForIdpAndUpdateCookie } from "./cookie";
 
+export type RedirectToIdpState = { error?: string | null } | undefined;
+
+export async function redirectToIdp(
+  prevState: RedirectToIdpState,
+  formData: FormData,
+): Promise<RedirectToIdpState> {
+  const params = new URLSearchParams();
+
+  const linkOnly = formData.get("linkOnly") === "true";
+  const requestId = formData.get("requestId") as string;
+  const organization = formData.get("organization") as string;
+  const idpId = formData.get("id") as string;
+  const provider = formData.get("provider") as string;
+
+  if (linkOnly) params.set("link", "true");
+  if (requestId) params.set("requestId", requestId);
+  if (organization) params.set("organization", organization);
+
+  const response = await startIDPFlow({
+    idpId,
+    successUrl: `/idp/${provider}/success?` + params.toString(),
+    failureUrl: `/idp/${provider}/failure?` + params.toString(),
+  });
+
+  if (response && "error" in response && response?.error) {
+    return { error: response.error };
+  }
+
+  if (response && "redirect" in response && response?.redirect) {
+    redirect(response.redirect);
+  }
+}
+
 export type StartIDPFlowCommand = {
   idpId: string;
   successUrl: string;

pnpm-lock.yaml

@@ -104,6 +104,9 @@ importers:
       jose:
         specifier: ^5.3.0
         version: 5.8.0
+      lucide-react:
+        specifier: 0.469.0
+        version: 0.469.0(react@19.0.0)
       moment:
         specifier: ^2.29.4
         version: 2.30.1
@@ -1484,9 +1487,6 @@ packages:
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
-  '@swc/helpers@0.5.13':
-    resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
-
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
@@ -3384,6 +3384,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@0.469.0:
+    resolution: {integrity: sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -5889,7 +5894,7 @@ snapshots:
 
   '@react-aria/ssr@3.9.6(react@19.0.0)':
     dependencies:
-      '@swc/helpers': 0.5.5
+      '@swc/helpers': 0.5.15
       react: 19.0.0
 
   '@react-aria/utils@3.25.3(react@19.0.0)':
@@ -5897,13 +5902,13 @@ snapshots:
       '@react-aria/ssr': 3.9.6(react@19.0.0)
       '@react-stately/utils': 3.10.4(react@19.0.0)
       '@react-types/shared': 3.25.0(react@19.0.0)
-      '@swc/helpers': 0.5.5
+      '@swc/helpers': 0.5.15
       clsx: 2.1.1
       react: 19.0.0
 
   '@react-stately/utils@3.10.4(react@19.0.0)':
     dependencies:
-      '@swc/helpers': 0.5.13
+      '@swc/helpers': 0.5.15
       react: 19.0.0
 
   '@react-types/shared@3.25.0(react@19.0.0)':
@@ -5978,10 +5983,6 @@ snapshots:
 
   '@swc/counter@0.1.3': {}
 
-  '@swc/helpers@0.5.13':
-    dependencies:
-      tslib: 2.8.1
-
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1
@@ -8241,6 +8242,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@0.469.0(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+
   lz-string@1.5.0: {}
 
   magic-string@0.30.12: