challenge

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

@@ -1,41 +1,68 @@
-import { getSession, server } from "#/lib/zitadel";
+import {
+  getSession,
+  listAuthenticationMethodTypes,
+  server,
+  setSession,
+} from "#/lib/zitadel";
 import Alert, { AlertType } from "#/ui/Alert";
 import LoginPasskey from "#/ui/LoginPasskey";
 import RegisterPasskey from "#/ui/RegisterPasskey";
 import UserAvatar from "#/ui/UserAvatar";
-import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import {
+  SessionCookie,
+  getMostRecentCookieWithLoginname,
+  updateSessionCookie,
+} from "#/utils/cookies";
+import { ChallengeKind } from "@zitadel/server";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const { loginName, prompt } = searchParams;
+  const { loginName } = searchParams;
 
-  const sessionFactors = await loadSession(loginName);
+  const session = await setSessionForPasskeyChallenge(loginName);
 
-  async function loadSession(loginName?: string) {
+  const challenge = session?.challenges?.passkey;
+
+  //   let methods = [];
+  //   if (sessionFactors?.factors?.user?.id) {
+  //     methods = await listAuthenticationMethodTypes(
+  //       sessionFactors.factors.user.id
+  //     );
+
+  //     console.log(methods);
+  //   }
+
+  async function setSessionForPasskeyChallenge(loginName?: string) {
     const recent = await getMostRecentCookieWithLoginname(loginName);
-    return getSession(server, recent.id, recent.token).then((response) => {
-      if (response?.session) {
-        return response.session;
-      }
-    });
-
     console.log(recent);
+    return setSession(server, recent.id, recent.token, undefined, [
+      ChallengeKind.CHALLENGE_KIND_PASSKEY,
+    ]).then((session) => {
+      const sessionCookie: SessionCookie = {
+        id: recent.id,
+        token: session.sessionToken,
+        changeDate: session.changeDate?.toString() ?? "",
+        loginName: session.factors?.user?.loginName ?? "",
+      };
+
+      return updateSessionCookie(sessionCookie.id, sessionCookie).then(() => {
+        return session;
+      });
+    });
   }
-  const title = !!prompt
-    ? "Authenticate with a passkey"
-    : "Use your passkey to confirm it's really you";
-  const description = !!prompt
-    ? "When set up, you will be able to authenticate without a password."
-    : "Your device will ask for your fingerprint, face, or screen lock";
+
+  const title = "Authenticate with a passkey";
+  const description =
+    "Your device will ask for your fingerprint, face, or screen lock";
 
   return (
     <div className="flex flex-col items-center space-y-4">
       <h1>{title}</h1>
 
-      {sessionFactors && (
+      {/* {sessionFactors && (
         <UserAvatar
           loginName={loginName ?? sessionFactors.factors?.user?.loginName}
           displayName={sessionFactors.factors?.user?.displayName}
@@ -51,9 +78,9 @@ export default async function Page({
             username first or provide a loginName as searchParam.
           </Alert>
         </div>
-      )}
+      )} */}
 
-      {sessionFactors?.id && <LoginPasskey sessionId={sessionFactors.id} />}
+      {challenge && <LoginPasskey challenge={challenge} />}
     </div>
   );
 }

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

@@ -1,46 +0,0 @@
-import { getSession, server } from "#/lib/zitadel";
-import Alert from "#/ui/Alert";
-import UserAvatar from "#/ui/UserAvatar";
-import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
-
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Record<string | number | symbol, string | undefined>;
-}) {
-  const { loginName } = searchParams;
-  const sessionFactors = await loadSession(loginName);
-
-  async function loadSession(loginName?: string) {
-    const recent = await getMostRecentCookieWithLoginname(loginName);
-
-    return getSession(server, recent.id, recent.token).then((response) => {
-      if (response?.session) {
-        return response.session;
-      }
-    });
-  }
-
-  return (
-    <div className="flex flex-col items-center space-y-4">
-      <h1>Login with Passkey</h1>
-      <p className="ztdl-p mb-6 block">Authenticate with your passkey device</p>
-      {!sessionFactors && (
-        <div className="py-4">
-          <Alert>
-            Could not get the context of the user. Make sure to enter the
-            username first or provide a loginName as searchParam.
-          </Alert>
-        </div>
-      )}
-
-      {sessionFactors && (
-        <UserAvatar
-          loginName={loginName ?? sessionFactors.factors?.user?.loginName}
-          displayName={sessionFactors.factors?.user?.displayName}
-          showDropdown
-        ></UserAvatar>
-      )}
-    </div>
-  );
-}

