prompt when loginsetting, escape prompt when alt

apps/login/ui/LoginPasskey.tsx

@@ -11,9 +11,14 @@ import { Spinner } from "./Spinner";
 type Props = {
   loginName: string;
   challenge: Challenges_Passkey;
+  altPassword: boolean;
 };
 
-export default function LoginPasskey({ loginName, challenge }: Props) {
+export default function LoginPasskey({
+  loginName,
+  challenge,
+  altPassword,
+}: Props) {
   const [error, setError] = useState<string>("");
   const [publicKey, setPublicKey] = useState();
   const [loading, setLoading] = useState<boolean>(false);
@@ -133,7 +138,9 @@ export default function LoginPasskey({ loginName, challenge }: Props) {
               },
             });
             console.log(data);
-            return submitLogin(data);
+            return submitLogin(data).then(() => {
+              return router.push(`/accounts`);
+            });
           } else {
             setLoading(false);
             setError("An error on retrieving passkey");
@@ -157,13 +164,27 @@ export default function LoginPasskey({ loginName, challenge }: Props) {
         </div>
       )}
       <div className="mt-8 flex w-full flex-row items-center">
-        <Button
-          type="button"
-          variant={ButtonVariants.Secondary}
-          onClick={() => router.back()}
-        >
-          back
-        </Button>
+        {altPassword ? (
+          <Button
+            type="button"
+            variant={ButtonVariants.Secondary}
+            onClick={() =>
+              router.push(
+                "/password?" + new URLSearchParams({ loginName, alt: "true" }) // alt is set because password is requested as alternative auth method, so passwordless prompt can be escaped
+              )
+            }
+          >
+            use password
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            variant={ButtonVariants.Secondary}
+            onClick={() => router.back()}
+          >
+            back
+          </Button>
+        )}
 
         <span className="flex-grow"></span>
         <Button

apps/login/ui/PasswordForm.tsx

@@ -14,9 +14,15 @@ type Inputs = {
 
 type Props = {
   loginName?: string;
+  isAlternative?: boolean; // whether password was requested as alternative auth method
+  promptPasswordless?: boolean;
 };
 
-export default function PasswordForm({ loginName }: Props) {
+export default function PasswordForm({
+  loginName,
+  promptPasswordless,
+  isAlternative,
+}: Props) {
   const { register, handleSubmit, formState } = useForm<Inputs>({
     mode: "onBlur",
   });
@@ -53,12 +59,17 @@ export default function PasswordForm({ loginName }: Props) {
 
   function submitPasswordAndContinue(value: Inputs): Promise<boolean | void> {
     return submitPassword(value).then((resp: any) => {
-      if (resp.factors && !resp.factors.passwordless) {
+      if (
+        resp.factors &&
+        !resp.factors.passwordless && // if session was not verified with a passkey
+        promptPasswordless && // if explicitly prompted due policy
+        !isAlternative // escaped if password was used as an alternative method
+      ) {
         return router.push(
           `/passkey/add?` +
             new URLSearchParams({
               loginName: resp.factors.user.loginName,
-              prompt: "true",
+              promptPasswordless: "true",
             })
         );
       } else {

apps/login/ui/SessionItem.tsx

@@ -51,9 +51,10 @@ export default function SessionItem({
             new URLSearchParams({
               loginName: session.factors?.user?.loginName as string,
             })
-          : `/password?` +
+          : `/loginname?` +
             new URLSearchParams({
               loginName: session.factors?.user?.loginName as string,
+              submit: "true",
             })
       }
       className="group flex flex-row items-center bg-background-light-400 dark:bg-background-dark-400  border border-divider-light hover:shadow-lg dark:hover:bg-white/10 py-2 px-4 rounded-md transition-all"

apps/login/ui/UsernameForm.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button, ButtonVariants } from "./Button";
 import { TextInput } from "./Input";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import { Spinner } from "./Spinner";
-import { AuthenticationMethodType, LoginSettings } from "@zitadel/server";
+import { LoginSettings } from "@zitadel/server";
 
 type Inputs = {
   loginName: string;
@@ -15,9 +15,14 @@ type Inputs = {
 type Props = {
   loginSettings: LoginSettings | undefined;
   loginName: string | undefined;
+  submit: boolean;
 };
 
-export default function UsernameForm({ loginSettings, loginName }: Props) {
+export default function UsernameForm({
+  loginSettings,
+  loginName,
+  submit,
+}: Props) {
   const { register, handleSubmit, formState } = useForm<Inputs>({
     mode: "onBlur",
     defaultValues: {
@@ -28,6 +33,7 @@ export default function UsernameForm({ loginSettings, loginName }: Props) {
   const router = useRouter();
 
   const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
 
   async function submitLoginName(values: Inputs) {
     setLoading(true);
@@ -50,14 +56,20 @@ export default function UsernameForm({ loginSettings, loginName }: Props) {
 
   async function setLoginNameAndGetAuthMethods(values: Inputs) {
     return submitLoginName(values).then((response) => {
-      console.log(response);
       if (response.authMethodTypes.length == 1) {
         const method = response.authMethodTypes[0];
         switch (method) {
           case 1: //AuthenticationMethodType.AUTHENTICATION_METHOD_TYPE_PASSWORD:
             return router.push(
               "/password?" +
-                new URLSearchParams({ loginName: values.loginName })
+                new URLSearchParams(
+                  loginSettings?.passkeysType === 1
+                    ? {
+                        loginName: values.loginName,
+                        promptPasswordless: `true`, // PasskeysType.PASSKEYS_TYPE_ALLOWED,
+                      }
+                    : { loginName: values.loginName }
+                )
             );
           case 2: // AuthenticationMethodType.AUTHENTICATION_METHOD_TYPE_PASSKEY
             return router.push(
@@ -67,16 +79,47 @@ export default function UsernameForm({ loginSettings, loginName }: Props) {
           default:
             return router.push(
               "/password?" +
-                new URLSearchParams({ loginName: values.loginName })
+                new URLSearchParams(
+                  loginSettings?.passkeysType === 1
+                    ? {
+                        loginName: values.loginName,
+                        promptPasswordless: `true`, // PasskeysType.PASSKEYS_TYPE_ALLOWED,
+                      }
+                    : { loginName: values.loginName }
+                )
             );
         }
+      } else if (
+        response.authMethodTypes &&
+        response.authMethodTypes.length === 0
+      ) {
+        setError(
+          "User has no available authentication methods. Contact your administrator to setup authentication for the requested user."
+        );
       } else {
+        // prefer passkey in favor of other methods
+        if (response.authMethodTypes.includes(2)) {
+          return router.push(
+            "/passkey/login?" +
+              new URLSearchParams({
+                loginName: values.loginName,
+                altPassword: `${response.authMethodTypes.includes(1)}`, // show alternative password option
+              })
+          );
+        }
       }
     });
   }
 
   const { errors } = formState;
 
+  useEffect(() => {
+    if (submit && loginName) {
+      // When we navigate to this page, we always want to be redirected if submit is true and the parameters are valid.
+      setLoginNameAndGetAuthMethods({ loginName });
+    }
+  }, []);
+
   return (
     <form className="w-full">
       <div className="">