move auth setup to seperate page, create session after verification

apps/login/locales/de.json

@@ -160,12 +160,13 @@
       "description": "Geben Sie den Code ein, der in der Bestätigungs-E-Mail angegeben ist.",
       "resendCode": "Code erneut senden",
       "submit": "Weiter"
-    },
-    "setup": {
-      "title": "Authentifizierungsmethode auswählen",
-      "description": "Wählen Sie die Methode, mit der Sie sich authentifizieren möchten."
     }
   },
+  "authenticator": {
+    "title": "Authentifizierungsmethode auswählen",
+    "description": "Wählen Sie die Methode, mit der Sie sich authentifizieren möchten.",
+    "noMethodsAvailable": "Keine Authentifizierungsmethoden verfügbar"
+  },
   "error": {
     "unknownContext": "Der Kontext des Benutzers konnte nicht ermittelt werden. Stellen Sie sicher, dass Sie zuerst den Benutzernamen eingeben oder einen loginName als Suchparameter angeben.",
     "sessionExpired": "Ihre aktuelle Sitzung ist abgelaufen. Bitte melden Sie sich erneut an.",

apps/login/locales/en.json

@@ -160,12 +160,13 @@
       "description": "Enter the Code provided in the verification email.",
       "resendCode": "Resend code",
       "submit": "Continue"
-    },
-    "setup": {
-      "title": "Choose authentication method",
-      "description": "Select the method you would like to authenticate"
     }
   },
+  "authenticator": {
+    "title": "Choose authentication method",
+    "description": "Select the method you would like to authenticate",
+    "noMethodsAvailable": "No authentication methods available"
+  },
   "error": {
     "unknownContext": "Could not get the context of the user. Make sure to enter the username first or provide a loginName as searchParam.",
     "sessionExpired": "Your current session has expired. Please login again.",

apps/login/locales/es.json

@@ -160,12 +160,13 @@
       "description": "Introduce el código proporcionado en el correo electrónico de verificación.",
       "resendCode": "Reenviar código",
       "submit": "Continuar"
-    },
-    "setup": {
-      "title": "Seleccionar método de autenticación",
-      "description": "Selecciona el método con el que deseas autenticarte"
     }
   },
+  "authenticator": {
+    "title": "Seleccionar método de autenticación",
+    "description": "Selecciona el método con el que deseas autenticarte",
+    "noMethodsAvailable": "No hay métodos de autenticación disponibles"
+  },
   "error": {
     "unknownContext": "No se pudo obtener el contexto del usuario. Asegúrate de ingresar primero el nombre de usuario o proporcionar un loginName como parámetro de búsqueda.",
     "sessionExpired": "Tu sesión actual ha expirado. Por favor, inicia sesión de nuevo.",

apps/login/locales/it.json

@@ -160,12 +160,13 @@
       "description": "Inserisci il codice fornito nell'email di verifica.",
       "resendCode": "Invia di nuovo il codice",
       "submit": "Continua"
-    },
-    "setup": {
-      "title": "Seleziona metodo di autenticazione",
-      "description": "Seleziona il metodo con cui desideri autenticarti"
     }
   },
