From 084051889b9d4ffba7c2b63196fc6596e28197ca Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Mon, 12 Jun 2023 10:38:28 +0200 Subject: [PATCH] createpasskeyregistrationlink --- apps/login/app/(login)/passkey/add/page.tsx | 13 ++-- apps/login/app/session/route.ts | 2 + apps/login/lib/zitadel.ts | 73 +++++++++++++-------- apps/login/ui/Alert.tsx | 26 +++++++- apps/login/ui/Info.tsx | 14 ++++ packages/zitadel-server/src/server.ts | 4 -- 6 files changed, 93 insertions(+), 39 deletions(-) create mode 100644 apps/login/ui/Info.tsx diff --git a/apps/login/app/(login)/passkey/add/page.tsx b/apps/login/app/(login)/passkey/add/page.tsx index 8f5a813ec22..e367a81c642 100644 --- a/apps/login/app/(login)/passkey/add/page.tsx +++ b/apps/login/app/(login)/passkey/add/page.tsx @@ -1,9 +1,8 @@ import { getSession, server } from "#/lib/zitadel"; -import Alert from "#/ui/Alert"; +import Alert, { AlertType } 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, @@ -15,7 +14,6 @@ export default async function Page({ 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; @@ -27,7 +25,14 @@ export default async function Page({ return (

Register Passkey

-

Setup your device for passkeys.

+

+ Setup your user to authenticate with passkeys. +

+ + + A passkey is an authentication method on a device like your fingerprint, + Apple FaceID or similar. + {!sessionFactors && (
diff --git a/apps/login/app/session/route.ts b/apps/login/app/session/route.ts index 0d4da683874..4f06502a69b 100644 --- a/apps/login/app/session/route.ts +++ b/apps/login/app/session/route.ts @@ -94,6 +94,8 @@ export async function PUT(request: NextRequest) { loginName: session.factors?.user?.loginName ?? "", }; + console.log("new token", recent.token, newCookie.token); + return updateSessionCookie(sessionCookie.id, newCookie) .then(() => { return NextResponse.json({ factors: session.factors }); diff --git a/apps/login/lib/zitadel.ts b/apps/login/lib/zitadel.ts index 9459bab856a..fbb5043396d 100644 --- a/apps/login/lib/zitadel.ts +++ b/apps/login/lib/zitadel.ts @@ -22,6 +22,7 @@ import { DeleteSessionResponse, VerifyPasskeyRegistrationResponse, } from "@zitadel/server"; +import { Metadata } from "nice-grpc"; export const zitadelConfig: ZitadelServerOptions = { name: "zitadel login", @@ -185,24 +186,8 @@ export async function setEmail( ); } -/** - * - * @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 { - const userservice = user.getUser(server); - return userservice.registerPasskey( - { - userId, - }, - {} - ); -} +const bearerTokenMetadata = (token: string) => + new Metadata({ authorization: `Bearer ${token}` }); /** * @@ -214,22 +199,22 @@ export async function createPasskeyRegistrationLink( userId: string, sessionToken: string ): Promise { - // this actions will be made from the currently seleected user - const zitadelConfig: ZitadelServerOptions = { - name: "zitadel login", - apiUrl: process.env.ZITADEL_API_URL ?? "", - token: `${sessionToken}`, - }; - - const server: ZitadelServer = initializeServer(zitadelConfig); + // this actions will be made from the currently seleected user + // const zitadelConfig: ZitadelServerOptions = { + // name: "zitadel login", + // apiUrl: process.env.ZITADEL_API_URL ?? "", + // token: "", + // }; + // const authserver: ZitadelServer = initializeServer(zitadelConfig); + // console.log("server", authserver); const userservice = user.getUser(server); return userservice.createPasskeyRegistrationLink( { userId, - // returnCode: new ReturnPasskeyRegistrationCode(), - }, - {} + returnCode: {}, + } + // { metadata: bearerTokenMetadata(sessionToken) } ); } @@ -257,4 +242,34 @@ export async function verifyPasskeyRegistration( {} ); } + +/** + * + * @param server + * @param userId the id of the user where the email should be set + * @returns the newly set email + */ +export async function registerPasskey( + userId: string, + sessionToken: string +): Promise { + // this actions will be made from the currently seleected user + const zitadelConfig: ZitadelServerOptions = { + name: "zitadel login", + apiUrl: process.env.ZITADEL_API_URL ?? "", + token: "", + }; + + const authserver: ZitadelServer = initializeServer(zitadelConfig); + console.log("server", authserver); + const userservice = user.getUser(server); + return userservice.registerPasskey( + { + userId, + // returnCode: new ReturnPasskeyRegistrationCode(), + }, + { metadata: bearerTokenMetadata(sessionToken) } + ); +} + export { server }; diff --git a/apps/login/ui/Alert.tsx b/apps/login/ui/Alert.tsx index 59392e8c7c5..bd828c82b90 100644 --- a/apps/login/ui/Alert.tsx +++ b/apps/login/ui/Alert.tsx @@ -1,12 +1,34 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; +import clsx from "clsx"; type Props = { children: React.ReactNode; + type?: AlertType; }; -export default function Alert({ children }: Props) { +export enum AlertType { + ALERT, + INFO, +} + +const yellow = + "border-yellow-600/40 dark:border-yellow-500/20 bg-yellow-200/30 text-yellow-600 dark:bg-yellow-700/20 dark:text-yellow-200"; +const red = + "border-red-600/40 dark:border-red-500/20 bg-red-200/30 text-red-600 dark:bg-red-700/20 dark:text-red-200"; +const neutral = + "border-divider-light dark:border-divider-dark bg-black/5 text-gray-600 dark:bg-white/10 dark:text-gray-200"; + +export default function Alert({ children, type = AlertType.ALERT }: Props) { return ( -
+
{children}
diff --git a/apps/login/ui/Info.tsx b/apps/login/ui/Info.tsx new file mode 100644 index 00000000000..59392e8c7c5 --- /dev/null +++ b/apps/login/ui/Info.tsx @@ -0,0 +1,14 @@ +import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; + +type Props = { + children: React.ReactNode; +}; + +export default function Alert({ children }: Props) { + return ( +
+ + {children} +
+ ); +} diff --git a/packages/zitadel-server/src/server.ts b/packages/zitadel-server/src/server.ts index a74e55189ff..62ba9566ef8 100644 --- a/packages/zitadel-server/src/server.ts +++ b/packages/zitadel-server/src/server.ts @@ -1,8 +1,4 @@ import { createChannel, createClientFactory } from "nice-grpc"; -import { - SettingsServiceClient, - SettingsServiceDefinition, -} from "./proto/server/zitadel/settings/v2alpha/settings_service"; import { authMiddleware } from "./middleware"; import { CompatServiceDefinition } from "nice-grpc/lib/service-definitions";