UI component, route, zitadel server functions

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

@@ -0,0 +1,52 @@
+import { getSession, server } from "#/lib/zitadel";
+import Alert from "#/ui/Alert";
+import RegisterPasskey from "#/ui/RegisterPasskey";
+import UserAvatar from "#/ui/UserAvatar";
+import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import { useRouter } from "next/navigation";
+
+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;
+      }
+    });
+  }
+
+  console.log(sessionFactors);
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      <h1>Register Passkey</h1>
+      <p className="ztdl-p mb-6 block">Setup your device for passkeys.</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>
+      )}
+
+      {sessionFactors?.id && <RegisterPasskey sessionId={sessionFactors.id} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { getSession, server } from "#/lib/zitadel";
+import Alert from "#/ui/Alert";
+import UserAvatar from "#/ui/UserAvatar";
+import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import { useRouter } from "next/navigation";
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+}) {
+  const router = useRouter();
+
+  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)/passwordless/create/page.tsx

@@ -1,35 +0,0 @@
-"use client";
-import { Button, ButtonVariants } from "#/ui/Button";
-import { TextInput } from "#/ui/Input";
-import UserAvatar from "#/ui/UserAvatar";
-import { useRouter } from "next/navigation";
-
-export default function Page() {
-  const router = useRouter();
-
-  return (
-    <div className="flex flex-col items-center space-y-4">
-      <h1>Password</h1>
-      <p className="ztdl-p mb-6 block">Enter your password.</p>
-
-      <UserAvatar
-        showDropdown
-        displayName="Max Peintner"
-        loginName="max@zitadel.com"
-      ></UserAvatar>
-
-      <div className="w-full">
-        <TextInput type="password" label="Password" />
-      </div>
-      <div className="flex w-full flex-row items-center justify-between">
-        <Button
-          onClick={() => router.back()}
-          variant={ButtonVariants.Secondary}
-        >
-          back
-        </Button>
-        <Button variant={ButtonVariants.Primary}>continue</Button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,35 +0,0 @@
-"use client";
-import { Button, ButtonVariants } from "#/ui/Button";
-import { TextInput } from "#/ui/Input";
-import UserAvatar from "#/ui/UserAvatar";
-import { useRouter } from "next/navigation";
-
-export default function Page() {
-  const router = useRouter();
-
-  return (
-    <div className="flex flex-col items-center space-y-4">
-      <h1>Password</h1>
-      <p className="ztdl-p mb-6 block">Enter your password.</p>
-
-      <UserAvatar
-        showDropdown
-        displayName="Max Peintner"
-        loginName="max@zitadel.com"
-      ></UserAvatar>
-
-      <div className="w-full">
-        <TextInput type="password" label="Password" />
-      </div>
-      <div className="flex w-full flex-row items-center justify-between">
-        <Button
-          onClick={() => router.back()}
-          variant={ButtonVariants.Secondary}
-        >
-          back
-        </Button>
-        <Button variant={ButtonVariants.Primary}>continue</Button>
-      </div>
-    </div>
-  );
-}

apps/login/app/passkeys/route.ts

@@ -0,0 +1,26 @@
+import {
+  createPasskeyRegistrationLink,
+  getSession,
+  server,
+} from "#/lib/zitadel";
+import { getSessionCookieById } from "#/utils/cookies";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  const body = await request.json();
+  if (body) {
+    const { sessionId } = body;
+
+    const session = await getSessionCookieById(sessionId);
+
+    return createPasskeyRegistrationLink(server, session.id, session.token)
+      .then((resp) => {
+        return NextResponse.json(resp);
+      })
+      .catch((error) => {
+        return NextResponse.json(error, { status: 500 });
+      });
+  } else {
+    return NextResponse.json({}, { status: 500 });
+  }
+}

apps/login/lib/demos.ts

@@ -48,11 +48,11 @@ export const demos: { name: string; items: Item[] }[] = [
       //     slug: "passwordless",
       //     description: "The page to login a user with his passwordless device",
       //   },
-      //   {
-      //     name: "Passwordless Create",
-      //     slug: "passwordless/create",
-      //     description: "The page to add a users passwordless device",
-      //   },
+      {
+        name: "Passkey Registration",
+        slug: "passkey/add",
+        description: "The page to add a users passkey device",
+      },
     ],
   },
   {

apps/login/lib/zitadel.ts

@@ -20,6 +20,7 @@ import {
   VerifyEmailResponse,
   SetSessionResponse,
   DeleteSessionResponse,
+  VerifyPasskeyRegistrationResponse,
 } from "@zitadel/server";
 
 export const zitadelConfig: ZitadelServerOptions = {
@@ -35,7 +36,7 @@ if (!getServers().length) {
   server = initializeServer(zitadelConfig);
 }
 
-export function getBrandingSettings(
+export async function getBrandingSettings(
   server: ZitadelServer
 ): Promise<BrandingSettings | undefined> {
   const settingsService = settings.getSettings(server);
@@ -44,7 +45,7 @@ export function getBrandingSettings(
     .then((resp: GetBrandingSettingsResponse) => resp.settings);
 }
 
-export function getGeneralSettings(
+export async function getGeneralSettings(
   server: ZitadelServer
 ): Promise<string[] | undefined> {
   const settingsService = settings.getSettings(server);
@@ -53,7 +54,7 @@ export function getGeneralSettings(
     .then((resp: GetGeneralSettingsResponse) => resp.supportedLanguages);
 }
 
-export function getLegalAndSupportSettings(
+export async function getLegalAndSupportSettings(
   server: ZitadelServer
 ): Promise<LegalAndSupportSettings | undefined> {
   const settingsService = settings.getSettings(server);
@@ -64,7 +65,7 @@ export function getLegalAndSupportSettings(
     });
 }
 
-export function getPasswordComplexitySettings(
+export async function getPasswordComplexitySettings(
   server: ZitadelServer
 ): Promise<PasswordComplexitySettings | undefined> {
   const settingsService = settings.getSettings(server);
@@ -74,7 +75,7 @@ export function getPasswordComplexitySettings(
     .then((resp: GetPasswordComplexitySettingsResponse) => resp.settings);
 }
 
-export function createSession(
+export async function createSession(
   server: ZitadelServer,
   loginName: string
 ): Promise<CreateSessionResponse | undefined> {
@@ -82,7 +83,7 @@ export function createSession(
   return sessionService.createSession({ checks: { user: { loginName } } }, {});
 }
 
-export function setSession(
+export async function setSession(
   server: ZitadelServer,
   sessionId: string,
   sessionToken: string,
@@ -95,7 +96,7 @@ export function setSession(
   );
 }
 
-export function getSession(
+export async function getSession(
   server: ZitadelServer,
   sessionId: string,
   sessionToken: string
@@ -104,7 +105,7 @@ export function getSession(
   return sessionService.getSession({ sessionId, sessionToken }, {});
 }
 
-export function deleteSession(
+export async function deleteSession(
   server: ZitadelServer,
   sessionId: string,
   sessionToken: string
@@ -113,7 +114,7 @@ export function deleteSession(
   return sessionService.deleteSession({ sessionId, sessionToken }, {});
 }
 
-export function listSessions(
+export async function listSessions(
   server: ZitadelServer,
   ids: string[]
 ): Promise<ListSessionsResponse | undefined> {
@@ -130,7 +131,7 @@ export type AddHumanUserData = {
   password: string;
 };
 
-export function addHumanUser(
+export async function addHumanUser(
   server: ZitadelServer,
   { email, firstName, lastName, password }: AddHumanUserData
 ): Promise<string> {
@@ -150,7 +151,7 @@ export function addHumanUser(
     });
 }
 
-export function verifyEmail(
+export async function verifyEmail(
   server: ZitadelServer,
   userId: string,
   verificationCode: string
@@ -171,7 +172,10 @@ export function verifyEmail(
  * @param userId the id of the user where the email should be set
  * @returns the newly set email
  */
-export function setEmail(server: ZitadelServer, userId: string): Promise<any> {
+export async function setEmail(
+  server: ZitadelServer,
+  userId: string
+): Promise<any> {
   const userservice = user.getUser(server);
   return userservice.setEmail(
     {
@@ -181,4 +185,67 @@ export function setEmail(server: ZitadelServer, userId: string): Promise<any> {
   );
 }
 
+/**
+ *
+ * @param server
+ * @param userId the id of the user where the email should be set
+ * @returns the newly set email
+ */
+export async function registerPasskey(
+  server: ZitadelServer,
+  userId: string
+): Promise<any> {
+  const userservice = user.getUser(server);
+  return userservice.registerPasskey(
+    {
+      userId,
+    },
+    {}
+  );
+}
+
+/**
+ *
+ * @param server
+ * @param userId the id of the user where the email should be set
+ * @returns the newly set email
+ */
+export async function createPasskeyRegistrationLink(
+  server: ZitadelServer,
+  userId: string
+): Promise<any> {
+  const userservice = user.getUser(server);
+  return userservice.createPasskeyRegistrationLink(
+    {
+      userId,
+      //   returnCode: new ReturnPasskeyRegistrationCode(),
+    },
+    {}
+  );
+}
+
+/**
+ *
+ * @param server
+ * @param userId the id of the user where the email should be set
+ * @returns the newly set email
+ */
+export async function verifyPasskeyRegistration(
+  server: ZitadelServer,
+  passkeyId: string,
+  passkeyName: string,
+  publicKeyCredential: any,
+  userId: string
+): Promise<VerifyPasskeyRegistrationResponse> {
+  const userservice = user.getUser(server);
+  return userservice.verifyPasskeyRegistration(
+    {
+      passkeyId,
+      passkeyName,
+      publicKeyCredential,
+      userId,
+    },
+    {}
+  );
+}
 export { server };

apps/login/ui/RegisterPasskey.tsx

@@ -0,0 +1,90 @@
+"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";
+
+type Inputs = {};
+
+type Props = {
+  sessionId: string;
+};
+
+export default function RegisterPasskey({ sessionId }: Props) {
+  const { register, handleSubmit, formState } = useForm<Inputs>({
+    mode: "onBlur",
+  });
+
+  const [error, setError] = useState<string>("");
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const router = useRouter();
+
+  async function submitRegister() {
+    // const link = await createPasskeyRegistrationLink(server, userId);
+    // console.log(link);
+    setError("");
+    setLoading(true);
+    const res = await fetch("/passkeys", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        sessionId,
+      }),
+    });
+
+    const response = await res.json();
+
+    setLoading(false);
+    if (!res.ok) {
+      setError(response.details);
+      return Promise.reject(response.details);
+    }
+    return response;
+  }
+
+  function submitRegisterAndContinue(value: Inputs): Promise<boolean | void> {
+    return submitRegister().then((resp: any) => {
+      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">
+        <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(submitRegisterAndContinue)}
+        >
+          {loading && <Spinner className="h-5 w-5 mr-2" />}
+          continue
+        </Button>
+      </div>
+    </form>
+  );
+}

packages/zitadel-server/src/index.ts

@@ -28,6 +28,7 @@ export {
 export {
   AddHumanUserResponse,
   VerifyEmailResponse,
+  VerifyPasskeyRegistrationResponse,
 } from "./proto/server/zitadel/user/v2alpha/user_service";
 
 export { type LegalAndSupportSettings } from "./proto/server/zitadel/settings/v2alpha/legal_settings";