feat(passkeys): register

CONTRIBUTING.md

@@ -51,7 +51,7 @@ docker compose --file ./acceptance/docker-compose.yaml pull
 docker compose --file ./acceptance/docker-compose.yaml run setup
 
 # Configure your shell to use the environment variables written to ./apps/login/.env.acceptance
-source ./apps/login/.env.acceptance
+export $(cat ./apps/login/.env.acceptance | xargs)
 ```
 
 ### Developing Against Your ZITADEL Cloud Instance

acceptance/docker-compose.yaml

@@ -1,49 +1,54 @@
-version: '3.8'
+version: "3.8"
 
 services:
   zitadel:
-    user: '${ZITADEL_DEV_UID}'
-    image: '${ZITADEL_IMAGE:-ghcr.io/zitadel/zitadel:latest}'
+    user: "${ZITADEL_DEV_UID}"
+    image: "${ZITADEL_IMAGE:-ghcr.io/zitadel/zitadel:latest}"
     command: 'start-from-init --masterkey "MasterkeyNeedsToHave32Characters" --tlsMode disabled --config /zitadel.yaml --steps /zitadel.yaml'
     ports:
-    - "8080:8080"
+      - "8080:8080"
     volumes:
       - ./machinekey:/machinekey
       - ./zitadel.yaml:/zitadel.yaml
     depends_on:
       db:
-        condition: 'service_healthy'
+        condition: "service_healthy"
 
   db:
-    image: 'cockroachdb/cockroach:v22.2.2'
-    command: 'start-single-node --insecure --http-addr :9090'
+    image: "cockroachdb/cockroach:v22.2.2"
+    command: "start-single-node --insecure --http-addr :9090"
     healthcheck:
-      test: ['CMD', 'curl', '-f', 'http://localhost:9090/health?ready=1']
-      interval: '10s'
-      timeout: '30s'
+      test: ["CMD", "curl", "-f", "http://localhost:9090/health?ready=1"]
+      interval: "10s"
+      timeout: "30s"
       retries: 5
-      start_period: '20s'
+      start_period: "20s"
     ports:
       - "26257:26257"
       - "9090:9090"
 
   wait_for_zitadel:
     image: curlimages/curl:8.00.1
-    command: [ "/bin/sh", "-c", "i=0; while ! curl http://zitadel:8080/debug/ready && [ $$i -lt 30 ]; do sleep 1; i=$$((i+1)); done; [ $$i -eq 30 ] && exit 1 || exit 0" ]
+    command:
+      [
+        "/bin/sh",
+        "-c",
+        "i=0; while ! curl http://zitadel:8080/debug/ready && [ $$i -lt 30 ]; do sleep 1; i=$$((i+1)); done; [ $$i -eq 30 ] && exit 1 || exit 0",
+      ]
     depends_on:
       - zitadel
 
   setup:
-    user: '${ZITADEL_DEV_UID}'
+    user: "${ZITADEL_DEV_UID}"
     container_name: setup
     build: .
     environment:
       KEY: /key/zitadel-admin-sa.json
       SERVICE: http://zitadel:8080
-      WRITE_ENVIRONMENT_FILE: /apps/login/.env.local
+      WRITE_ENVIRONMENT_FILE: /apps/login/.env.acceptance
     volumes:
-    - "./machinekey:/key"
-    - "../apps/login:/apps/login"
+      - "./machinekey:/key"
+      - "../apps/login:/apps/login"
     depends_on:
       wait_for_zitadel:
-        condition: 'service_completed_successfully'
+        condition: "service_completed_successfully"

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

@@ -22,7 +22,6 @@ async function loadSessions(): Promise<Session[]> {
 
 export default async function Page() {
   let sessions = await loadSessions();
-
   return (
     <div className="flex flex-col items-center space-y-4">
       <h1>Accounts</h1>

apps/login/app/(login)/error.tsx

@@ -10,7 +10,7 @@ export default function Error({ error, reset }: any) {
   }, [error]);
 
   return (
-    <Boundary labels={["Home page Error UI"]} color="red">
+    <Boundary labels={["Login Error"]} color="red">
       <div className="space-y-4">
         <div className="text-sm text-red-500 dark:text-red-500">
           <strong className="font-bold">Error:</strong> {error?.message}

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

@@ -0,0 +1,72 @@
+import { getSession, server } from "#/lib/zitadel";
+import Alert, { AlertType } from "#/ui/Alert";
+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>
+
+      <Alert type={AlertType.INFO}>
+        <span>
+          A passkey is an authentication method on a device like your
+          fingerprint, Apple FaceID or similar.
+          <a
+            className="text-primary-light-500 dark:text-primary-dark-500 hover:text-primary-light-300 hover:dark:text-primary-dark-300"
+            target="_blank"
+            href="https://zitadel.com/docs/guides/manage/user/reg-create-user#with-passwordless"
+          >
+            Passwordless Authentication
+          </a>
+        </span>
+      </Alert>
+
+      {!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 && (
+        <RegisterPasskey sessionId={sessionFactors.id} isPrompt={!!prompt} />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+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/(login)/password/page.tsx

@@ -38,7 +38,7 @@ export default async function Page({
 
       {sessionFactors && (
         <UserAvatar
-          loginName={loginName ?? sessionFactors.factors?.user?.loginName ?? ""}
+          loginName={loginName ?? sessionFactors.factors?.user?.loginName}
           displayName={sessionFactors.factors?.user?.displayName}
           showDropdown
         ></UserAvatar>