From 54388e4d8fd85aa6f4090981e593d6aa79a9bc09 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Mon, 3 Jul 2023 17:05:55 +0200
Subject: [PATCH] prompt when loginsetting, escape prompt when alt

---
 apps/login/app/(login)/loginname/page.tsx     |  7 ++-
 apps/login/app/(login)/passkey/login/page.tsx | 30 ++--------
 apps/login/app/(login)/password/page.tsx      |  8 ++-
 apps/login/app/api/loginname/route.ts         |  7 +--
 apps/login/app/api/session/route.ts           |  9 ++-
 apps/login/ui/LoginPasskey.tsx                | 39 ++++++++++---
 apps/login/ui/PasswordForm.tsx                | 17 +++++-
 apps/login/ui/SessionItem.tsx                 |  3 +-
 apps/login/ui/UsernameForm.tsx                | 55 +++++++++++++++++--
 apps/login/utils/session.ts                   |  4 --
 10 files changed, 122 insertions(+), 57 deletions(-)

diff --git a/apps/login/app/(login)/loginname/page.tsx b/apps/login/app/(login)/loginname/page.tsx
index c62ce175a10..735ce1854ff 100644
--- a/apps/login/app/(login)/loginname/page.tsx
+++ b/apps/login/app/(login)/loginname/page.tsx
@@ -7,6 +7,7 @@ export default async function Page({
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
   const loginName = searchParams?.loginName;
+  const submit: boolean = searchParams?.submit === "true";
 
   const loginSettings = await getLoginSettings(server);
 
@@ -15,7 +16,11 @@ export default async function Page({
       <h1>Welcome back!</h1>
       <p className="ztdl-p">Enter your login data.</p>
 
-      <UsernameForm loginSettings={loginSettings} loginName={loginName} />
+      <UsernameForm
+        loginSettings={loginSettings}
+        loginName={loginName}
+        submit={submit}
+      />
     </div>
   );
 }
diff --git a/apps/login/app/(login)/passkey/login/page.tsx b/apps/login/app/(login)/passkey/login/page.tsx
index 8ce7c51d3d6..e57c5d50f66 100644
--- a/apps/login/app/(login)/passkey/login/page.tsx
+++ b/apps/login/app/(login)/passkey/login/page.tsx
@@ -3,28 +3,6 @@ import Alert from "#/ui/Alert";
 import LoginPasskey from "#/ui/LoginPasskey";
 import UserAvatar from "#/ui/UserAvatar";
 import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
-// import LoginPasskey from "#/ui/LoginPasskey";
-// import {
-//   SessionCookie,
-//   getMostRecentSessionCookie,
-//   getSessionCookieByLoginName,
-// } from "#/utils/cookies";
-// import { setSessionAndUpdateCookie } from "#/utils/session";
-// import { ChallengeKind } from "@zitadel/server";
-
-// async function updateSessionAndCookie(loginName: string) {
-//   return getSessionCookieByLoginName(loginName).then((recent) => {
-//     console.log(recent.token);
-//     return setSessionAndUpdateCookie(
-//       recent.id,
-//       recent.token,
-//       recent.loginName,
-//       undefined,
-//       "localhost",
-//       [ChallengeKind.CHALLENGE_KIND_PASSKEY]
-//     );
-//   });
-// }
 
 const title = "Authenticate with a passkey";
 const description =
@@ -35,7 +13,7 @@ export default async function Page({
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const { loginName } = searchParams;
+  const { loginName, altPassword } = searchParams;
 
   const sessionFactors = await loadSession(loginName);
 
@@ -68,7 +46,11 @@ export default async function Page({
       )}
 
       {loginName && (
-        <LoginPasskey challenge={{} as any} loginName={loginName} />
+        <LoginPasskey
+          challenge={{} as any}
+          loginName={loginName}
+          altPassword={altPassword === "true"}
+        />
       )}
     </div>
   );
diff --git a/apps/login/app/(login)/password/page.tsx b/apps/login/app/(login)/password/page.tsx
index dbd0bcdc42f..0ea96aa6856 100644
--- a/apps/login/app/(login)/password/page.tsx
+++ b/apps/login/app/(login)/password/page.tsx
@@ -9,7 +9,7 @@ export default async function Page({
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const { loginName } = searchParams;
+  const { loginName, promptPasswordless, alt } = searchParams;
   const sessionFactors = await loadSession(loginName);
 
   async function loadSession(loginName?: string) {
@@ -44,7 +44,11 @@ export default async function Page({
         ></UserAvatar>
       )}
 
-      <PasswordForm loginName={loginName} />
+      <PasswordForm
+        loginName={loginName}
+        promptPasswordless={promptPasswordless === "true"}
+        isAlternative={alt === "true"}
+      />
     </div>
   );
 }
diff --git a/apps/login/app/api/loginname/route.ts b/apps/login/app/api/loginname/route.ts
index 8c77c65bdd4..1fa251e70d5 100644
--- a/apps/login/app/api/loginname/route.ts
+++ b/apps/login/app/api/loginname/route.ts
@@ -1,14 +1,9 @@
 import {
-  createSession,
   getSession,
   listAuthenticationMethodTypes,
   server,
 } from "#/lib/zitadel";
-import {
-  SessionCookie,
-  addSessionToCookie,
-  getSessionCookieById,
-} from "#/utils/cookies";
+import { getSessionCookieById } from "#/utils/cookies";
 import { createSessionAndUpdateCookie } from "#/utils/session";
 import { NextRequest, NextResponse } from "next/server";
 
diff --git a/apps/login/app/api/session/route.ts b/apps/login/app/api/session/route.ts
index 0721e196c2e..668c52940f6 100644
--- a/apps/login/app/api/session/route.ts
+++ b/apps/login/app/api/session/route.ts
@@ -19,7 +19,14 @@ export async function POST(request: NextRequest) {
 
     const domain: string = request.nextUrl.hostname;
 
-    return createSessionAndUpdateCookie(loginName, password, domain, undefined);
+    return createSessionAndUpdateCookie(
+      loginName,
+      password,
+      domain,
+      undefined
+    ).then((session) => {
+      return NextResponse.json(session);
+    });
   } else {
     return NextResponse.json(
       { details: "Session could not be created" },
diff --git a/apps/login/ui/LoginPasskey.tsx b/apps/login/ui/LoginPasskey.tsx
index 2140161a31a..1dbb247a33e 100644
--- a/apps/login/ui/LoginPasskey.tsx
+++ b/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
diff --git a/apps/login/ui/PasswordForm.tsx b/apps/login/ui/PasswordForm.tsx
index a31f908f708..e547e801165 100644
--- a/apps/login/ui/PasswordForm.tsx
+++ b/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 {
diff --git a/apps/login/ui/SessionItem.tsx b/apps/login/ui/SessionItem.tsx
index ecac0b89672..3214ea99c0a 100644
--- a/apps/login/ui/SessionItem.tsx
+++ b/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"
diff --git a/apps/login/ui/UsernameForm.tsx b/apps/login/ui/UsernameForm.tsx
index c62199dbaa9..729b418edf5 100644
--- a/apps/login/ui/UsernameForm.tsx
+++ b/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="">
diff --git a/apps/login/utils/session.ts b/apps/login/utils/session.ts
index 88703c08bce..0f416b0c500 100644
--- a/apps/login/utils/session.ts
+++ b/apps/login/utils/session.ts
@@ -37,10 +37,6 @@ export async function createSessionAndUpdateCookie(
 
         return addSessionToCookie(sessionCookie).then(() => {
           return response.session as Session;
-          //     {
-          //     sessionId: createdSession.sessionId,
-          //     factors: response?.session?.factors,
-          //   });
         });
       } else {
         throw "could not get session or session does not have loginName";