Merge branch 'passkey-login' into passkey-registration

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

@@ -0,0 +1,57 @@
+import { getSession, server } 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";
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+}) {
+  const { loginName, prompt } = 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;
+      }
+    });
+  }
+  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";
+
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      <h1>{title}</h1>
+
+      {sessionFactors && (
+        <UserAvatar
+          loginName={loginName ?? sessionFactors.factors?.user?.loginName}
+          displayName={sessionFactors.factors?.user?.displayName}
+          showDropdown
+        ></UserAvatar>
+      )}
+      <p className="ztdl-p mb-6 block">{description}</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?.id && <LoginPasskey sessionId={sessionFactors.id} />}
+    </div>
+  );
+}

apps/login/app/passkeys/route.ts

@@ -20,13 +20,15 @@ export async function POST(request: NextRequest) {
       sessionCookie.token
     );
 
+    const domain: string = request.nextUrl.hostname;
+
     const userId = session?.session?.factors?.user?.id;
 
     if (userId) {
       return createPasskeyRegistrationLink(userId)
         .then((resp) => {
           const code = resp.code;
-          return registerPasskey(userId, code).then((resp) => {
+          return registerPasskey(userId, code, domain).then((resp) => {
             return NextResponse.json(resp);
           });
         })

apps/login/app/session/route.ts

@@ -20,7 +20,15 @@ export async function POST(request: NextRequest) {
   if (body) {
     const { loginName, password } = body;
 
-    const createdSession = await createSession(server, loginName, password);
+    const domain: string = request.nextUrl.hostname;
+
+    const createdSession = await createSession(
+      server,
+      loginName,
+      password,
+      domain
+    );
+
     if (createdSession) {
       return getSession(
         server,

apps/login/lib/zitadel.ts

@@ -78,12 +78,13 @@ export async function getPasswordComplexitySettings(
 export async function createSession(
   server: ZitadelServer,
   loginName: string,
-  password: string | undefined
+  password: string | undefined,
+  domain: string
 ): Promise<CreateSessionResponse | undefined> {
   const sessionService = session.getSession(server);
   return password
     ? sessionService.createSession(
-        { checks: { user: { loginName }, password: { password } } },
+        { checks: { user: { loginName }, password: { password } }, domain },
         {}
       )
     : sessionService.createSession({ checks: { user: { loginName } } }, {});
@@ -236,6 +237,7 @@ export async function verifyPasskeyRegistration(
     {
       passkeyId,
       passkeyName,
+
       publicKeyCredential,
       userId,
     },
@@ -251,12 +253,15 @@ export async function verifyPasskeyRegistration(
  */
 export async function registerPasskey(
   userId: string,
-  code: { id: string; code: string }
+  code: { id: string; code: string },
+  domain: string
 ): Promise<any> {
   const userservice = user.getUser(server);
   return userservice.registerPasskey({
     userId,
     code,
+    domain,
+    // authenticator:
   });
 }
 

apps/login/ui/LoginPasskey.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import { Button, ButtonVariants } from "./Button";
+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 { coerceToArrayBuffer, coerceToBase64Url } from "#/utils/base64";
+type Inputs = {};
+
+type Props = {
+  sessionId: string;
+};
+
+export default function LoginPasskey({ sessionId }: Props) {
+  const { login, handleSubmit, formState } = useForm<Inputs>({
+    mode: "onBlur",
+  });
+
+  const [error, setError] = useState<string>("");
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const router = useRouter();
+
+  async function submitLogin(
+    passkeyId: string,
+    passkeyName: string,
+    publicKeyCredential: any,
+    sessionId: string
+  ) {
+    setLoading(true);
+    const res = await fetch("/passkeys/verify", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        passkeyId,
+        passkeyName,
+        publicKeyCredential,
+        sessionId,
+      }),
+    });
+
+    const response = await res.json();
+
+    setLoading(false);
+    if (!res.ok) {
+      setError(response.details);
+      return Promise.reject(response.details);
+    }
+    return response;
+  }
+
+  function submitLoginAndContinue(value: Inputs): Promise<boolean | void> {
+      navigator.credentials
+        .get({
+          publicKey: resp.publicKeyCredentialCreationOptions,
+        })
+        .then((assertedCredential: any) => {
+          if (assertedCredential) {
+            let authData = new Uint8Array(
+              assertedCredential.response.authenticatorData
+            );
+            let clientDataJSON = new Uint8Array(
+              assertedCredential.response.clientDataJSON
+            );
+            let rawId = new Uint8Array(assertedCredential.rawId);
+            let sig = new Uint8Array(assertedCredential.response.signature);
+            let userHandle = new Uint8Array(
+              assertedCredential.response.userHandle
+            );
+
+            let data = JSON.stringify({
+              id: assertedCredential.id,
+              rawId: coerceToBase64Url(rawId, "rawId"),
+              type: assertedCredential.type,
+              response: {
+                authenticatorData: coerceToBase64Url(authData, "authData"),
+                clientDataJSON: coerceToBase64Url(
+                  clientDataJSON,
+                  "clientDataJSON"
+                ),
+                signature: coerceToBase64Url(sig, "sig"),
+                userHandle: coerceToBase64Url(userHandle, "userHandle"),
+              },
+            });
+
+            return submitLogin(passkeyId, "", data, sessionId);
+          } else {
+            setLoading(false);
+            setError("An error on retrieving passkey");
+            return null;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+          setLoading(false);
+          //   setError(error);
+
+          return null;
+        });
+    }
+    //   return router.push(`/accounts`);
+  }
+
+  const { errors } = formState;
+
+  return (
+    <form className="w-full">
+      {error && (
+        <div className="py-4">
+          <Alert>{error}</Alert>
+        </div>
+      )}
+
+      <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}
+            onClick={() => router.back()}
+          >
+            back
+          </Button>
+        )}
+
+        <span className="flex-grow"></span>
+        <Button
+          type="submit"
+          className="self-end"
+          variant={ButtonVariants.Primary}
+          disabled={loading || !formState.isValid}
+          onClick={handleSubmit(submitLoginAndContinue)}
+        >
+          {loading && <Spinner className="h-5 w-5 mr-2" />}
+          continue
+        </Button>
+      </div>
+    </form>
+  );
+}

apps/login/ui/RegisterPasskey.tsx

@@ -95,7 +95,7 @@ export default function RegisterPasskey({ sessionId, isPrompt }: Props) {
         resp.publicKeyCredentialCreationOptions.publicKey.user.id =
           coerceToArrayBuffer(
             resp.publicKeyCredentialCreationOptions.publicKey.user.id,
-            "challenge"
+            "userid"
           );
         if (
           resp.publicKeyCredentialCreationOptions.publicKey.excludeCredentials
@@ -140,7 +140,9 @@ export default function RegisterPasskey({ sessionId, isPrompt }: Props) {
                   ),
                 },
               };
-              return submitVerify(passkeyId, "", data, sessionId);
+              return submitVerify(passkeyId, "", data, sessionId).then(() => {
+                router.push("/accounts");
+              });
             } else {
               setLoading(false);
               setError("An error on registering passkey");