+  "authenticator": {
+    "title": "Seleziona metodo di autenticazione",
+    "description": "Seleziona il metodo con cui desideri autenticarti",
+    "noMethodsAvailable": "Nessun metodo di autenticazione disponibile"
+  },
   "error": {
     "unknownContext": "Impossibile ottenere il contesto dell'utente. Assicurati di inserire prima il nome utente o di fornire un loginName come parametro di ricerca.",
     "sessionExpired": "La tua sessione attuale è scaduta. Effettua nuovamente l'accesso.",

apps/login/src/app/(login)/authenticator/set/page.tsx

@@ -0,0 +1,160 @@
+import { Alert } from "@/components/alert";
+import { BackButton } from "@/components/back-button";
+import { ChooseAuthenticatorToSetup } from "@/components/choose-authenticator-to-setup";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { UserAvatar } from "@/components/user-avatar";
+import { getSessionCookieById } from "@/lib/cookies";
+import { loadMostRecentSession } from "@/lib/session";
+import {
+  getBrandingSettings,
+  getLoginSettings,
+  getSession,
+  getUserByID,
+  listAuthenticationMethodTypes,
+} from "@/lib/zitadel";
+import { Timestamp, timestampDate } from "@zitadel/client";
+import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
+import { getLocale, getTranslations } from "next-intl/server";
+
+function isSessionValid(session: Partial<Session>): {
+  valid: boolean;
+  verifiedAt?: Timestamp;
+} {
+  const validPassword = session?.factors?.password?.verifiedAt;
+  const validPasskey = session?.factors?.webAuthN?.verifiedAt;
+  const stillValid = session.expirationDate
+    ? timestampDate(session.expirationDate) > new Date()
+    : true;
+
+  const verifiedAt = validPassword || validPasskey;
+  const valid = !!((validPassword || validPasskey) && stillValid);
+
+  return { valid, verifiedAt };
+}
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+}) {
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "authenticator" });
+  const tError = await getTranslations({ locale, namespace: "error" });
+
+  const { loginName, checkAfter, authRequestId, organization, sessionId } =
+    searchParams;
+
+  const sessionWithData = sessionId
+    ? await loadSessionById(sessionId, organization)
+    : await loadSessionByLoginname(loginName, organization);
+
+  async function getAuthMethodsAndUser(session?: Session) {
+    const userId = session?.factors?.user?.id;
+
+    if (!userId) {
+      throw Error("Could not get user id from session");
+    }
+
+    return listAuthenticationMethodTypes(userId).then((methods) => {
+      return getUserByID(userId).then((user) => {
+        const humanUser =
+          user.user?.type.case === "human" ? user.user?.type.value : undefined;
+
+        return {
+          factors: session?.factors,
+          authMethods: methods.authMethodTypes ?? [],
+          phoneVerified: humanUser?.phone?.isVerified ?? false,
+          emailVerified: humanUser?.email?.isVerified ?? false,
+          expirationDate: session?.expirationDate,
+        };
+      });
+    });
+  }
+
+  async function loadSessionByLoginname(
+    loginName?: string,
+    organization?: string,
+  ) {
+    return loadMostRecentSession({
+      loginName,
+      organization,
+    }).then((session) => {
+      return getAuthMethodsAndUser(session);
+    });
+  }
+
+  async function loadSessionById(sessionId: string, organization?: string) {
+    const recent = await getSessionCookieById({ sessionId, organization });
+    return getSession({
+      sessionId: recent.id,
+      sessionToken: recent.token,
+    }).then((sessionResponse) => {
+      return getAuthMethodsAndUser(sessionResponse.session);
+    });
+  }
+
+  const branding = await getBrandingSettings(organization);
+
+  const loginSettings = await getLoginSettings(
+    sessionWithData.factors?.user?.organizationId,
+  );
+
+  const { valid } = isSessionValid(sessionWithData);
+
+  const params = new URLSearchParams({
+    initial: "true", // defines that a code is not required and is therefore not shown in the UI
+  });
+
+  // if (sessionWithData?.factors?.user?.id) {
+  //   params.set("userId", sessionWithData.factors.user.id);
+  // }
+
+  if (loginName) {
+    params.set("loginName", loginName);
+  }
+
+  if (organization) {
+    params.set("organization", organization);
+  }
+
+  if (authRequestId) {
+    params.set("authRequestId", authRequestId);
+  }
+
+  return (
+    <DynamicTheme branding={branding}>
+      <div className="flex flex-col items-center space-y-4">
+        <h1>{t("set.title")}</h1>
+
+        <p className="ztdl-p">{t("set.description")}</p>
+
+        {sessionWithData && (
+          <UserAvatar
+            loginName={loginName ?? sessionWithData.factors?.user?.loginName}
+            displayName={sessionWithData.factors?.user?.displayName}
+            showDropdown
+            searchParams={searchParams}
+          ></UserAvatar>
+        )}
+
+        {!(loginName || sessionId) && <Alert>{tError("unknownContext")}</Alert>}
+
+        {!valid && <Alert>{tError("sessionExpired")}</Alert>}
+
+        {loginSettings && sessionWithData && (
+          <ChooseAuthenticatorToSetup
+            authMethods={sessionWithData.authMethods}
+            sessionFactors={sessionWithData.factors}
+            loginSettings={loginSettings}
+            params={params}
+          ></ChooseAuthenticatorToSetup>
+        )}
+
+        <div className="mt-8 flex w-full flex-row items-center">
+          <BackButton />
+          <span className="flex-grow"></span>
+        </div>
+      </div>
+    </DynamicTheme>
+  );
+}