apps/login/app/methods/route.ts

@@ -65,6 +65,7 @@ export async function POST(request: NextRequest) {
         createdSession.sessionId,
         createdSession.sessionToken
       ).then((response) => {
+        console.log(response);
         if (response?.session && response.session?.factors?.user?.loginName) {
           const userId = response?.session?.factors?.user?.id;
 

apps/login/lib/zitadel.ts

@@ -22,6 +22,8 @@ import {
   DeleteSessionResponse,
   VerifyPasskeyRegistrationResponse,
   ChallengeKind,
+  LoginSettings,
+  GetLoginSettingsResponse,
 } from "@zitadel/server";
 
 export const zitadelConfig: ZitadelServerOptions = {
@@ -102,20 +104,31 @@ export async function createSession(
         },
         {}
       )
-    : sessionService.createSession({ checks: { user: { loginName } } }, {});
+    : sessionService.createSession(
+        { checks: { user: { loginName } }, domain },
+        {}
+      );
 }
 
 export async function setSession(
   server: ZitadelServer,
   sessionId: string,
   sessionToken: string,
-  password: string
+  password: string | undefined,
+  challenges: ChallengeKind[] | undefined
 ): Promise<SetSessionResponse | undefined> {
   const sessionService = session.getSession(server);
-  return sessionService.setSession(
-    { sessionId, sessionToken, checks: { password: { password } } },
-    {}
-  );
+  return password
+    ? sessionService.setSession(
+        {
+          sessionId,
+          sessionToken,
+          checks: { password: { password } },
+          challenges,
+        },
+        {}
+      )
+    : sessionService.setSession({ sessionId, sessionToken, challenges }, {});
 }
 
 export async function getSession(

apps/login/ui/LoginPasskey.tsx

@@ -6,19 +6,14 @@ import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import { Spinner } from "./Spinner";
 import Alert from "./Alert";
-import { RegisterPasskeyResponse } from "@zitadel/server";
+import { Challenges_Passkey } from "@zitadel/server";
 import { coerceToArrayBuffer, coerceToBase64Url } from "#/utils/base64";
-type Inputs = {};
 
 type Props = {
-  sessionId: string;
+  challenge: Challenges_Passkey;
 };
 
-export default function LoginPasskey({ sessionId }: Props) {
-  const { login, handleSubmit, formState } = useForm<Inputs>({
-    mode: "onBlur",
-  });
-
+export default function LoginPasskey({ challenge }: Props) {
   const [error, setError] = useState<string>("");
 
   const [loading, setLoading] = useState<boolean>(false);
@@ -55,10 +50,10 @@ export default function LoginPasskey({ sessionId }: Props) {
     return response;
   }
 
-  function submitLoginAndContinue(value: Inputs): Promise<boolean | void> {
+  function submitLoginAndContinue(): Promise<boolean | void> {
       navigator.credentials
         .get({
-          publicKey: resp.publicKeyCredentialCreationOptions,
+          publicKey: challenge.publicKeyCredentialRequestOptions,
         })
         .then((assertedCredential: any) => {
           if (assertedCredential) {
@@ -107,8 +102,6 @@ export default function LoginPasskey({ sessionId }: Props) {
     //   return router.push(`/accounts`);
   }
 
-  const { errors } = formState;
-
   return (
     <form className="w-full">
       {error && (
@@ -118,15 +111,7 @@ export default function LoginPasskey({ sessionId }: Props) {
       )}
 
       <div className="mt-8 flex w-full flex-row items-center">
-        {isPrompt ? (
-          <Button
-            type="button"
-            variant={ButtonVariants.Secondary}
-            onClick={() => router.push("/accounts")}
-          >
-            skip
-          </Button>
-        ) : (
+        
           <Button
             type="button"
             variant={ButtonVariants.Secondary}
@@ -134,14 +119,13 @@ export default function LoginPasskey({ sessionId }: Props) {
           >
             back
           </Button>
-        )}
 
         <span className="flex-grow"></span>
         <Button
           type="submit"
           className="self-end"
           variant={ButtonVariants.Primary}
-          disabled={loading || !formState.isValid}
+          disabled={loading}
           onClick={handleSubmit(submitLoginAndContinue)}
         >
           {loading && <Spinner className="h-5 w-5 mr-2" />}