diff --git a/README.md b/README.md index eb89909e..cfe1f022 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,17 @@ # ZITADEL TypeScript with Turborepo and Changesets -This repository contains all TypeScript and JavaScript packages and applications you need to create your own ZITADEL Login UI. -The repo makes use of the [build system Turbo](https://turbo.build/repo) and the [Changesets CLI for versioning the packages](https://github.com/changesets/changesets). +This repository contains all TypeScript and JavaScript packages and applications you need to create your own ZITADEL +Login UI. +The repo makes use of the [build system Turbo](https://turbo.build/repo) and +the [Changesets CLI for versioning the packages](https://github.com/changesets/changesets). **⚠️ This repo and packages are in alpha state and subject to change ⚠️** The scope of functionality of this repo and packages is limited and under active development. Once the package structure is set and all APIs are fully implemented we'll move this repo to beta state. You can read the [contribution guide](/CONTRIBUTING.md) on how to contribute. -Questions can be raised in our [Discord channel](https://discord.gg/erh5Brh7jE) or as a [GitHub issue](https://github.com/zitadel/typescript/issues). +Questions can be raised in our [Discord channel](https://discord.gg/erh5Brh7jE) or as +a [GitHub issue](https://github.com/zitadel/typescript/issues). ## Developing Your Own ZITADEL Login UI @@ -25,8 +28,8 @@ We think the easiest path of getting up and running, is the following: ## Included Apps And Packages - `login`: The login UI used by ZITADEL Cloud, powered by Next.js -- `@zitadel/server`: core components for establishing node client connection, grpc stub -- `@zitadel/client`: core components for establishing web client connection, grpc stub +- `@zitadel/node`: core components for establishing node client connection, grpc stub +- `@zitadel/client`: shared client utilities - `@zitadel/proto`: shared protobuf types - `@zitadel/react`: shared React utilities and components built with tailwindcss - `@zitadel/next`: shared Next.js utilities @@ -38,9 +41,11 @@ Each package and app is 100% [TypeScript](https://www.typescriptlang.org/). ### Login The login is currently in a work in progress state. -The goal is to implement a login UI, using the session API of ZITADEL, which also implements the OIDC Standard and is ready to use for everyone. +The goal is to implement a login UI, using the session API of ZITADEL, which also implements the OIDC Standard and is +ready to use for everyone. -In the first phase we want to have a MVP login ready with the OIDC Standard and a basic feature set. In a second step the features will be extended. +In the first phase we want to have a MVP login ready with the OIDC Standard and a basic feature set. In a second step +the features will be extended. This list should show the current implementation state, and also what is missing. You can already use the current state, and extend it with your needs. @@ -105,11 +110,14 @@ You can already use the current state, and extend it with your needs. ## Versioning And Publishing Packages Package publishing has been configured using [Changesets](https://github.com/changesets/changesets). -Here is their [documentation](https://github.com/changesets/changesets#documentation) for more information about the workflow. +Here is their [documentation](https://github.com/changesets/changesets#documentation) for more information about the +workflow. -The [GitHub Action](https://github.com/changesets/action) needs an `NPM_TOKEN` and `GITHUB_TOKEN` in the repository settings. The [Changesets bot](https://github.com/apps/changeset-bot) should also be installed on the GitHub repository. +The [GitHub Action](https://github.com/changesets/action) needs an `NPM_TOKEN` and `GITHUB_TOKEN` in the repository +settings. The [Changesets bot](https://github.com/apps/changeset-bot) should also be installed on the GitHub repository. -Read the [changesets documentation](https://github.com/changesets/changesets/blob/main/docs/automating-changesets.md) for more information about this automation +Read the [changesets documentation](https://github.com/changesets/changesets/blob/main/docs/automating-changesets.md) +for more information about this automation ### NPM @@ -136,8 +144,10 @@ pnpm install ``` then setup the environment for the login application which needs a `.env.local` in `/apps/login`. -Go to your instance and create a service user for the application having the IAM_OWNER manager role. -This user is required to have access to create users on your primary organization and reading policy data so it can be restricted to your personal use case but we'll stick with IAM_OWNER for convenience. Create a PAT and copy the value to paste it under the `ZITADEL_SERVICE_USER_TOKEN` key. +Go to your instance and create a service user for the application having the `IAM_OWNER` manager role. +This user is required to have access to create users on your primary organization and reading policy data so it can be +restricted to your personal use case but we'll stick with `IAM_OWNER` for convenience. Create a PAT and copy the value to +paste it under the `ZITADEL_SERVICE_USER_TOKEN` key. The file should look as follows: ``` @@ -164,7 +174,8 @@ Open the login application with your favorite browser at `localhost:3000`. To deploy your own version on Vercel, navigate to your instance and create a service user. Copy its id from the overview and set it as ZITADEL_SERVICE_USER_ID. -Then create a personal access token (PAT), copy and set it as ZITADEL_SERVICE_USER_TOKEN, then navigate to your instance settings and make sure it gets IAM_OWNER permissions. +Then create a personal access token (PAT), copy and set it as ZITADEL_SERVICE_USER_TOKEN, then navigate to your instance +settings and make sure it gets IAM_OWNER permissions. Finally set your instance url as ZITADEL_API_URL. Make sure to set it without trailing slash. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzitadel%2Ftypescript&env=ZITADEL_API_URL,ZITADEL_SERVICE_USER_ID,ZITADEL_SERVICE_USER_TOKEN&root-directory=apps/login&envDescription=Setup%20a%20service%20account%20with%20IAM_OWNER%20membership%20on%20your%20instance%20and%20provide%20its%20id%20and%20personal%20access%20token.&project-name=zitadel-login&repository-name=zitadel-login) diff --git a/apps/login/package.json b/apps/login/package.json index 44dc1bb4..44fd3388 100644 --- a/apps/login/package.json +++ b/apps/login/package.json @@ -32,13 +32,14 @@ "*": "prettier --write --ignore-unknown" }, "dependencies": { - "@headlessui/react": "^1.7.14", - "@heroicons/react": "2.0.13", - "@tailwindcss/forms": "0.5.3", - "@vercel/analytics": "^1.0.0", - "@zitadel/client": "workspace:*", + "@headlessui/react": "^1.7.18", + "@heroicons/react": "2.1.3", + "@tailwindcss/forms": "0.5.7", + "@vercel/analytics": "^1.2.2", + "@zitadel/proto": "workspace:*", + "@zitadel/client2": "workspace:*", "@zitadel/react": "workspace:*", - "@zitadel/server": "workspace:*", + "@zitadel/node": "workspace:*", "clsx": "1.2.1", "copy-to-clipboard": "^3.3.3", "moment": "^2.29.4", diff --git a/apps/login/src/app/(login)/accounts/page.tsx b/apps/login/src/app/(login)/accounts/page.tsx index 638b7de0..b7b17d95 100644 --- a/apps/login/src/app/(login)/accounts/page.tsx +++ b/apps/login/src/app/(login)/accounts/page.tsx @@ -1,17 +1,15 @@ -import { Session } from "@zitadel/server"; -import { getBrandingSettings, listSessions, server } from "@/lib/zitadel"; +import { getBrandingSettings, listSessions } from "@/lib/zitadel"; import { getAllSessionCookieIds } from "@/utils/cookies"; import { UserPlusIcon } from "@heroicons/react/24/outline"; import Link from "next/link"; import SessionsList from "@/ui/SessionsList"; import DynamicTheme from "@/ui/DynamicTheme"; -async function loadSessions(): Promise { +async function loadSessions() { const ids = await getAllSessionCookieIds(); if (ids && ids.length) { const response = await listSessions( - server, ids.filter((id: string | undefined) => !!id), ); return response?.sessions ?? []; @@ -31,7 +29,7 @@ export default async function Page({ let sessions = await loadSessions(); - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return ( diff --git a/apps/login/src/app/(login)/idp/[provider]/failure/page.tsx b/apps/login/src/app/(login)/idp/[provider]/failure/page.tsx index 2c55493e..188aed21 100644 --- a/apps/login/src/app/(login)/idp/[provider]/failure/page.tsx +++ b/apps/login/src/app/(login)/idp/[provider]/failure/page.tsx @@ -1,16 +1,6 @@ import { ProviderSlug } from "@/lib/demos"; -import { getBrandingSettings, server } from "@/lib/zitadel"; -import Alert, { AlertType } from "@/ui/Alert"; +import { getBrandingSettings } from "@/lib/zitadel"; import DynamicTheme from "@/ui/DynamicTheme"; -import IdpSignin from "@/ui/IdpSignin"; -import { - AddHumanUserRequest, - IDPInformation, - RetrieveIdentityProviderIntentResponse, - user, - IDPLink, -} from "@zitadel/server"; -import { ClientError } from "nice-grpc"; const PROVIDER_NAME_MAPPING: { [provider: string]: string; @@ -29,7 +19,7 @@ export default async function Page({ const { id, token, authRequestId, organization } = searchParams; const { provider } = params; - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); if (provider) { return ( diff --git a/apps/login/src/app/(login)/idp/[provider]/success/page.tsx b/apps/login/src/app/(login)/idp/[provider]/success/page.tsx index 4c40a9a0..ddcd987e 100644 --- a/apps/login/src/app/(login)/idp/[provider]/success/page.tsx +++ b/apps/login/src/app/(login)/idp/[provider]/success/page.tsx @@ -1,59 +1,73 @@ import { ProviderSlug } from "@/lib/demos"; -import { getBrandingSettings, server } from "@/lib/zitadel"; +import { getBrandingSettings, userService } from "@/lib/zitadel"; import Alert, { AlertType } from "@/ui/Alert"; import DynamicTheme from "@/ui/DynamicTheme"; import IdpSignin from "@/ui/IdpSignin"; +import { AddHumanUserRequest } from "@zitadel/proto/zitadel/user/v2beta/user_service_pb"; import { - AddHumanUserRequest, IDPInformation, - RetrieveIdentityProviderIntentResponse, - user, IDPLink, -} from "@zitadel/server"; -import { ClientError } from "nice-grpc"; +} from "@zitadel/proto/zitadel/user/v2beta/idp_pb"; +import { PartialMessage } from "@zitadel/client2"; const PROVIDER_MAPPING: { - [provider: string]: (rI: IDPInformation) => Partial; + [provider: string]: ( + rI: IDPInformation, + ) => PartialMessage; } = { [ProviderSlug.GOOGLE]: (idp: IDPInformation) => { - const idpLink: IDPLink = { + const rawInfo = idp.rawInformation?.toJson() as { + User: { + email: string; + name?: string; + given_name?: string; + family_name?: string; + }; + }; + + const idpLink: PartialMessage = { idpId: idp.idpId, userId: idp.userId, userName: idp.userName, }; - const req: Partial = { + + const req: PartialMessage = { username: idp.userName, email: { - email: idp.rawInformation?.User?.email, - isVerified: true, + email: rawInfo.User?.email, + verification: { case: "isVerified", value: true }, }, // organisation: Organisation | undefined; profile: { - displayName: idp.rawInformation?.User?.name ?? "", - givenName: idp.rawInformation?.User?.given_name ?? "", - familyName: idp.rawInformation?.User?.family_name ?? "", + displayName: rawInfo.User?.name ?? "", + givenName: rawInfo.User?.given_name ?? "", + familyName: rawInfo.User?.family_name ?? "", }, idpLinks: [idpLink], }; return req; }, [ProviderSlug.GITHUB]: (idp: IDPInformation) => { - const idpLink: IDPLink = { + const rawInfo = idp.rawInformation?.toJson() as { + email: string; + name: string; + }; + const idpLink: PartialMessage = { idpId: idp.idpId, userId: idp.userId, userName: idp.userName, }; - const req: Partial = { + const req: PartialMessage = { username: idp.userName, email: { - email: idp.rawInformation?.email, - isVerified: true, + email: rawInfo?.email, + verification: { case: "isVerified", value: true }, }, // organisation: Organisation | undefined; profile: { - displayName: idp.rawInformation?.name ?? "", - givenName: idp.rawInformation?.name ?? "", - familyName: idp.rawInformation?.name ?? "", + displayName: rawInfo?.name ?? "", + givenName: rawInfo?.name ?? "", + familyName: rawInfo?.name ?? "", }, idpLinks: [idpLink], }; @@ -61,11 +75,7 @@ const PROVIDER_MAPPING: { }, }; -function retrieveIDPIntent( - id: string, - token: string, -): Promise { - const userService = user.getUser(server); +function retrieveIDPIntent(id: string, token: string) { return userService.retrieveIdentityProviderIntent( { idpIntentId: id, idpIntentToken: token }, {}, @@ -77,7 +87,6 @@ function createUser( info: IDPInformation, ): Promise { const userData = PROVIDER_MAPPING[provider](info); - const userService = user.getUser(server); return userService.addHumanUser(userData, {}).then((resp) => resp.userId); } @@ -91,7 +100,7 @@ export default async function Page({ const { id, token, authRequestId, organization } = searchParams; const { provider } = params; - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); if (provider && id && token) { return retrieveIDPIntent(id, token) @@ -128,7 +137,7 @@ export default async function Page({ ); }) - .catch((error: ClientError) => { + .catch((error) => { return (
@@ -136,7 +145,7 @@ export default async function Page({
{ - {JSON.stringify(error.details)} + {JSON.stringify(error.message)} }
diff --git a/apps/login/src/app/(login)/idp/page.tsx b/apps/login/src/app/(login)/idp/page.tsx index f9ea08d8..2a5186ec 100644 --- a/apps/login/src/app/(login)/idp/page.tsx +++ b/apps/login/src/app/(login)/idp/page.tsx @@ -1,28 +1,16 @@ import { getBrandingSettings, getLegalAndSupportSettings, - server, + settingsService, } from "@/lib/zitadel"; import DynamicTheme from "@/ui/DynamicTheme"; import { SignInWithIDP } from "@/ui/SignInWithIDP"; -import { - GetActiveIdentityProvidersResponse, - IdentityProvider, - ZitadelServer, - settings, -} from "@zitadel/server"; +import { makeReqCtx } from "@zitadel/client2/v2beta"; -function getIdentityProviders( - server: ZitadelServer, - orgId?: string, -): Promise { - const settingsService = settings.getSettings(server); +function getIdentityProviders(orgId?: string) { return settingsService - .getActiveIdentityProviders( - orgId ? { ctx: { orgId } } : { ctx: { instance: true } }, - {}, - ) - .then((resp: GetActiveIdentityProvidersResponse) => { + .getActiveIdentityProviders({ ctx: makeReqCtx(orgId) }, {}) + .then((resp) => { return resp.identityProviders; }); } @@ -35,15 +23,15 @@ export default async function Page({ const authRequestId = searchParams?.authRequestId; const organization = searchParams?.organization; - const legal = await getLegalAndSupportSettings(server, organization); + const legal = await getLegalAndSupportSettings(organization); - const identityProviders = await getIdentityProviders(server, organization); + const identityProviders = await getIdentityProviders(organization); const host = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"; - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return ( diff --git a/apps/login/src/app/(login)/loginname/page.tsx b/apps/login/src/app/(login)/loginname/page.tsx index ca875b6b..2dbae736 100644 --- a/apps/login/src/app/(login)/loginname/page.tsx +++ b/apps/login/src/app/(login)/loginname/page.tsx @@ -2,29 +2,17 @@ import { getBrandingSettings, getLegalAndSupportSettings, getLoginSettings, - server, + settingsService, } from "@/lib/zitadel"; import DynamicTheme from "@/ui/DynamicTheme"; import { SignInWithIDP } from "@/ui/SignInWithIDP"; import UsernameForm from "@/ui/UsernameForm"; -import { - GetActiveIdentityProvidersResponse, - IdentityProvider, - ZitadelServer, - settings, -} from "@zitadel/server"; +import { makeReqCtx } from "@zitadel/client2/v2beta"; -function getIdentityProviders( - server: ZitadelServer, - orgId?: string, -): Promise { - const settingsService = settings.getSettings(server); +function getIdentityProviders(orgId?: string) { return settingsService - .getActiveIdentityProviders( - orgId ? { ctx: { orgId } } : { ctx: { instance: true } }, - {}, - ) - .then((resp: GetActiveIdentityProvidersResponse) => { + .getActiveIdentityProviders({ ctx: makeReqCtx(orgId) }, {}) + .then((resp) => { return resp.identityProviders; }); } @@ -39,16 +27,16 @@ export default async function Page({ const organization = searchParams?.organization; const submit: boolean = searchParams?.submit === "true"; - const loginSettings = await getLoginSettings(server, organization); - const legal = await getLegalAndSupportSettings(server); + const loginSettings = await getLoginSettings(organization); + const legal = await getLegalAndSupportSettings(); - const identityProviders = await getIdentityProviders(server, organization); + const identityProviders = await getIdentityProviders(organization); const host = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"; - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return ( @@ -62,6 +50,7 @@ export default async function Page({ authRequestId={authRequestId} organization={organization} submit={submit} + allowRegister={!!loginSettings?.allowRegister} /> {legal && identityProviders && process.env.ZITADEL_API_URL && ( diff --git a/apps/login/src/app/(login)/mfa/create/page.tsx b/apps/login/src/app/(login)/mfa/create/page.tsx new file mode 100644 index 00000000..4fd798f7 --- /dev/null +++ b/apps/login/src/app/(login)/mfa/create/page.tsx @@ -0,0 +1,35 @@ +"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 ( +
+

Password

+

Enter your password.

+ + + +
+ +
+
+ + +
+
+ ); +} diff --git a/apps/login/src/app/(login)/mfa/page.tsx b/apps/login/src/app/(login)/mfa/page.tsx index 1d13c02f..75d491b8 100644 --- a/apps/login/src/app/(login)/mfa/page.tsx +++ b/apps/login/src/app/(login)/mfa/page.tsx @@ -2,9 +2,9 @@ import { getBrandingSettings, getSession, listAuthenticationMethodTypes, - server, } from "@/lib/zitadel"; import Alert from "@/ui/Alert"; +import BackButton from "@/ui/BackButton"; import ChooseSecondFactor from "@/ui/ChooseSecondFactor"; import DynamicTheme from "@/ui/DynamicTheme"; import UserAvatar from "@/ui/UserAvatar"; @@ -33,7 +33,7 @@ export default async function Page({ loginName, organization, ); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session && response.session.factors?.user?.id) { return listAuthenticationMethodTypes( response.session.factors.user.id, @@ -49,7 +49,7 @@ export default async function Page({ async function loadSessionById(sessionId: string, organization?: string) { const recent = await getSessionCookieById(sessionId, organization); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session && response.session.factors?.user?.id) { return listAuthenticationMethodTypes( response.session.factors.user.id, @@ -63,7 +63,7 @@ export default async function Page({ }); } - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return ( @@ -96,6 +96,11 @@ export default async function Page({ ) : ( No second factors available to setup. )} + +
+ + +
); diff --git a/apps/login/src/app/(login)/mfa/set/page.tsx b/apps/login/src/app/(login)/mfa/set/page.tsx index 9d855b10..c9f3ce8c 100644 --- a/apps/login/src/app/(login)/mfa/set/page.tsx +++ b/apps/login/src/app/(login)/mfa/set/page.tsx @@ -4,9 +4,9 @@ import { getSession, getUserByID, listAuthenticationMethodTypes, - server, } from "@/lib/zitadel"; import Alert from "@/ui/Alert"; +import BackButton from "@/ui/BackButton"; import ChooseSecondFactorToSetup from "@/ui/ChooseSecondFactorToSetup"; import DynamicTheme from "@/ui/DynamicTheme"; import UserAvatar from "@/ui/UserAvatar"; @@ -14,7 +14,6 @@ import { getMostRecentCookieWithLoginname, getSessionCookieById, } from "@/utils/cookies"; -import { user } from "@zitadel/server"; export default async function Page({ searchParams, @@ -36,16 +35,21 @@ export default async function Page({ loginName, organization, ); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session && response.session.factors?.user?.id) { const userId = response.session.factors.user.id; return listAuthenticationMethodTypes(userId).then((methods) => { return getUserByID(userId).then((user) => { + const humanUser = + user.user?.type.case === "human" + ? user.user?.type.value + : undefined; + return { factors: response.session?.factors, authMethods: methods.authMethodTypes ?? [], - phoneVerified: user.user?.human?.phone?.isVerified ?? false, - emailVerified: user.user?.human?.email?.isVerified ?? false, + phoneVerified: humanUser?.phone?.isVerified ?? false, + emailVerified: humanUser?.email?.isVerified ?? false, }; }); }); @@ -55,16 +59,20 @@ export default async function Page({ async function loadSessionById(sessionId: string, organization?: string) { const recent = await getSessionCookieById(sessionId, organization); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session && response.session.factors?.user?.id) { const userId = response.session.factors.user.id; return listAuthenticationMethodTypes(userId).then((methods) => { return getUserByID(userId).then((user) => { + const humanUser = + user.user?.type.case === "human" + ? user.user?.type.value + : undefined; return { factors: response.session?.factors, authMethods: methods.authMethodTypes ?? [], - phoneVerified: user.user?.human?.phone?.isVerified ?? false, - emailVerified: user.user?.human?.email?.isVerified ?? false, + phoneVerified: humanUser?.phone?.isVerified ?? false, + emailVerified: humanUser?.email?.isVerified ?? false, }; }); }); @@ -72,8 +80,8 @@ export default async function Page({ }); } - const branding = await getBrandingSettings(server, organization); - const loginSettings = await getLoginSettings(server, organization); + const branding = await getBrandingSettings(organization); + const loginSettings = await getLoginSettings(organization); return ( @@ -110,6 +118,11 @@ export default async function Page({ ) : ( No second factors available to setup. )} + +
+ + +
); diff --git a/apps/login/src/app/(login)/otp/[method]/page.tsx b/apps/login/src/app/(login)/otp/[method]/page.tsx index 814c75e5..fc1641da 100644 --- a/apps/login/src/app/(login)/otp/[method]/page.tsx +++ b/apps/login/src/app/(login)/otp/[method]/page.tsx @@ -2,7 +2,6 @@ import { getBrandingSettings, getLoginSettings, getSession, - server, } from "@/lib/zitadel"; import Alert from "@/ui/Alert"; import DynamicTheme from "@/ui/DynamicTheme"; @@ -24,7 +23,7 @@ export default async function Page({ const { session, token } = await loadSession(loginName, organization); - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); async function loadSession(loginName?: string, organization?: string) { const recent = await getMostRecentCookieWithLoginname( @@ -32,7 +31,7 @@ export default async function Page({ organization, ); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { return { session: response?.session, token: recent.token }; }); } diff --git a/apps/login/src/app/(login)/otp/[method]/set/page.tsx b/apps/login/src/app/(login)/otp/[method]/set/page.tsx index f1785fd6..c4e6ae1a 100644 --- a/apps/login/src/app/(login)/otp/[method]/set/page.tsx +++ b/apps/login/src/app/(login)/otp/[method]/set/page.tsx @@ -4,18 +4,17 @@ import { getBrandingSettings, getSession, registerTOTP, - server, } from "@/lib/zitadel"; import Alert from "@/ui/Alert"; +import BackButton from "@/ui/BackButton"; import { Button, ButtonVariants } from "@/ui/Button"; import DynamicTheme from "@/ui/DynamicTheme"; import { Spinner } from "@/ui/Spinner"; import TOTPRegister from "@/ui/TOTPRegister"; import UserAvatar from "@/ui/UserAvatar"; import { getMostRecentCookieWithLoginname } from "@/utils/cookies"; -import { RegisterTOTPResponse } from "@zitadel/server"; import Link from "next/link"; -import { ClientError } from "nice-grpc"; +import { RegisterTOTPResponse } from "@zitadel/proto/zitadel/user/v2beta/user_service_pb"; export default async function Page({ searchParams, @@ -28,11 +27,11 @@ export default async function Page({ searchParams; const { method } = params; - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); const { session, token } = await loadSession(loginName, organization); let totpResponse: RegisterTOTPResponse | undefined, - totpError: ClientError | undefined; + totpError: Error | undefined; if (session && session.factors?.user?.id) { if (method === "time-based") { await registerTOTP(session.factors.user.id) @@ -63,7 +62,7 @@ export default async function Page({ organization, ); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { return { session: response?.session, token: recent.token }; }); } @@ -111,7 +110,7 @@ export default async function Page({ {totpError && (
- {totpError?.details} + {totpError?.message}
)} @@ -154,6 +153,7 @@ export default async function Page({

+ { + return getSession(recent.id, recent.token).then((response) => { if (response?.session) { return response.session; } @@ -33,7 +33,7 @@ export default async function Page({ ? "When set up, you will be able to authenticate without a password." : "Your device will ask for your fingerprint, face, or screen lock"; - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return ( diff --git a/apps/login/src/app/(login)/passkey/login/page.tsx b/apps/login/src/app/(login)/passkey/login/page.tsx index 00a1b2a1..fe315348 100644 --- a/apps/login/src/app/(login)/passkey/login/page.tsx +++ b/apps/login/src/app/(login)/passkey/login/page.tsx @@ -1,4 +1,4 @@ -import { getBrandingSettings, getSession, server } from "@/lib/zitadel"; +import { getBrandingSettings, getSession } from "@/lib/zitadel"; import Alert from "@/ui/Alert"; import DynamicTheme from "@/ui/DynamicTheme"; import LoginPasskey from "@/ui/LoginPasskey"; @@ -32,7 +32,7 @@ export default async function Page({ loginName, organization, ); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session) { return response.session; } @@ -41,14 +41,14 @@ export default async function Page({ async function loadSessionById(sessionId: string, organization?: string) { const recent = await getSessionCookieById(sessionId, organization); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session) { return response.session; } }); } - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return ( diff --git a/apps/login/src/app/(login)/password/page.tsx b/apps/login/src/app/(login)/password/page.tsx index 75938ccd..c0fa08bd 100644 --- a/apps/login/src/app/(login)/password/page.tsx +++ b/apps/login/src/app/(login)/password/page.tsx @@ -2,7 +2,6 @@ import { getBrandingSettings, getLoginSettings, getSession, - server, } from "@/lib/zitadel"; import Alert from "@/ui/Alert"; import DynamicTheme from "@/ui/DynamicTheme"; @@ -25,15 +24,15 @@ export default async function Page({ organization, ); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session) { return response.session; } }); } - const branding = await getBrandingSettings(server, organization); - const loginSettings = await getLoginSettings(server, organization); + const branding = await getBrandingSettings(organization); + const loginSettings = await getLoginSettings(organization); return ( diff --git a/apps/login/src/app/(login)/register/page.tsx b/apps/login/src/app/(login)/register/page.tsx index b41634c4..d9f7ef0f 100644 --- a/apps/login/src/app/(login)/register/page.tsx +++ b/apps/login/src/app/(login)/register/page.tsx @@ -2,7 +2,6 @@ import { getBrandingSettings, getLegalAndSupportSettings, getPasswordComplexitySettings, - server, } from "@/lib/zitadel"; import DynamicTheme from "@/ui/DynamicTheme"; import RegisterFormWithoutPassword from "@/ui/RegisterFormWithoutPassword"; @@ -18,13 +17,11 @@ export default async function Page({ const setPassword = !!(firstname && lastname && email); - const legal = await getLegalAndSupportSettings(server, organization); - const passwordComplexitySettings = await getPasswordComplexitySettings( - server, - organization, - ); + const legal = await getLegalAndSupportSettings(organization); + const passwordComplexitySettings = + await getPasswordComplexitySettings(organization); - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return setPassword ? ( diff --git a/apps/login/src/app/(login)/signedin/page.tsx b/apps/login/src/app/(login)/signedin/page.tsx index edf4b491..bdc6d0d6 100644 --- a/apps/login/src/app/(login)/signedin/page.tsx +++ b/apps/login/src/app/(login)/signedin/page.tsx @@ -1,9 +1,4 @@ -import { - createCallback, - getBrandingSettings, - getSession, - server, -} from "@/lib/zitadel"; +import { createCallback, getBrandingSettings, getSession } from "@/lib/zitadel"; import DynamicTheme from "@/ui/DynamicTheme"; import UserAvatar from "@/ui/UserAvatar"; import { getMostRecentCookieWithLoginname } from "@/utils/cookies"; @@ -13,14 +8,17 @@ async function loadSession(loginName: string, authRequestId?: string) { const recent = await getMostRecentCookieWithLoginname(`${loginName}`); if (authRequestId) { - return createCallback(server, { + return createCallback({ authRequestId, - session: { sessionId: recent.id, sessionToken: recent.token }, + callbackKind: { + case: "session", + value: { sessionId: recent.id, sessionToken: recent.token }, + }, }).then(({ callbackUrl }) => { return redirect(callbackUrl); }); } - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session) { return response.session; } @@ -31,7 +29,7 @@ export default async function Page({ searchParams }: { searchParams: any }) { const { loginName, authRequestId, organization } = searchParams; const sessionFactors = await loadSession(loginName, authRequestId); - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return ( diff --git a/apps/login/src/app/(login)/u2f/page.tsx b/apps/login/src/app/(login)/u2f/page.tsx index 87573bca..2c8c8b19 100644 --- a/apps/login/src/app/(login)/u2f/page.tsx +++ b/apps/login/src/app/(login)/u2f/page.tsx @@ -2,7 +2,6 @@ import { getBrandingSettings, getLoginSettings, getSession, - server, } from "@/lib/zitadel"; import Alert from "@/ui/Alert"; import DynamicTheme from "@/ui/DynamicTheme"; @@ -22,7 +21,7 @@ export default async function Page({ }) { const { loginName, authRequestId, sessionId, organization } = searchParams; - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); const sessionFactors = sessionId ? await loadSessionById(sessionId, organization) @@ -36,7 +35,7 @@ export default async function Page({ loginName, organization, ); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session) { return response.session; } @@ -45,7 +44,7 @@ export default async function Page({ async function loadSessionById(sessionId: string, organization?: string) { const recent = await getSessionCookieById(sessionId, organization); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session) { return response.session; } diff --git a/apps/login/src/app/(login)/u2f/set/page.tsx b/apps/login/src/app/(login)/u2f/set/page.tsx index c51c88cf..2b3caf3d 100644 --- a/apps/login/src/app/(login)/u2f/set/page.tsx +++ b/apps/login/src/app/(login)/u2f/set/page.tsx @@ -1,4 +1,4 @@ -import { getBrandingSettings, getSession, server } from "@/lib/zitadel"; +import { getBrandingSettings, getSession } from "@/lib/zitadel"; import Alert, { AlertType } from "@/ui/Alert"; import DynamicTheme from "@/ui/DynamicTheme"; import RegisterPasskey from "@/ui/RegisterPasskey"; @@ -20,7 +20,7 @@ export default async function Page({ loginName, organization, ); - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { if (response?.session) { return response.session; } @@ -30,7 +30,7 @@ export default async function Page({ const description = "Your device will ask for your fingerprint, face, or screen lock"; - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return ( diff --git a/apps/login/src/app/(login)/verify/page.tsx b/apps/login/src/app/(login)/verify/page.tsx index 0049fcec..5bc0cb0e 100644 --- a/apps/login/src/app/(login)/verify/page.tsx +++ b/apps/login/src/app/(login)/verify/page.tsx @@ -1,4 +1,4 @@ -import { getBrandingSettings, server } from "@/lib/zitadel"; +import { getBrandingSettings } from "@/lib/zitadel"; import DynamicTheme from "@/ui/DynamicTheme"; import VerifyEmailForm from "@/ui/VerifyEmailForm"; import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; @@ -15,7 +15,7 @@ export default async function Page({ searchParams }: { searchParams: any }) { passwordset, } = searchParams; - const branding = await getBrandingSettings(server, organization); + const branding = await getBrandingSettings(organization); return ( diff --git a/apps/login/src/app/api/idp/start/route.ts b/apps/login/src/app/api/idp/start/route.ts index 795e563f..7d7d9679 100644 --- a/apps/login/src/app/api/idp/start/route.ts +++ b/apps/login/src/app/api/idp/start/route.ts @@ -1,4 +1,4 @@ -import { server, startIdentityProviderFlow } from "@/lib/zitadel"; +import { startIdentityProviderFlow } from "@/lib/zitadel"; import { NextRequest, NextResponse } from "next/server"; export async function POST(request: NextRequest) { @@ -6,7 +6,7 @@ export async function POST(request: NextRequest) { if (body) { let { idpId, successUrl, failureUrl } = body; - return startIdentityProviderFlow(server, { + return startIdentityProviderFlow({ idpId, urls: { successUrl, diff --git a/apps/login/src/app/api/loginname/route.ts b/apps/login/src/app/api/loginname/route.ts index 75c9635c..7707a01c 100644 --- a/apps/login/src/app/api/loginname/route.ts +++ b/apps/login/src/app/api/loginname/route.ts @@ -7,11 +7,7 @@ export async function POST(request: NextRequest) { if (body) { const { loginName, authRequestId, organization } = body; return listUsers(loginName, organization).then((users) => { - if ( - users.details && - users.details.totalResult == 1 && - users.result[0].userId - ) { + if (users.details?.totalResult == BigInt(1) && users.result[0].userId) { const userId = users.result[0].userId; return createSessionForUserIdAndUpdateCookie( userId, diff --git a/apps/login/src/app/api/otp/set/route.ts b/apps/login/src/app/api/otp/set/route.ts index 244702cd..b9d27b63 100644 --- a/apps/login/src/app/api/otp/set/route.ts +++ b/apps/login/src/app/api/otp/set/route.ts @@ -5,8 +5,9 @@ import { getSessionCookieByLoginName, } from "@/utils/cookies"; import { setSessionAndUpdateCookie } from "@/utils/session"; -import { Checks } from "@zitadel/server"; import { NextRequest, NextResponse, userAgent } from "next/server"; +import { Checks } from "@zitadel/proto/zitadel/session/v2beta/session_service_pb"; +import { PlainMessage } from "@zitadel/client2"; export async function POST(request: NextRequest) { const body = await request.json(); @@ -31,7 +32,7 @@ export async function POST(request: NextRequest) { return recentPromise .then((recent) => { - const checks: Checks = {}; + const checks: PlainMessage = {}; if (method === "time-based") { checks.totp = { diff --git a/apps/login/src/app/api/passkeys/route.ts b/apps/login/src/app/api/passkeys/route.ts index 36293280..4489bee3 100644 --- a/apps/login/src/app/api/passkeys/route.ts +++ b/apps/login/src/app/api/passkeys/route.ts @@ -2,7 +2,6 @@ import { createPasskeyRegistrationLink, getSession, registerPasskey, - server, } from "@/lib/zitadel"; import { getSessionCookieById } from "@/utils/cookies"; import { NextRequest, NextResponse } from "next/server"; @@ -14,11 +13,7 @@ export async function POST(request: NextRequest) { const sessionCookie = await getSessionCookieById(sessionId); - const session = await getSession( - server, - sessionCookie.id, - sessionCookie.token, - ); + const session = await getSession(sessionCookie.id, sessionCookie.token); const domain: string = request.nextUrl.hostname; @@ -29,6 +24,9 @@ export async function POST(request: NextRequest) { return createPasskeyRegistrationLink(userId) .then((resp) => { const code = resp.code; + if (!code) { + throw new Error("Missing code in response"); + } return registerPasskey(userId, code, domain).then((resp) => { return NextResponse.json(resp); }); diff --git a/apps/login/src/app/api/passkeys/verify/route.ts b/apps/login/src/app/api/passkeys/verify/route.ts index 4cfd8342..a09b848c 100644 --- a/apps/login/src/app/api/passkeys/verify/route.ts +++ b/apps/login/src/app/api/passkeys/verify/route.ts @@ -1,4 +1,4 @@ -import { getSession, server, verifyPasskeyRegistration } from "@/lib/zitadel"; +import { getSession, verifyPasskeyRegistration } from "@/lib/zitadel"; import { getSessionCookieById } from "@/utils/cookies"; import { NextRequest, NextResponse, userAgent } from "next/server"; @@ -15,17 +15,12 @@ export async function POST(request: NextRequest) { } const sessionCookie = await getSessionCookieById(sessionId); - const session = await getSession( - server, - sessionCookie.id, - sessionCookie.token, - ); + const session = await getSession(sessionCookie.id, sessionCookie.token); const userId = session?.session?.factors?.user?.id; if (userId) { return verifyPasskeyRegistration( - server, passkeyId, passkeyName, publicKeyCredential, diff --git a/apps/login/src/app/api/registeruser/route.ts b/apps/login/src/app/api/registeruser/route.ts index 7ed49f48..dcb3626a 100644 --- a/apps/login/src/app/api/registeruser/route.ts +++ b/apps/login/src/app/api/registeruser/route.ts @@ -1,4 +1,4 @@ -import { addHumanUser, server } from "@/lib/zitadel"; +import { addHumanUser } from "@/lib/zitadel"; import { createSessionAndUpdateCookie, createSessionForUserIdAndUpdateCookie, @@ -17,7 +17,7 @@ export async function POST(request: NextRequest) { authRequestId, } = body; - return addHumanUser(server, { + return addHumanUser({ email: email, firstName, lastName, diff --git a/apps/login/src/app/api/resendverifyemail/route.ts b/apps/login/src/app/api/resendverifyemail/route.ts index 3ccd724d..e9a95214 100644 --- a/apps/login/src/app/api/resendverifyemail/route.ts +++ b/apps/login/src/app/api/resendverifyemail/route.ts @@ -1,13 +1,13 @@ -import { setEmail, server } from "@/lib/zitadel"; +import { resendEmailCode } from "@/lib/zitadel"; import { NextRequest, NextResponse } from "next/server"; export async function POST(request: NextRequest) { const body = await request.json(); if (body) { - const { userId, code } = body; + const { userId } = body; // replace with resend Mail method once its implemented - return setEmail(server, userId) + return resendEmailCode(userId) .then((resp) => { return NextResponse.json(resp); }) diff --git a/apps/login/src/app/api/resetpassword/route.ts b/apps/login/src/app/api/resetpassword/route.ts new file mode 100644 index 00000000..570eb649 --- /dev/null +++ b/apps/login/src/app/api/resetpassword/route.ts @@ -0,0 +1,28 @@ +import { listUsers, passwordReset } from "@/lib/zitadel"; +import { NextRequest, NextResponse } from "next/server"; + +export async function POST(request: NextRequest) { + const body = await request.json(); + if (body) { + const { loginName, organization } = body; + return listUsers(loginName, organization).then((users) => { + if ( + users.details && + Number(users.details.totalResult) == 1 && + users.result[0].userId + ) { + const userId = users.result[0].userId; + + return passwordReset(userId) + .then((resp) => { + return NextResponse.json(resp); + }) + .catch((error) => { + return NextResponse.json(error, { status: 500 }); + }); + } else { + return NextResponse.json({ error: "User not found" }, { status: 404 }); + } + }); + } +} diff --git a/apps/login/src/app/api/session/route.ts b/apps/login/src/app/api/session/route.ts index 40493340..c0bc0d06 100644 --- a/apps/login/src/app/api/session/route.ts +++ b/apps/login/src/app/api/session/route.ts @@ -1,5 +1,4 @@ import { - server, deleteSession, getSession, getUserByID, @@ -17,7 +16,6 @@ import { createSessionForIdpAndUpdateCookie, setSessionAndUpdateCookie, } from "@/utils/session"; -import { Challenges, Checks, RequestChallenges } from "@zitadel/server"; import { NextRequest, NextResponse } from "next/server"; export async function POST(request: NextRequest) { @@ -104,27 +102,23 @@ export async function PUT(request: NextRequest) { challenges && (challenges.otpEmail === "" || challenges.otpSms === "") ) { - const sessionResponse = await getSession( - server, - recent.id, - recent.token, - ); + const sessionResponse = await getSession(recent.id, recent.token); + if (sessionResponse && sessionResponse.session?.factors?.user?.id) { const userResponse = await getUserByID( sessionResponse.session.factors.user.id, ); - if ( - challenges.otpEmail === "" && - userResponse.user?.human?.email?.email - ) { - challenges.otpEmail = userResponse.user?.human?.email?.email; + const humanUser = + userResponse.user?.type.case === "human" + ? userResponse.user?.type.value + : undefined; + + if (challenges.otpEmail === "" && humanUser?.email?.email) { + challenges.otpEmail = humanUser?.email?.email; } - if ( - challenges.otpSms === "" && - userResponse.user?.human?.phone?.phone - ) { - challenges.otpSms = userResponse.user?.human?.phone?.phone; + if (challenges.otpSms === "" && humanUser?.phone?.phone) { + challenges.otpSms = humanUser?.phone?.phone; } } } @@ -176,7 +170,7 @@ export async function DELETE(request: NextRequest) { if (id) { const session = await getSessionCookieById(id); - return deleteSession(server, session.id, session.token) + return deleteSession(session.id, session.token) .then(() => { return removeSessionFromCookie(session) .then(() => { diff --git a/apps/login/src/app/api/u2f/route.ts b/apps/login/src/app/api/u2f/route.ts index 368c5a80..6a1c1a82 100644 --- a/apps/login/src/app/api/u2f/route.ts +++ b/apps/login/src/app/api/u2f/route.ts @@ -3,7 +3,6 @@ import { getSession, registerPasskey, registerU2F, - server, } from "@/lib/zitadel"; import { getSessionCookieById } from "@/utils/cookies"; import { NextRequest, NextResponse } from "next/server"; @@ -15,11 +14,7 @@ export async function POST(request: NextRequest) { const sessionCookie = await getSessionCookieById(sessionId); - const session = await getSession( - server, - sessionCookie.id, - sessionCookie.token, - ); + const session = await getSession(sessionCookie.id, sessionCookie.token); const domain: string = request.nextUrl.hostname; diff --git a/apps/login/src/app/api/u2f/verify/route.ts b/apps/login/src/app/api/u2f/verify/route.ts index 1ea83f72..ef597e5f 100644 --- a/apps/login/src/app/api/u2f/verify/route.ts +++ b/apps/login/src/app/api/u2f/verify/route.ts @@ -1,7 +1,8 @@ -import { getSession, server, verifyU2FRegistration } from "@/lib/zitadel"; +import { getSession, verifyU2FRegistration } from "@/lib/zitadel"; import { getSessionCookieById } from "@/utils/cookies"; -import { VerifyU2FRegistrationRequest } from "@zitadel/server"; import { NextRequest, NextResponse, userAgent } from "next/server"; +import { VerifyU2FRegistrationRequest } from "@zitadel/proto/zitadel/user/v2beta/user_service_pb"; +import { PlainMessage } from "@zitadel/client2"; export async function POST(request: NextRequest) { const body = await request.json(); @@ -16,16 +17,12 @@ export async function POST(request: NextRequest) { } const sessionCookie = await getSessionCookieById(sessionId); - const session = await getSession( - server, - sessionCookie.id, - sessionCookie.token, - ); + const session = await getSession(sessionCookie.id, sessionCookie.token); const userId = session?.session?.factors?.user?.id; if (userId) { - const req: VerifyU2FRegistrationRequest = { + const req: PlainMessage = { publicKeyCredential, u2fId, userId, diff --git a/apps/login/src/app/api/verifyemail/route.ts b/apps/login/src/app/api/verifyemail/route.ts index e2aae983..f8a21c46 100644 --- a/apps/login/src/app/api/verifyemail/route.ts +++ b/apps/login/src/app/api/verifyemail/route.ts @@ -1,4 +1,4 @@ -import { server, verifyEmail } from "@/lib/zitadel"; +import { verifyEmail } from "@/lib/zitadel"; import { NextRequest, NextResponse } from "next/server"; export async function POST(request: NextRequest) { @@ -6,7 +6,7 @@ export async function POST(request: NextRequest) { if (body) { const { userId, code } = body; - return verifyEmail(server, userId, code) + return verifyEmail(userId, code) .then((resp) => { return NextResponse.json(resp); }) diff --git a/apps/login/src/app/layout.tsx b/apps/login/src/app/layout.tsx index 0eb4b191..5e299faf 100644 --- a/apps/login/src/app/layout.tsx +++ b/apps/login/src/app/layout.tsx @@ -6,8 +6,6 @@ import { LayoutProviders } from "@/ui/LayoutProviders"; import { Analytics } from "@vercel/analytics/react"; import ThemeWrapper from "@/ui/ThemeWrapper"; import { getBrandingSettings } from "@/lib/zitadel"; -import { server } from "../lib/zitadel"; -import { BrandingSettings } from "@zitadel/server"; import ThemeProvider from "@/ui/ThemeProvider"; import Theme from "@/ui/Theme"; diff --git a/apps/login/src/app/login/route.ts b/apps/login/src/app/login/route.ts index e6a8c335..e81f5663 100644 --- a/apps/login/src/app/login/route.ts +++ b/apps/login/src/app/login/route.ts @@ -3,15 +3,17 @@ import { getAuthRequest, getOrgByDomain, listSessions, - server, } from "@/lib/zitadel"; import { SessionCookie, getAllSessions } from "@/utils/cookies"; -import { Session, AuthRequest, Prompt } from "@zitadel/server"; import { NextRequest, NextResponse } from "next/server"; +import { Session } from "@zitadel/proto/zitadel/session/v2beta/session_pb"; +import { + AuthRequest, + Prompt, +} from "@zitadel/proto/zitadel/oidc/v2beta/authorization_pb"; async function loadSessions(ids: string[]): Promise { const response = await listSessions( - server, ids.filter((id: string | undefined) => !!id), ); @@ -81,9 +83,12 @@ export async function GET(request: NextRequest) { sessionToken: cookie?.token, }; - const { callbackUrl } = await createCallback(server, { + const { callbackUrl } = await createCallback({ authRequestId, - session, + callbackKind: { + case: "session", + value: session, + }, }); return NextResponse.redirect(callbackUrl); } @@ -92,7 +97,7 @@ export async function GET(request: NextRequest) { if (authRequestId) { console.log(`Login with authRequest: ${authRequestId}`); - const { authRequest } = await getAuthRequest(server, { authRequestId }); + const { authRequest } = await getAuthRequest({ authRequestId }); let organization = ""; @@ -132,7 +137,7 @@ export async function GET(request: NextRequest) { return NextResponse.redirect(accountsUrl); }; - if (authRequest && authRequest.prompt.includes(Prompt.PROMPT_CREATE)) { + if (authRequest && authRequest.prompt.includes(Prompt.CREATE)) { const registerUrl = new URL("/register", request.url); if (authRequest?.id) { registerUrl.searchParams.set("authRequestId", authRequest?.id); @@ -147,9 +152,9 @@ export async function GET(request: NextRequest) { // use existing session and hydrate it for oidc if (authRequest && sessions.length) { // if some accounts are available for selection and select_account is set - if (authRequest.prompt.includes(Prompt.PROMPT_SELECT_ACCOUNT)) { + if (authRequest.prompt.includes(Prompt.SELECT_ACCOUNT)) { return gotoAccounts(); - } else if (authRequest.prompt.includes(Prompt.PROMPT_LOGIN)) { + } else if (authRequest.prompt.includes(Prompt.LOGIN)) { // if prompt is login const loginNameUrl = new URL("/loginname", request.url); if (authRequest?.id) { @@ -162,7 +167,7 @@ export async function GET(request: NextRequest) { loginNameUrl.searchParams.set("organization", organization); } return NextResponse.redirect(loginNameUrl); - } else if (authRequest.prompt.includes(Prompt.PROMPT_NONE)) { + } else if (authRequest.prompt.includes(Prompt.NONE)) { // NONE prompt - silent authentication let selectedSession = findSession(sessions, authRequest); @@ -177,9 +182,12 @@ export async function GET(request: NextRequest) { sessionId: cookie?.id, sessionToken: cookie?.token, }; - const { callbackUrl } = await createCallback(server, { + const { callbackUrl } = await createCallback({ authRequestId, - session, + callbackKind: { + case: "session", + value: session, + }, }); return NextResponse.redirect(callbackUrl); } else { @@ -209,9 +217,12 @@ export async function GET(request: NextRequest) { sessionToken: cookie?.token, }; try { - const { callbackUrl } = await createCallback(server, { + const { callbackUrl } = await createCallback({ authRequestId, - session, + callbackKind: { + case: "session", + value: session, + }, }); if (callbackUrl) { return NextResponse.redirect(callbackUrl); diff --git a/apps/login/src/app/sessions/route.ts b/apps/login/src/app/sessions/route.ts new file mode 100644 index 00000000..034b9b41 --- /dev/null +++ b/apps/login/src/app/sessions/route.ts @@ -0,0 +1,30 @@ +import { listSessions } from "@/lib/zitadel"; +import { SessionCookie, getAllSessions } from "@/utils/cookies"; +import { Session } from "@zitadel/proto/zitadel/session/v2beta/session_pb"; +import { NextRequest, NextResponse } from "next/server"; + +async function loadSessions(ids: string[]): Promise { + const response = await listSessions( + ids.filter((id: string | undefined) => !!id), + ); + + return response?.sessions ?? []; +} + +export async function GET(request: NextRequest) { + const sessionCookies: SessionCookie[] = await getAllSessions(); + const ids = sessionCookies.map((s) => s.id); + let sessions: Session[] = []; + if (ids && ids.length) { + sessions = await loadSessions(ids); + } + + const responseHeaders = new Headers(); + responseHeaders.set("Access-Control-Allow-Origin", "*"); + responseHeaders.set("Access-Control-Allow-Headers", "*"); + + return NextResponse.json( + { sessions }, + { status: 200, headers: responseHeaders }, + ); +} diff --git a/apps/login/src/lib/demos.ts b/apps/login/src/lib/demos.ts index fa0742a4..464bb578 100644 --- a/apps/login/src/lib/demos.ts +++ b/apps/login/src/lib/demos.ts @@ -35,7 +35,7 @@ export const demos: { name: string; items: Item[] }[] = [ }, { name: "IDP Register", - slug: "register/idp", + slug: "idp", description: "Add a user from an external identity provider", }, ], diff --git a/apps/login/src/lib/server-actions.ts b/apps/login/src/lib/server-actions.ts index 5ced55c6..612f5f05 100644 --- a/apps/login/src/lib/server-actions.ts +++ b/apps/login/src/lib/server-actions.ts @@ -1,7 +1,7 @@ "use server"; import { getMostRecentCookieWithLoginname } from "@/utils/cookies"; -import { getSession, server, verifyTOTPRegistration } from "./zitadel"; +import { getSession, verifyTOTPRegistration } from "./zitadel"; export async function verifyTOTP( code: string, @@ -10,7 +10,7 @@ export async function verifyTOTP( ) { return getMostRecentCookieWithLoginname(loginName, organization) .then((recent) => { - return getSession(server, recent.id, recent.token).then((response) => { + return getSession(recent.id, recent.token).then((response) => { return { session: response?.session, token: recent.token }; }); }) diff --git a/apps/login/src/lib/zitadel.ts b/apps/login/src/lib/zitadel.ts index b4f0ec90..423edadd 100644 --- a/apps/login/src/lib/zitadel.ts +++ b/apps/login/src/lib/zitadel.ts @@ -1,109 +1,52 @@ -import { VerifyU2FRegistrationRequest } from "@zitadel/server"; import { - GetUserByIDResponse, - RegisterTOTPResponse, - VerifyTOTPRegistrationResponse, -} from "@zitadel/server"; + createOIDCServiceClient, + createSessionServiceClient, + createSettingsServiceClient, + createUserServiceClient, + makeReqCtx, +} from "@zitadel/client2/v2beta"; +import { createManagementServiceClient } from "@zitadel/client2/v1"; +import { createServerTransport } from "@zitadel/node"; +import { Checks } from "@zitadel/proto/zitadel/session/v2beta/session_service_pb"; +import { RequestChallenges } from "@zitadel/proto/zitadel/session/v2beta/challenge_pb"; import { - LegalAndSupportSettings, - PasswordComplexitySettings, - ZitadelServer, - VerifyMyAuthFactorOTPResponse, - ZitadelServerOptions, - user, - oidc, - settings, - getServers, - auth, - initializeServer, - session, - GetGeneralSettingsResponse, - CreateSessionResponse, - GetBrandingSettingsResponse, - GetPasswordComplexitySettingsResponse, - RegisterU2FResponse, - GetLegalAndSupportSettingsResponse, - AddHumanUserResponse, - BrandingSettings, - ListSessionsResponse, - GetSessionResponse, - VerifyEmailResponse, - Checks, - SetSessionResponse, - SetSessionRequest, - ListUsersResponse, - management, - DeleteSessionResponse, - VerifyPasskeyRegistrationResponse, - LoginSettings, - GetOrgByDomainGlobalResponse, - GetLoginSettingsResponse, - ListAuthenticationMethodTypesResponse, - StartIdentityProviderIntentRequest, - StartIdentityProviderIntentResponse, RetrieveIdentityProviderIntentRequest, - RetrieveIdentityProviderIntentResponse, - GetAuthRequestResponse, - GetAuthRequestRequest, - CreateCallbackRequest, - CreateCallbackResponse, - RequestChallenges, - TextQueryMethod, - ListHumanAuthFactorsResponse, - AddHumanUserRequest, - AddOTPEmailResponse, - AddOTPSMSResponse, -} from "@zitadel/server"; + VerifyU2FRegistrationRequest, +} from "@zitadel/proto/zitadel/user/v2beta/user_service_pb"; +import { CreateCallbackRequest } from "@zitadel/proto/zitadel/oidc/v2beta/oidc_service_pb"; +import { TextQueryMethod } from "@zitadel/proto/zitadel/object/v2beta/object_pb"; +import type { RedirectURLs } from "@zitadel/proto/zitadel/user/v2beta/idp_pb"; +import { PlainMessage } from "@zitadel/client2"; const SESSION_LIFETIME_S = 3000; -export const zitadelConfig: ZitadelServerOptions = { - name: "zitadel login", - apiUrl: process.env.ZITADEL_API_URL ?? "", - token: process.env.ZITADEL_SERVICE_USER_TOKEN ?? "", -}; +const transport = createServerTransport( + process.env.ZITADEL_SERVICE_USER_TOKEN!, + { + baseUrl: process.env.ZITADEL_API_URL!, + httpVersion: "2", + }, +); -let server: ZitadelServer; +export const sessionService = createSessionServiceClient(transport); +export const managementService = createManagementServiceClient(transport); +export const userService = createUserServiceClient(transport); +export const oidcService = createOIDCServiceClient(transport); +export const settingsService = createSettingsServiceClient(transport); -if (!getServers().length) { - console.log("initialize server"); - server = initializeServer(zitadelConfig); -} - -export async function getBrandingSettings( - server: ZitadelServer, - organization?: string, -): Promise { - const settingsService = settings.getSettings(server); - return settingsService - .getBrandingSettings( - { ctx: organization ? { orgId: organization } : { instance: true } }, - {}, - ) - .then((resp: GetBrandingSettingsResponse) => resp.settings); -} - -export async function getLoginSettings( - server: ZitadelServer, - orgId?: string, -): Promise { - const settingsService = settings.getSettings(server); +export async function getBrandingSettings(organization?: string) { return settingsService - .getLoginSettings({ ctx: orgId ? { orgId } : { instance: true } }, {}) - .then((resp: GetLoginSettingsResponse) => resp.settings); + .getBrandingSettings({ ctx: makeReqCtx(organization) }, {}) + .then((resp) => resp.settings); } -export async function verifyMyAuthFactorOTP( - code: string, -): Promise { - const authService = auth.getAuth(server); - return authService.verifyMyAuthFactorOTP({ code }, {}); +export async function getLoginSettings(orgId?: string) { + return settingsService + .getLoginSettings({ ctx: makeReqCtx(orgId) }, {}) + .then((resp) => resp.settings); } -export async function addOTPEmail( - userId: string, -): Promise { - const userService = user.getUser(server); +export async function addOTPEmail(userId: string) { return userService.addOTPEmail( { userId, @@ -112,98 +55,72 @@ export async function addOTPEmail( ); } -export async function addOTPSMS( - userId: string, - token?: string, -): Promise { - let userService; - if (token) { - const authConfig: ZitadelServerOptions = { - name: "zitadel login", - apiUrl: process.env.ZITADEL_API_URL ?? "", - token: token, - }; - - const sessionUser = initializeServer(authConfig); - userService = user.getUser(sessionUser); - } else { - userService = user.getUser(server); - } +export async function addOTPSMS(userId: string, token?: string) { + // TODO: Follow up here, I do not understand the branching + // let userService; + // if (token) { + // const authConfig: ZitadelServerOptions = { + // name: "zitadel login", + // apiUrl: process.env.ZITADEL_API_URL ?? "", + // token: token, + // }; + // const sessionUser = initializeServer(authConfig); + // userService = user.getUser(sessionUser); + // } else { + // userService = user.getUser(server); + // } + return userService.addOTPSMS({ userId }, {}); } -export async function registerTOTP( - userId: string, - token?: string, -): Promise { - let userService; - if (token) { - const authConfig: ZitadelServerOptions = { - name: "zitadel login", - apiUrl: process.env.ZITADEL_API_URL ?? "", - token: token, - }; - - const sessionUser = initializeServer(authConfig); - userService = user.getUser(sessionUser); - } else { - userService = user.getUser(server); - } +export async function registerTOTP(userId: string, token?: string) { + // TODO: Follow up here, I do not understand the branching + // let userService; + // if (token) { + // const authConfig: ZitadelServerOptions = { + // name: "zitadel login", + // apiUrl: process.env.ZITADEL_API_URL ?? "", + // token: token, + // }; + // + // const sessionUser = initializeServer(authConfig); + // userService = user.getUser(sessionUser); + // } else { + // userService = user.getUser(server); + // } return userService.registerTOTP({ userId }, {}); } -export async function getGeneralSettings( - server: ZitadelServer, -): Promise { - const settingsService = settings.getSettings(server); +export async function getGeneralSettings() { return settingsService .getGeneralSettings({}, {}) - .then((resp: GetGeneralSettingsResponse) => resp.supportedLanguages); + .then((resp) => resp.supportedLanguages); } -export async function getLegalAndSupportSettings( - server: ZitadelServer, - organization?: string, -): Promise { - const settingsService = settings.getSettings(server); +export async function getLegalAndSupportSettings(organization?: string) { return settingsService - .getLegalAndSupportSettings( - { ctx: organization ? { orgId: organization } : { instance: true } }, - {}, - ) - .then((resp: GetLegalAndSupportSettingsResponse) => { + .getLegalAndSupportSettings({ ctx: makeReqCtx(organization) }, {}) + .then((resp) => { return resp.settings; }); } -export async function getPasswordComplexitySettings( - server: ZitadelServer, - organization?: string, -): Promise { - const settingsService = settings.getSettings(server); - +export async function getPasswordComplexitySettings(organization?: string) { return settingsService - .getPasswordComplexitySettings( - organization - ? { ctx: { orgId: organization } } - : { ctx: { instance: true } }, - {}, - ) - .then((resp: GetPasswordComplexitySettingsResponse) => resp.settings); + .getPasswordComplexitySettings({ ctx: makeReqCtx(organization) }) + .then((resp) => resp.settings); } export async function createSessionFromChecks( - server: ZitadelServer, - checks: Checks, - challenges: RequestChallenges | undefined, -): Promise { - const sessionService = session.getSession(server); + checks: PlainMessage, + challenges: PlainMessage | undefined, +) { return sessionService.createSession( { checks: checks, challenges, lifetime: { - seconds: SESSION_LIFETIME_S, + seconds: BigInt(SESSION_LIFETIME_S), nanos: 0, }, }, @@ -212,77 +129,69 @@ export async function createSessionFromChecks( } export async function createSessionForUserIdAndIdpIntent( - server: ZitadelServer, userId: string, idpIntent: { idpIntentId?: string | undefined; idpIntentToken?: string | undefined; }, -): Promise { - const sessionService = session.getSession(server); - - return sessionService.createSession( - { - checks: { user: { userId }, idpIntent }, - // lifetime: { - // seconds: 300, - // nanos: 0, - // }, +) { + return sessionService.createSession({ + checks: { + user: { + search: { + case: "userId", + value: userId, + }, + }, + idpIntent, }, - {}, - ); + // lifetime: { + // seconds: 300, + // nanos: 0, + // }, + }); } export async function setSession( - server: ZitadelServer, sessionId: string, sessionToken: string, challenges: RequestChallenges | undefined, - checks: Checks, -): Promise { - const sessionService = session.getSession(server); - - const payload: SetSessionRequest = { - sessionId, - sessionToken, - challenges, - checks: {}, - metadata: {}, - }; - - if (checks && payload.checks) { - payload.checks = checks; - } - - return sessionService.setSession(payload, {}); + checks?: PlainMessage, +) { + return sessionService.setSession( + { + sessionId, + sessionToken, + challenges, + checks: checks ? checks : {}, + metadata: {}, + }, + {}, + ); } -export async function getSession( - server: ZitadelServer, - sessionId: string, - sessionToken: string, -): Promise { - const sessionService = session.getSession(server); +export async function getSession(sessionId: string, sessionToken: string) { return sessionService.getSession({ sessionId, sessionToken }, {}); } -export async function deleteSession( - server: ZitadelServer, - sessionId: string, - sessionToken: string, -): Promise { - const sessionService = session.getSession(server); +export async function deleteSession(sessionId: string, sessionToken: string) { return sessionService.deleteSession({ sessionId, sessionToken }, {}); } -export async function listSessions( - server: ZitadelServer, - ids: string[], -): Promise { - const sessionService = session.getSession(server); - const query = { offset: 0, limit: 100, asc: true }; - const queries = [{ idsQuery: { ids } }]; - return sessionService.listSessions({ queries: queries }, {}); +export async function listSessions(ids: string[]) { + return sessionService.listSessions( + { + queries: [ + { + query: { + case: "idsQuery", + value: { ids: ids }, + }, + }, + ], + }, + {}, + ); } export type AddHumanUserData = { @@ -293,89 +202,82 @@ export type AddHumanUserData = { organization: string | undefined; }; -export async function addHumanUser( - server: ZitadelServer, - { email, firstName, lastName, password, organization }: AddHumanUserData, -): Promise { - const userService = user.getUser(server); - - const payload: Partial = { +export async function addHumanUser({ + email, + firstName, + lastName, + password, + organization, +}: AddHumanUserData) { + return userService.addHumanUser({ email: { email }, username: email, profile: { givenName: firstName, familyName: lastName }, - }; - - if (organization) { - payload.organization = { orgId: organization }; - } - - return userService.addHumanUser( - password - ? { - ...payload, - password: { password }, - } - : payload, - {}, - ); + organization: organization + ? { org: { case: "orgId", value: organization } } + : undefined, + passwordType: password + ? { case: "password", value: { password: password } } + : undefined, + }); } export async function verifyTOTPRegistration( code: string, userId: string, token?: string, -): Promise { - let userService; - if (token) { - const authConfig: ZitadelServerOptions = { - name: "zitadel login", - apiUrl: process.env.ZITADEL_API_URL ?? "", - token: token, - }; - - const sessionUser = initializeServer(authConfig); - userService = user.getUser(sessionUser); - } else { - userService = user.getUser(server); - } +) { + // let userService; + // if (token) { + // const authConfig: ZitadelServerOptions = { + // name: "zitadel login", + // apiUrl: process.env.ZITADEL_API_URL ?? "", + // token: token, + // }; + // + // const sessionUser = initializeServer(authConfig); + // userService = user.getUser(sessionUser); + // } else { + // userService = user.getUser(server); + // } return userService.verifyTOTPRegistration({ code, userId }, {}); } -export async function getUserByID( - userId: string, -): Promise { - const userService = user.getUser(server); - +export async function getUserByID(userId: string) { return userService.getUserByID({ userId }, {}); } -export async function listUsers( - userName: string, - organizationId: string, -): Promise { - const userService = user.getUser(server); - +export async function listUsers(userName: string, organizationId: string) { return userService.listUsers( { queries: organizationId ? [ { - userNameQuery: { - userName, - method: TextQueryMethod.TEXT_QUERY_METHOD_EQUALS, + query: { + case: "userNameQuery", + value: { + userName, + method: TextQueryMethod.EQUALS, + }, }, }, { - organizationIdQuery: { - organizationId, + query: { + case: "organizationIdQuery", + value: { + organizationId, + }, }, }, ] : [ { - userNameQuery: { - userName, - method: TextQueryMethod.TEXT_QUERY_METHOD_EQUALS, + query: { + case: "userNameQuery", + value: { + userName, + method: TextQueryMethod.EQUALS, + }, }, }, ], @@ -384,64 +286,52 @@ export async function listUsers( ); } -export async function getOrgByDomain( - domain: string, -): Promise { - const mgmtService = management.getManagement(server); - return mgmtService.getOrgByDomainGlobal({ domain }, {}); +export async function getOrgByDomain(domain: string) { + return managementService.getOrgByDomainGlobal({ domain }, {}); } -export async function startIdentityProviderFlow( - server: ZitadelServer, - { idpId, urls }: StartIdentityProviderIntentRequest, -): Promise { - const userService = user.getUser(server); - +export async function startIdentityProviderFlow({ + idpId, + urls, +}: { + idpId: string; + urls: PlainMessage; +}) { return userService.startIdentityProviderIntent({ idpId, - urls, + content: { + case: "urls", + value: urls, + }, }); } -export async function retrieveIdentityProviderInformation( - server: ZitadelServer, - { idpIntentId, idpIntentToken }: RetrieveIdentityProviderIntentRequest, -): Promise { - const userService = user.getUser(server); - +export async function retrieveIdentityProviderInformation({ + idpIntentId, + idpIntentToken, +}: RetrieveIdentityProviderIntentRequest) { return userService.retrieveIdentityProviderIntent({ idpIntentId, idpIntentToken, }); } -export async function getAuthRequest( - server: ZitadelServer, - { authRequestId }: GetAuthRequestRequest, -): Promise { - const oidcService = oidc.getOidc(server); - +export async function getAuthRequest({ + authRequestId, +}: { + authRequestId: string; +}) { return oidcService.getAuthRequest({ authRequestId, }); } -export async function createCallback( - server: ZitadelServer, - req: CreateCallbackRequest, -): Promise { - const oidcService = oidc.getOidc(server); - +export async function createCallback(req: PlainMessage) { return oidcService.createCallback(req); } -export async function verifyEmail( - server: ZitadelServer, - userId: string, - verificationCode: string, -): Promise { - const userservice = user.getUser(server); - return userservice.verifyEmail( +export async function verifyEmail(userId: string, verificationCode: string) { + return userService.verifyEmail( { userId, verificationCode, @@ -452,16 +342,25 @@ export async function verifyEmail( /** * - * @param server * @param userId the id of the user where the email should be set * @returns the newly set email */ -export async function setEmail( - server: ZitadelServer, - userId: string, -): Promise { - const userservice = user.getUser(server); - return userservice.setEmail( +export async function resendEmailCode(userId: string) { + return userService.resendEmailCode( + { + userId, + }, + {}, + ); +} + +/** + * + * @param userId the id of the user where the email should be set + * @returns the newly set email + */ +export async function passwordReset(userId: string): Promise { + return userService.passwordReset( { userId, }, @@ -478,41 +377,38 @@ export async function setEmail( export async function createPasskeyRegistrationLink( userId: string, token?: string, -): Promise { - let userService; - if (token) { - const authConfig: ZitadelServerOptions = { - name: "zitadel login", - apiUrl: process.env.ZITADEL_API_URL ?? "", - token: token, - }; - - const sessionUser = initializeServer(authConfig); - userService = user.getUser(sessionUser); - } else { - userService = user.getUser(server); - } +) { + // let userService; + // if (token) { + // const authConfig: ZitadelServerOptions = { + // name: "zitadel login", + // apiUrl: process.env.ZITADEL_API_URL ?? "", + // token: token, + // }; + // + // const sessionUser = initializeServer(authConfig); + // userService = user.getUser(sessionUser); + // } else { + // userService = user.getUser(server); + // } return userService.createPasskeyRegistrationLink({ userId, - returnCode: {}, + medium: { + case: "returnCode", + value: {}, + }, }); } /** * - * @param server * @param userId the id of the user where the email should be set * @param domain the domain on which the factor is registered * @returns the newly set email */ -export async function registerU2F( - userId: string, - domain: string, -): Promise { - const userservice = user.getUser(server); - - return userservice.registerU2F({ +export async function registerU2F(userId: string, domain: string) { + return userService.registerU2F({ userId, domain, }); @@ -520,27 +416,22 @@ export async function registerU2F( /** * - * @param server * @param userId the id of the user where the email should be set * @param domain the domain on which the factor is registered * @returns the newly set email */ export async function verifyU2FRegistration( - request: VerifyU2FRegistrationRequest, -): Promise { - const userservice = user.getUser(server); - - return userservice.verifyU2FRegistration(request, {}); + request: PlainMessage, +) { + return userService.verifyU2FRegistration(request, {}); } /** * - * @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: @@ -549,9 +440,8 @@ export async function verifyPasskeyRegistration( } | undefined, userId: string, -): Promise { - const userservice = user.getUser(server); - return userservice.verifyPasskeyRegistration( +) { + return userService.verifyPasskeyRegistration( { passkeyId, passkeyName, @@ -564,7 +454,6 @@ export async function verifyPasskeyRegistration( /** * - * @param server * @param userId the id of the user where the email should be set * @returns the newly set email */ @@ -572,9 +461,8 @@ export async function registerPasskey( userId: string, code: { id: string; code: string }, domain: string, -): Promise { - const userservice = user.getUser(server); - return userservice.registerPasskey({ +) { + return userService.registerPasskey({ userId, code, domain, @@ -584,17 +472,11 @@ export async function registerPasskey( /** * - * @param server * @param userId the id of the user where the email should be set * @returns the newly set email */ -export async function listAuthenticationMethodTypes( - userId: string, -): Promise { - const userservice = user.getUser(server); - return userservice.listAuthenticationMethodTypes({ +export async function listAuthenticationMethodTypes(userId: string) { + return userService.listAuthenticationMethodTypes({ userId, }); } - -export { server }; diff --git a/apps/login/src/middleware.ts b/apps/login/src/middleware.ts index 504d0fd5..ab98c0f0 100644 --- a/apps/login/src/middleware.ts +++ b/apps/login/src/middleware.ts @@ -2,7 +2,12 @@ import { NextResponse } from "next/server"; import type { NextRequest } from "next/server"; export const config = { - matcher: ["/.well-known/:path*", "/oauth/:path*", "/oidc/:path*"], + matcher: [ + "/.well-known/:path*", + "/oauth/:path*", + "/oidc/:path*", + "/idps/callback/:path*", + ], }; const INSTANCE = process.env.ZITADEL_API_URL; diff --git a/apps/login/src/ui/BackButton.tsx b/apps/login/src/ui/BackButton.tsx new file mode 100644 index 00000000..b2f04ad5 --- /dev/null +++ b/apps/login/src/ui/BackButton.tsx @@ -0,0 +1,17 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { Button, ButtonVariants } from "./Button"; + +export default function BackButton() { + const router = useRouter(); + return ( + + ); +} diff --git a/apps/login/src/ui/ChooseSecondFactor.tsx b/apps/login/src/ui/ChooseSecondFactor.tsx index 46cef177..48154cf0 100644 --- a/apps/login/src/ui/ChooseSecondFactor.tsx +++ b/apps/login/src/ui/ChooseSecondFactor.tsx @@ -1,15 +1,11 @@ "use client"; -import { - AuthenticationMethodType, - LoginSettings, - login, -} from "@zitadel/server"; import Link from "next/link"; import { BadgeState, StateBadge } from "./StateBadge"; import clsx from "clsx"; import { CheckIcon } from "@heroicons/react/24/outline"; import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods"; +import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2beta/user_service_pb"; type Props = { loginName?: string; @@ -46,10 +42,14 @@ export default function ChooseSecondFactor({ {userMethods.map((method, i) => { return (
- {method === 4 && TOTP(false, "/otp/time-based?" + params)} - {method === 5 && U2F(false, "/u2f?" + params)} - {method === 7 && EMAIL(false, "/otp/email?" + params)} - {method === 6 && SMS(false, "/otp/sms?" + params)} + {method === AuthenticationMethodType.TOTP && + TOTP(false, "/otp/time-based?" + params)} + {method === AuthenticationMethodType.U2F && + U2F(false, "/u2f?" + params)} + {method === AuthenticationMethodType.OTP_EMAIL && + EMAIL(false, "/otp/email?" + params)} + {method === AuthenticationMethodType.OTP_SMS && + SMS(false, "/otp/sms?" + params)}
); })} diff --git a/apps/login/src/ui/ChooseSecondFactorToSetup.tsx b/apps/login/src/ui/ChooseSecondFactorToSetup.tsx index f868a235..de502cb8 100644 --- a/apps/login/src/ui/ChooseSecondFactorToSetup.tsx +++ b/apps/login/src/ui/ChooseSecondFactorToSetup.tsx @@ -1,7 +1,8 @@ "use client"; -import { AuthenticationMethodType, LoginSettings } from "@zitadel/server"; import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods"; +import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2beta/login_settings_pb"; +import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2beta/user_service_pb"; type Props = { loginName?: string; @@ -48,13 +49,25 @@ export default function ChooseSecondFactorToSetup({
{loginSettings.secondFactors.map((factor, i) => { return factor === 1 - ? TOTP(userMethods.includes(4), "/otp/time-based/set?" + params) + ? TOTP( + userMethods.includes(AuthenticationMethodType.TOTP), + "/otp/time-based/set?" + params, + ) : factor === 2 - ? U2F(userMethods.includes(5), "/u2f/set?" + params) + ? U2F( + userMethods.includes(AuthenticationMethodType.U2F), + "/u2f/set?" + params, + ) : factor === 3 && emailVerified - ? EMAIL(userMethods.includes(7), "/otp/email/set?" + params) + ? EMAIL( + userMethods.includes(AuthenticationMethodType.OTP_EMAIL), + "/otp/email/set?" + params, + ) : factor === 4 && phoneVerified - ? SMS(userMethods.includes(6), "/otp/sms/set?" + params) + ? SMS( + userMethods.includes(AuthenticationMethodType.OTP_SMS), + "/otp/sms/set?" + params, + ) : null; })}
diff --git a/apps/login/src/ui/DynamicTheme.tsx b/apps/login/src/ui/DynamicTheme.tsx index 0a91d8a5..6c8a1ffe 100644 --- a/apps/login/src/ui/DynamicTheme.tsx +++ b/apps/login/src/ui/DynamicTheme.tsx @@ -1,10 +1,10 @@ "use client"; -import { BrandingSettings } from "@zitadel/server"; import React from "react"; import { Logo } from "@/ui/Logo"; import ThemeWrapper from "./ThemeWrapper"; import { LayoutProviders } from "./LayoutProviders"; +import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2beta/branding_settings_pb"; export default function DynamicTheme({ branding, diff --git a/apps/login/src/ui/LoginOTP.tsx b/apps/login/src/ui/LoginOTP.tsx index 1235d6ec..03eca4da 100644 --- a/apps/login/src/ui/LoginOTP.tsx +++ b/apps/login/src/ui/LoginOTP.tsx @@ -2,14 +2,15 @@ import { useEffect, useRef, useState } from "react"; import { useRouter } from "next/navigation"; -import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64"; import { Button, ButtonVariants } from "./Button"; import Alert, { AlertType } from "./Alert"; import { Spinner } from "./Spinner"; -import { Checks } from "@zitadel/server"; import { useForm } from "react-hook-form"; import { TextInput } from "./Input"; -import { Challenges } from "@zitadel/server"; +import BackButton from "./BackButton"; +import { Checks } from "@zitadel/proto/zitadel/session/v2beta/session_service_pb"; +import { PlainMessage } from "@zitadel/client2"; +import { Challenges } from "@zitadel/proto/zitadel/session/v2beta/challenge_pb"; // either loginName or sessionId must be provided type Props = { @@ -63,7 +64,7 @@ export default function LoginOTP({ }, []); async function updateSessionForOTPChallenge() { - const challenges: Challenges = {}; + const challenges: PlainMessage = {}; if (method === "email") { challenges.otpEmail = ""; @@ -111,7 +112,7 @@ export default function LoginOTP({ body.authRequestId = authRequestId; } - const checks: Checks = {}; + const checks: PlainMessage = {}; if (method === "sms") { checks.otpSms = { code: values.code }; } @@ -228,6 +229,7 @@ export default function LoginOTP({ )}
+ + )} diff --git a/apps/login/src/ui/PasswordComplexity.tsx b/apps/login/src/ui/PasswordComplexity.tsx index 7b18dffb..35ee959c 100644 --- a/apps/login/src/ui/PasswordComplexity.tsx +++ b/apps/login/src/ui/PasswordComplexity.tsx @@ -4,7 +4,7 @@ import { symbolValidator, upperCaseValidator, } from "@/utils/validators"; -import { PasswordComplexitySettings } from "@zitadel/server"; +import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2beta/password_settings_pb"; type Props = { passwordComplexitySettings: PasswordComplexitySettings; @@ -68,7 +68,7 @@ export default function PasswordComplexity({
{hasMinLength ? check : cross} - Password length {passwordComplexitySettings.minLength} + Password length {passwordComplexitySettings.minLength.toString()}
) : ( diff --git a/apps/login/src/ui/PasswordForm.tsx b/apps/login/src/ui/PasswordForm.tsx index d9e766b6..bd76ff0d 100644 --- a/apps/login/src/ui/PasswordForm.tsx +++ b/apps/login/src/ui/PasswordForm.tsx @@ -7,12 +7,10 @@ import { useForm } from "react-hook-form"; import { useRouter } from "next/navigation"; import { Spinner } from "./Spinner"; import Alert from "./Alert"; -import { - LoginSettings, - AuthFactor, - Checks, - AuthenticationMethodType, -} from "@zitadel/server"; +import BackButton from "./BackButton"; +import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2beta/login_settings_pb"; +import { Checks } from "@zitadel/proto/zitadel/session/v2beta/session_service_pb"; +import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2beta/user_service_pb"; type Inputs = { password: string; @@ -66,6 +64,32 @@ export default function PasswordForm({ const response = await res.json(); + setLoading(false); + if (!res.ok) { + setError(response.details?.details ?? "Could not verify password"); + return Promise.reject(response.details); + } + return response; + } + + async function resetPassword() { + setError(""); + setLoading(true); + + const res = await fetch("/api/resetpassword", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + loginName, + organization, + authRequestId, + }), + }); + + const response = await res.json(); + setLoading(false); if (!res.ok) { console.log(response.details.details); @@ -81,10 +105,13 @@ export default function PasswordForm({ // if mfa is forced and user has no mfa -> /mfa/set // if no passwordless -> /passkey/add - // exclude password + // exclude password and passwordless const availableSecondFactors = resp.authMethods?.filter( - (m: AuthenticationMethodType) => m !== 1, + (m: AuthenticationMethodType) => + m !== AuthenticationMethodType.PASSWORD && + m !== AuthenticationMethodType.PASSKEY, ); + if (availableSecondFactors.length == 1) { const params = new URLSearchParams({ loginName: resp.factors.user.loginName, @@ -99,13 +126,14 @@ export default function PasswordForm({ } const factor = availableSecondFactors[0]; - if (factor === 4) { + // if passwordless is other method, but user selected password as alternative, perform a login + if (factor === AuthenticationMethodType.TOTP) { return router.push(`/otp/time-based?` + params); - } else if (factor === 6) { + } else if (factor === AuthenticationMethodType.OTP_SMS) { return router.push(`/otp/sms?` + params); - } else if (factor === 7) { + } else if (factor === AuthenticationMethodType.OTP_EMAIL) { return router.push(`/otp/email?` + params); - } else if (factor === 5) { + } else if (factor === AuthenticationMethodType.U2F) { return router.push(`/u2f?` + params); } } else if (availableSecondFactors.length >= 1) { @@ -122,10 +150,15 @@ export default function PasswordForm({ } return router.push(`/mfa?` + params); - } else if (loginSettings?.forceMfa && !availableSecondFactors.length) { + } else if ( + resp.factors && + !resp.factors.passwordless && // if session was not verified with a passkey + promptPasswordless && // if explicitly prompted due policy + !isAlternative // escaped if password was used as an alternative method + ) { const params = new URLSearchParams({ loginName: resp.factors.user.loginName, - checkAfter: "true", // this defines if the check is directly made after the setup + promptPasswordless: "true", }); if (authRequestId) { @@ -136,16 +169,11 @@ export default function PasswordForm({ params.append("organization", organization); } - return router.push(`/mfa/set?` + params); - } else if ( - resp.factors && - !resp.factors.passwordless && // if session was not verified with a passkey - promptPasswordless && // if explicitly prompted due policy - !isAlternative // escaped if password was used as an alternative method - ) { + return router.push(`/passkey/add?` + params); + } else if (loginSettings?.forceMfa && !availableSecondFactors.length) { const params = new URLSearchParams({ loginName: resp.factors.user.loginName, - promptPasswordless: "true", + checkAfter: "true", // this defines if the check is directly made after the setup }); if (authRequestId) { @@ -156,8 +184,8 @@ export default function PasswordForm({ params.append("organization", organization); } - return router.push(`/passkey/add?` + params); - } else if (authRequestId && resp && resp.sessionId) { + return router.push(`/mfa/set?` + params); + } else if (authRequestId && resp.sessionId) { const params = new URLSearchParams({ sessionId: resp.sessionId, authRequest: authRequestId, @@ -200,6 +228,14 @@ export default function PasswordForm({ label="Password" // error={errors.username?.message as string} /> + {loginName && ( @@ -213,9 +249,7 @@ export default function PasswordForm({ )}
- {/* */} + + ) : ( - + )} diff --git a/apps/login/src/ui/RegisterU2F.tsx b/apps/login/src/ui/RegisterU2F.tsx index 71ccad81..7a1ccf4f 100644 --- a/apps/login/src/ui/RegisterU2F.tsx +++ b/apps/login/src/ui/RegisterU2F.tsx @@ -6,8 +6,10 @@ import { useForm } from "react-hook-form"; import { useRouter } from "next/navigation"; import { Spinner } from "./Spinner"; import Alert from "./Alert"; -import { RegisterU2FResponse } from "@zitadel/server"; import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64"; +import BackButton from "./BackButton"; +import { RegisterU2FResponse } from "@zitadel/proto/zitadel/user/v2beta/user_service_pb"; + type Inputs = {}; type Props = { @@ -87,37 +89,31 @@ export default function RegisterU2F({ function submitRegisterAndContinue(value: Inputs): Promise { return submitRegister().then((resp: RegisterU2FResponse) => { const u2fId = resp.u2fId; - - if ( - resp.publicKeyCredentialCreationOptions && - resp.publicKeyCredentialCreationOptions.publicKey - ) { - resp.publicKeyCredentialCreationOptions.publicKey.challenge = - coerceToArrayBuffer( - resp.publicKeyCredentialCreationOptions.publicKey.challenge, - "challenge", - ); - resp.publicKeyCredentialCreationOptions.publicKey.user.id = - coerceToArrayBuffer( - resp.publicKeyCredentialCreationOptions.publicKey.user.id, - "userid", - ); - if ( - resp.publicKeyCredentialCreationOptions.publicKey.excludeCredentials - ) { - resp.publicKeyCredentialCreationOptions.publicKey.excludeCredentials.map( - (cred: any) => { - cred.id = coerceToArrayBuffer( - cred.id as string, - "excludeCredentials.id", - ); - return cred; - }, - ); + const options: CredentialCreationOptions = + (resp.publicKeyCredentialCreationOptions?.toJson() as CredentialCreationOptions) ?? + {}; + + if (options.publicKey) { + options.publicKey.challenge = coerceToArrayBuffer( + options.publicKey.challenge, + "challenge", + ); + options.publicKey.user.id = coerceToArrayBuffer( + options.publicKey.user.id, + "userid", + ); + if (options.publicKey.excludeCredentials) { + options.publicKey.excludeCredentials.map((cred: any) => { + cred.id = coerceToArrayBuffer( + cred.id as string, + "excludeCredentials.id", + ); + return cred; + }); } navigator.credentials - .create(resp.publicKeyCredentialCreationOptions) + .create(options) .then((resp) => { if ( resp && @@ -191,13 +187,7 @@ export default function RegisterU2F({ )}
- +
diff --git a/apps/login/src/ui/SessionsList.tsx b/apps/login/src/ui/SessionsList.tsx index a7e0c4cf..d55679f8 100644 --- a/apps/login/src/ui/SessionsList.tsx +++ b/apps/login/src/ui/SessionsList.tsx @@ -1,9 +1,9 @@ "use client"; -import { Session } from "@zitadel/server"; import SessionItem from "./SessionItem"; import Alert from "./Alert"; import { useEffect, useState } from "react"; +import { Session } from "@zitadel/proto/zitadel/session/v2beta/session_pb"; type Props = { sessions: Session[]; diff --git a/apps/login/src/ui/SetPasswordForm.tsx b/apps/login/src/ui/SetPasswordForm.tsx index ed74d7b6..177d302a 100644 --- a/apps/login/src/ui/SetPasswordForm.tsx +++ b/apps/login/src/ui/SetPasswordForm.tsx @@ -1,6 +1,5 @@ "use client"; -import { PasswordComplexitySettings } from "@zitadel/server"; import PasswordComplexity from "./PasswordComplexity"; import { useState } from "react"; import { Button, ButtonVariants } from "./Button"; @@ -15,6 +14,7 @@ import { import { useRouter } from "next/navigation"; import { Spinner } from "./Spinner"; import Alert from "./Alert"; +import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2beta/password_settings_pb"; type Inputs = | { diff --git a/apps/login/src/ui/SignInWithIDP.tsx b/apps/login/src/ui/SignInWithIDP.tsx index 4e749999..a249690b 100644 --- a/apps/login/src/ui/SignInWithIDP.tsx +++ b/apps/login/src/ui/SignInWithIDP.tsx @@ -10,11 +10,13 @@ import { import { useRouter } from "next/navigation"; import { ProviderSlug } from "@/lib/demos"; import Alert from "./Alert"; +import BackButton from "./BackButton"; +import { IdentityProvider } from "@zitadel/proto/zitadel/settings/v2beta/login_settings_pb"; export interface SignInWithIDPProps { children?: ReactNode; host: string; - identityProviders: any[]; + identityProviders: IdentityProvider[]; authRequestId?: string; organization?: string; startIDPFlowPath?: (idpId: string) => string; @@ -30,6 +32,11 @@ export function SignInWithIDP({ organization, startIDPFlowPath = START_IDP_FLOW_PATH, }: SignInWithIDPProps) { + // TODO: remove casting when bufbuild/protobuf-es@v2 is released + identityProviders = identityProviders.map((idp) => + IdentityProvider.fromJson(idp as any), + ); + const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const router = useRouter(); @@ -141,6 +148,10 @@ export function SignInWithIDP({ {error}
)} +
+ + +
); } diff --git a/apps/login/src/ui/TOTPRegister.tsx b/apps/login/src/ui/TOTPRegister.tsx index c24c18fd..bdec18af 100644 --- a/apps/login/src/ui/TOTPRegister.tsx +++ b/apps/login/src/ui/TOTPRegister.tsx @@ -10,7 +10,6 @@ import { useState } from "react"; import { useForm } from "react-hook-form"; import { useRouter } from "next/navigation"; import { verifyTOTP } from "@/lib/server-actions"; -import { login } from "@zitadel/server"; type Inputs = { code: string; diff --git a/apps/login/src/ui/ThemeWrapper.tsx b/apps/login/src/ui/ThemeWrapper.tsx index 9c9d0bc0..2cfdcbc0 100644 --- a/apps/login/src/ui/ThemeWrapper.tsx +++ b/apps/login/src/ui/ThemeWrapper.tsx @@ -1,11 +1,12 @@ "use client"; -import { BrandingSettings } from "@zitadel/server"; import { setTheme } from "@/utils/colors"; import { useEffect } from "react"; +import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2beta/branding_settings_pb"; +import { PartialMessage } from "@zitadel/client2"; type Props = { - branding: Partial | undefined; + branding: PartialMessage | undefined; children: React.ReactNode; }; diff --git a/apps/login/src/ui/UsernameForm.tsx b/apps/login/src/ui/UsernameForm.tsx index e1f42a8c..39a8959a 100644 --- a/apps/login/src/ui/UsernameForm.tsx +++ b/apps/login/src/ui/UsernameForm.tsx @@ -6,8 +6,11 @@ import { TextInput } from "./Input"; import { useForm } from "react-hook-form"; import { useRouter } from "next/navigation"; import { Spinner } from "./Spinner"; -import { LoginSettings } from "@zitadel/server"; import Alert from "./Alert"; +import { + LoginSettings, + PasskeysType, +} from "@zitadel/proto/zitadel/settings/v2beta/login_settings_pb"; type Inputs = { loginName: string; @@ -19,6 +22,7 @@ type Props = { authRequestId: string | undefined; organization?: string; submit: boolean; + allowRegister: boolean; }; export default function UsernameForm({ @@ -27,6 +31,7 @@ export default function UsernameForm({ authRequestId, organization, submit, + allowRegister, }: Props) { const { register, handleSubmit, formState } = useForm({ mode: "onBlur", @@ -77,6 +82,7 @@ export default function UsernameForm({ values: Inputs, organization?: string, ) { + console.log(loginSettings); return submitLoginName(values, organization).then((response) => { if (response.authMethodTypes.length == 1) { const method = response.authMethodTypes[0]; @@ -90,8 +96,13 @@ export default function UsernameForm({ paramsPassword.organization = organization; } - if (loginSettings?.passkeysType === 1) { - paramsPassword.promptPasswordless = `true`; // PasskeysType.PASSKEYS_TYPE_ALLOWED, + if ( + loginSettings?.passkeysType && + (loginSettings?.passkeysType === PasskeysType.ALLOWED || + (loginSettings.passkeysType as string) === + "PASSKEYS_TYPE_ALLOWED") + ) { + paramsPassword.promptPasswordless = `true`; } if (authRequestId) { @@ -208,6 +219,16 @@ export default function UsernameForm({ )}
+ {allowRegister && ( + + )}