apps/login/src/app/(login)/passkey/set/page.tsx

@@ -15,7 +15,8 @@ export default async function Page({
   const t = await getTranslations({ locale, namespace: "passkey" });
   const tError = await getTranslations({ locale, namespace: "error" });
 
-  const { loginName, prompt, organization, authRequestId } = searchParams;
+  const { loginName, prompt, organization, authRequestId, userId } =
+    searchParams;
 
   const session = await loadMostRecentSession({
     loginName,

apps/login/src/app/(login)/verify/page.tsx

@@ -1,9 +1,6 @@
 import { Alert } from "@/components/alert";
-import { AuthenticatorMethods } from "@/components/authenticator-methods";
 import { DynamicTheme } from "@/components/dynamic-theme";
-import { UserAvatar } from "@/components/user-avatar";
 import { VerifyForm } from "@/components/verify-form";
-import { verifyUser } from "@/lib/server/email";
 import { getBrandingSettings, getUserByID } from "@/lib/zitadel";
 import { HumanUser, User } from "@zitadel/proto/zitadel/user/v2/user_pb";
 import { getLocale, getTranslations } from "next-intl/server";
@@ -13,29 +10,11 @@ export default async function Page({ searchParams }: { searchParams: any }) {
   const t = await getTranslations({ locale, namespace: "verify" });
   const tError = await getTranslations({ locale, namespace: "error" });
 
-  const {
-    userId,
-    loginName,
-    sessionId,
-    code,
-    organization,
-    authRequestId,
-    invite,
-  } = searchParams;
+  const { userId, loginName, code, organization, authRequestId, invite } =
+    searchParams;
 
   const branding = await getBrandingSettings(organization);
 
-  let verifyResponse, error;
-  if (code && userId) {
-    verifyResponse = await verifyUser({
-      code,
-      userId,
-      isInvite: invite === "true",
-    }).catch(() => {
-      error = "Could not verify user";
-    });
-  }
-
   let user: User | undefined;
   let human: HumanUser | undefined;
   if (userId) {
@@ -53,16 +32,16 @@ export default async function Page({ searchParams }: { searchParams: any }) {
     initial: "true", // defines that a code is not required and is therefore not shown in the UI
   });
 
+  if (loginName) {
+    params.set("loginName", loginName);
+  }
+
   if (organization) {
     params.set("organization", organization);
   }
 
   if (authRequestId) {
-    params.set("authRequest", authRequestId);
-  }
-
-  if (sessionId) {
-    params.set("sessionId", sessionId);
+    params.set("authRequestId", authRequestId);
   }
 
   return (
@@ -78,33 +57,13 @@ export default async function Page({ searchParams }: { searchParams: any }) {
             </div>
           </>
         )}
-        {!verifyResponse || !verifyResponse.authMethodTypes ? (
-          <VerifyForm
-            userId={userId}
-            loginName={loginName}
-            code={!error ? code : ""}
-            organization={organization}
-            authRequestId={authRequestId}
-            sessionId={sessionId}
-            isInvite={invite === "true"}
-          />
-        ) : (
-          <>
-            <h1>{t("setup.title")}</h1>
-            <p className="ztdl-p mb-6 block">{t("setup.description")}</p>
-            {user && (
-              <UserAvatar
-                loginName={user.preferredLoginName}
-                displayName={human?.profile?.displayName}
-                showDropdown={false}
-              />
-            )}
-            <AuthenticatorMethods
-              authMethods={verifyResponse.authMethodTypes}
-              params={params}
-            />
-          </>
-        )}
+
+        <VerifyForm
+          userId={userId}
+          code={code}
+          isInvite={invite === "true"}
+          params={params}
+        />
       </div>
     </DynamicTheme>
   );

apps/login/src/components/authenticator-methods.tsx

@@ -1,18 +0,0 @@
-import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { PASSKEYS, PASSWORD } from "./auth-methods";
-
-type Props = {
-  authMethods: AuthenticationMethodType[];
-  params: URLSearchParams;
-};
-
-export function AuthenticatorMethods({ authMethods, params }: Props) {
-  return (
-    <div className="grid grid-cols-1 gap-5 w-full pt-4">
-      {!authMethods.includes(AuthenticationMethodType.PASSWORD) &&
-        PASSWORD(false, "/password/set?" + params)}
-      {!authMethods.includes(AuthenticationMethodType.PASSKEY) &&
-        PASSKEYS(false, "/passkeys/set?" + params)}
-    </div>
-  );
-}

apps/login/src/components/choose-authenticator-to-setup.tsx

@@ -0,0 +1,52 @@
+import { Factors } from "@zitadel/proto/zitadel/session/v2/session_pb";
+import {
+  LoginSettings,
+  PasskeysType,
+} from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import { useTranslations } from "next-intl";
+import { Alert, AlertType } from "./alert";
+import { PASSKEYS, PASSWORD } from "./auth-methods";
+import { UserAvatar } from "./user-avatar";
+
+type Props = {
+  authMethods: AuthenticationMethodType[];
+  params: URLSearchParams;
+  sessionFactors?: Factors;
+  loginSettings: LoginSettings;
+};
+
+export function ChooseAuthenticatorToSetup({
+  authMethods,
+  params,
+  sessionFactors,
+  loginSettings,
+}: Props) {
+  const t = useTranslations("authenticator");
+
+  return (
+    <>
+      {sessionFactors && (
+        <UserAvatar
+          loginName={sessionFactors.user?.loginName}
+          displayName={sessionFactors.user?.displayName}
+          showDropdown
+        ></UserAvatar>
+      )}
+
+      {loginSettings.passkeysType === PasskeysType.ALLOWED &&
+        !loginSettings.allowUsernamePassword && (
+          <Alert type={AlertType.ALERT}>{t("noMethodsAvailable")}</Alert>
+        )}
+
+      <div className="grid grid-cols-1 gap-5 w-full pt-4">
+        {!authMethods.includes(AuthenticationMethodType.PASSWORD) &&
+          loginSettings.allowUsernamePassword &&
+          PASSWORD(false, "/password/set?" + params)}
+        {!authMethods.includes(AuthenticationMethodType.PASSKEY) &&
+          loginSettings.passkeysType === PasskeysType.ALLOWED &&
+          PASSKEYS(false, "/passkeys/set?" + params)}
+      </div>
+    </>
+  );
+}

apps/login/src/components/verify-form.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { Alert } from "@/components/alert";
-import { resendVerification, verifyUser } from "@/lib/server/email";
-import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import {
+  resendVerification,
+  verifyUserAndCreateSession,
+} from "@/lib/server/email";
 import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
+import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { AuthenticatorMethods } from "./authenticator-methods";
 import { Button, ButtonVariants } from "./button";
 import { TextInput } from "./input";
 import { Spinner } from "./spinner";
@@ -18,25 +19,12 @@ type Inputs = {
 
 type Props = {
   userId: string;
-  loginName: string;
-  code: string;
-  organization?: string;
-  authRequestId?: string;
-  sessionId?: string;
+  code?: string;
   isInvite: boolean;
-  verifyError?: string;
+  params: URLSearchParams;
 };
 
-export function VerifyForm({
-  userId,
-  loginName,
-  code,
-  organization,
-  authRequestId,
-  sessionId,
-  isInvite,
-  verifyError,
-}: Props) {
+export function VerifyForm({ userId, code, isInvite, params }: Props) {
   const t = useTranslations("verify");
   const tError = useTranslations("error");
 
@@ -47,36 +35,12 @@ export function VerifyForm({
     },
   });
 
-  const [authMethods, setAuthMethods] = useState<
-    AuthenticationMethodType[] | null
-  >(null);
-
-  const [error, setError] = useState<string>(verifyError || "");
+  const [error, setError] = useState<string>("");
 
   const [loading, setLoading] = useState<boolean>(false);
 
   const router = useRouter();
 
-  const params = new URLSearchParams({
-    userId: userId,
-  });
-
-  if (isInvite) {
-    params.append("initial", "true");
-  }
-  if (loginName) {
-    params.append("loginName", loginName);
-  }
-  if (sessionId) {
-    params.append("sessionId", sessionId);
-  }
-  if (authRequestId) {
-    params.append("authRequestId", authRequestId);
-  }
-  if (organization) {
-    params.append("organization", organization);
-  }
-
   async function resendCode() {
     setLoading(true);
 
@@ -96,12 +60,13 @@ export function VerifyForm({
   async function submitCodeAndContinue(value: Inputs): Promise<boolean | void> {
     setLoading(true);
 
-    const verifyResponse = await verifyUser({
+    const verifyResponse = await verifyUserAndCreateSession({
       code: value.code,
       userId,
       isInvite: isInvite,
     }).catch(() => {
       setError("Could not verify email");
+      setLoading(false);
       return;
     });
 
@@ -110,33 +75,12 @@ export function VerifyForm({
     if (!verifyResponse) {
       setError("Could not verify email");
       return;
-    }
-
-    if (verifyResponse.authMethodTypes) {
-      setAuthMethods(verifyResponse.authMethodTypes);
-      return;
-    }
-
-    // if auth methods fall trough, we complete to login
-    const params = new URLSearchParams({
-      userId: userId,
-      initial: "true", // defines that a code is not required and is therefore not shown in the UI
-    });
-
-    if (organization) {
-      params.set("organization", organization);
-    }
-
-    if (authRequestId && sessionId) {
-      params.set("authRequest", authRequestId);
-      params.set("sessionId", sessionId);
-      return router.push(`/login?` + params);
     } else {
-      return router.push(`/loginname?` + params);
+      router.push("/authenticator/set?" + params);
     }
   }
 
-  return !authMethods ? (
+  return (
     <>
       <h1>{t("verify.title")}</h1>
       <p className="ztdl-p mb-6 block">{t("verify.description")}</p>
@@ -179,12 +123,5 @@ export function VerifyForm({
         </div>
       </form>
     </>
-  ) : (
-    <>
-      <h1>{t("setup.title")}</h1>
-      <p className="ztdl-p mb-6 block">{t("setup.description")}</p>
-
-      <AuthenticatorMethods authMethods={authMethods} params={params} />
-    </>
   );
 }

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

@@ -1,27 +1,31 @@
 "use server";
 
 import {
-  listAuthenticationMethodTypes,
+  getUserByID,
   resendEmailCode,
   resendInviteCode,
   verifyEmail,
   verifyInviteCode,
 } from "@/lib/zitadel";
+import { create } from "@zitadel/client";
+import { ChecksSchema } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
+import { createSessionAndUpdateCookie } from "./cookie";
 
 type VerifyUserByEmailCommand = {
   userId: string;
   code: string;
   isInvite: boolean;
+  authRequestId?: string;
 };
 
-export async function verifyUser(command: VerifyUserByEmailCommand) {
+export async function verifyUserAndCreateSession(
+  command: VerifyUserByEmailCommand,
+) {
   const verifyResponse = command.isInvite
     ? await verifyInviteCode(command.userId, command.code).catch((error) => {
-        console.log(error.code);
         return { error: "Could not verify invite" };
       })
     : await verifyEmail(command.userId, command.code).catch((error) => {
-        console.log(error.code);
         return { error: "Could not verify email" };
       });
 
@@ -29,15 +33,31 @@ export async function verifyUser(command: VerifyUserByEmailCommand) {
     return { error: "Could not verify user" };
   }
 
-  const authMethodResponse = await listAuthenticationMethodTypes(
-    command.userId,
-  );
+  const userResponse = await getUserByID(command.userId);
 
-  if (!authMethodResponse || !authMethodResponse.authMethodTypes) {
-    return { error: "Could not load possible authenticators" };
+  if (!userResponse || !userResponse.user) {
+    return { error: "Could not load user" };
   }
 
-  return { authMethodTypes: authMethodResponse.authMethodTypes };
+  const checks = create(ChecksSchema, {
+    user: {
+      search: {
+        case: "loginName",
+        value: userResponse.user.preferredLoginName,
+      },
+    },
+  });
+
+  const session = await createSessionAndUpdateCookie(
+    checks,
+    undefined,
+    command.authRequestId,
+  );
+
+  return {
+    sessionId: session.id,
+    factors: session.factors,
+  };
 }
 
 type resendVerifyEmailCommand = {