TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 19:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #33 from zitadel/login-passkey

Browse Source 
feat(passkey): login
This commit is contained in:
Max Peintner
2023-07-05 19:17:30 +02:00
committed by GitHub
parent c252379dee dafe5fe25a
commit 0954b9372e
38 changed files with 1091 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/login/app/(login)/accounts/page.tsx
View File

@@ -22,6 +22,7 @@ async function loadSessions(): Promise<Session[]> {
export default async function Page() {
let sessions = await loadSessions();
return (
<div className="flex flex-col items-center space-y-4">
<h1>Accounts</h1>
@@ -29,7 +30,7 @@ export default async function Page() {
<div className="flex flex-col w-full space-y-2">
<SessionsList sessions={sessions} />
<Link href="/username">
<Link href="/loginname">
<div className="flex flex-row items-center py-3 px-4 hover:bg-black/10 dark:hover:bg-white/10 rounded-md transition-all">
<div className="w-8 h-8 mr-4 flex flex-row justify-center items-center rounded-full bg-black/5 dark:bg-white/5">
<UserPlusIcon className="h-5 w-5" />

26
apps/login/app/(login)/loginname/page.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { getLoginSettings, server } from "#/lib/zitadel";
import UsernameForm from "#/ui/UsernameForm";
export default async function Page({
searchParams,
}: {
searchParams: Record<string | number | symbol, string | undefined>;
}) {
const loginName = searchParams?.loginName;
const submit: boolean = searchParams?.submit === "true";
const loginSettings = await getLoginSettings(server);
return (
<div className="flex flex-col items-center space-y-4">
<h1>Welcome back!</h1>
<p className="ztdl-p">Enter your login data.</p>
<UsernameForm
loginSettings={loginSettings}
loginName={loginName}
submit={submit}
/>
</div>
);
}

34
apps/login/app/(login)/passkey/page.tsx → apps/login/app/(login)/passkey/login/page.tsx
View File

@@ -1,19 +1,24 @@
import { getSession, server } from "#/lib/zitadel";
import Alert from "#/ui/Alert";
import LoginPasskey from "#/ui/LoginPasskey";
import UserAvatar from "#/ui/UserAvatar";
import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
const title = "Authenticate with a passkey";
const description =
"Your device will ask for your fingerprint, face, or screen lock";
export default async function Page({
searchParams,
}: {
searchParams: Record<string | number | symbol, string | undefined>;
}) {
const { loginName } = searchParams;
const { loginName, altPassword } = searchParams;
const sessionFactors = await loadSession(loginName);
async function loadSession(loginName?: string) {
const recent = await getMostRecentCookieWithLoginname(loginName);
return getSession(server, recent.id, recent.token).then((response) => {
if (response?.session) {
return response.session;
@@ -23,16 +28,7 @@ export default async function Page({
return (
<div className="flex flex-col items-center space-y-4">
<h1>Login with Passkey</h1>
<p className="ztdl-p mb-6 block">Authenticate with your passkey device</p>
{!sessionFactors && (
<div className="py-4">
<Alert>
Could not get the context of the user. Make sure to enter the
username first or provide a loginName as searchParam.
</Alert>
</div>
)}
<h1>{title}</h1>
{sessionFactors && (
<UserAvatar
@@ -41,6 +37,20 @@ export default async function Page({
showDropdown
></UserAvatar>
)}
<p className="ztdl-p mb-6 block">{description}</p>
{!sessionFactors && <div className="py-4"></div>}
{!loginName && (
<Alert>Provide your active session as loginName param</Alert>
)}
{loginName && (
<LoginPasskey
loginName={loginName}
altPassword={altPassword === "true"}
/>
)}
</div>
);
}

8
apps/login/app/(login)/password/page.tsx
View File

@@ -9,7 +9,7 @@ export default async function Page({
}: {
searchParams: Record<string | number | symbol, string | undefined>;
}) {
const { loginName } = searchParams;
const { loginName, promptPasswordless, alt } = searchParams;
const sessionFactors = await loadSession(loginName);
async function loadSession(loginName?: string) {
@@ -44,7 +44,11 @@ export default async function Page({
></UserAvatar>
)}
<PasswordForm loginName={loginName} />
<PasswordForm
loginName={loginName}
promptPasswordless={promptPasswordless === "true"}
isAlternative={alt === "true"}
/>
</div>
);
}

12
apps/login/app/(login)/username/page.tsx
View File

@@ -1,12 +0,0 @@
import UsernameForm from "#/ui/UsernameForm";
export default function Page() {
return (
<div className="flex flex-col items-center space-y-4">
<h1>Welcome back!</h1>
<p className="ztdl-p">Enter your login data.</p>
<UsernameForm />
</div>
);
}

79
apps/login/app/api/loginname/route.ts Normal file
View File

@@ -0,0 +1,79 @@
import {
getSession,
listAuthenticationMethodTypes,
server,
} from "#/lib/zitadel";
import { getSessionCookieById } from "#/utils/cookies";
import { createSessionAndUpdateCookie } from "#/utils/session";
import { NextRequest, NextResponse } from "next/server";
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const sessionId = searchParams.get("sessionId");
if (sessionId) {
const sessionCookie = await getSessionCookieById(sessionId);
const session = await getSession(
server,
sessionCookie.id,
sessionCookie.token
);
const userId = session?.session?.factors?.user?.id;
if (userId) {
return listAuthenticationMethodTypes(userId)
.then((methods) => {
return NextResponse.json(methods);
})
.catch((error) => {
return NextResponse.json(error, { status: 500 });
});
} else {
return NextResponse.json(
{ details: "could not get session" },
{ status: 500 }
);
}
} else {
return NextResponse.json({}, { status: 400 });
}
}
export async function POST(request: NextRequest) {
const body = await request.json();
if (body) {
const { loginName } = body;
const domain: string = request.nextUrl.hostname;
return createSessionAndUpdateCookie(loginName, undefined, domain, undefined)
.then((session) => {
if (session.factors?.user?.id) {
return listAuthenticationMethodTypes(session.factors?.user?.id)
.then((methods) => {
return NextResponse.json({
authMethodTypes: methods.authMethodTypes,
sessionId: session.id,
factors: session.factors,
});
})
.catch((error) => {
return NextResponse.json(error, { status: 500 });
});
} else {
throw "No user id found in session";
}
})
.catch((error) => {
return NextResponse.json(
{
details: "could not add session to cookie",
},
{ status: 500 }
);
});
} else {
return NextResponse.error();
}
}

0
apps/login/app/passkeys/route.ts → apps/login/app/api/passkeys/route.ts
View File

0
apps/login/app/passkeys/verify/route.ts → apps/login/app/api/passkeys/verify/route.ts
View File

0
apps/login/app/registeruser/route.ts → apps/login/app/api/registeruser/route.ts
View File

0
apps/login/app/resendverifyemail/route.ts → apps/login/app/api/resendverifyemail/route.ts
View File

120
apps/login/app/api/session/route.ts Normal file
View File

@@ -0,0 +1,120 @@
import { server, deleteSession } from "#/lib/zitadel";
import {
SessionCookie,
getMostRecentSessionCookie,
getSessionCookieById,
getSessionCookieByLoginName,
removeSessionFromCookie,
} from "#/utils/cookies";
import {
createSessionAndUpdateCookie,
setSessionAndUpdateCookie,
} from "#/utils/session";
import { NextRequest, NextResponse } from "next/server";
export async function POST(request: NextRequest) {
const body = await request.json();
if (body) {
const { loginName, password } = body;
const domain: string = request.nextUrl.hostname;
return createSessionAndUpdateCookie(
loginName,
password,
domain,
undefined
).then((session) => {
return NextResponse.json(session);
});
} else {
return NextResponse.json(
{ details: "Session could not be created" },
{ status: 500 }
);
}
}
/**
*
* @param request password for the most recent session
* @returns the updated most recent Session with the added password
*/
export async function PUT(request: NextRequest) {
const body = await request.json();
if (body) {
const { loginName, password, challenges, passkey } = body;
const recentPromise: Promise<SessionCookie> = loginName
? getSessionCookieByLoginName(loginName).catch((error) => {
return Promise.reject(error);
})
: getMostRecentSessionCookie().catch((error) => {
return Promise.reject(error);
});
const domain: string = request.nextUrl.hostname;
return recentPromise
.then((recent) => {
return setSessionAndUpdateCookie(
recent.id,
recent.token,
recent.loginName,
password,
passkey,
domain,
challenges
).then((session) => {
return NextResponse.json({
sessionId: session.id,
factors: session.factors,
challenges: session.challenges,
});
});
})
.catch((error) => {
return NextResponse.json({ details: error }, { status: 500 });
});
} else {
return NextResponse.json(
{ details: "Request body is missing" },
{ status: 400 }
);
}
}
/**
*
* @param request id of the session to be deleted
*/
export async function DELETE(request: NextRequest) {
const { searchParams } = new URL(request.url);
const id = searchParams.get("id");
if (id) {
const session = await getSessionCookieById(id);
return deleteSession(server, session.id, session.token)
.then(() => {
return removeSessionFromCookie(session)
.then(() => {
return NextResponse.json({});
})
.catch((error) => {
return NextResponse.json(
{ details: "could not set cookie" },
{ status: 500 }
);
});
})
.catch((error) => {
return NextResponse.json(
{ details: "could not delete session" },
{ status: 500 }
);
});
} else {
return NextResponse.error();
}
}

0
apps/login/app/verifyemail/route.ts → apps/login/app/api/verifyemail/route.ts
View File

176
apps/login/app/session/route.ts
View File

@@ -1,176 +0,0 @@
import {
createSession,
getSession,
server,
setSession,
deleteSession,
} from "#/lib/zitadel";
import {
SessionCookie,
addSessionToCookie,
getMostRecentSessionCookie,
getSessionCookieById,
removeSessionFromCookie,
updateSessionCookie,
} from "#/utils/cookies";
import { NextRequest, NextResponse } from "next/server";
export async function POST(request: NextRequest) {
const body = await request.json();
if (body) {
const { loginName, password } = body;
const domain: string = request.nextUrl.hostname;
const createdSession = await createSession(
server,
loginName,
password,
domain
);
if (createdSession) {
return getSession(
server,
createdSession.sessionId,
createdSession.sessionToken
).then((response) => {
if (response?.session && response.session?.factors?.user?.loginName) {
const sessionCookie: SessionCookie = {
id: createdSession.sessionId,
token: createdSession.sessionToken,
changeDate: response.session.changeDate?.toString() ?? "",
loginName: response.session?.factors?.user?.loginName ?? "",
};
return addSessionToCookie(sessionCookie).then(() => {
return NextResponse.json({
sessionId: createdSession.sessionId,
factors: response?.session?.factors,
});
});
} else {
return NextResponse.json(
{
details:
"could not get session or session does not have loginName",
},
{ status: 500 }
);
}
});
} else {
return NextResponse.error();
}
} else {
return NextResponse.json(
{ details: "Session could not be created" },
{ status: 500 }
);
}
}
/**
*
* @param request password for the most recent session
* @returns the updated most recent Session with the added password
*/
export async function PUT(request: NextRequest) {
const body = await request.json();
if (body) {
const { password } = body;
const recent = await getMostRecentSessionCookie();
return setSession(server, recent.id, recent.token, password)
.then((session) => {
if (session) {
const sessionCookie: SessionCookie = {
id: recent.id,
token: session.sessionToken,
changeDate: session.details?.changeDate?.toString() ?? "",
loginName: recent.loginName,
};
return getSession(server, sessionCookie.id, sessionCookie.token).then(
(response) => {
if (
response?.session &&
response.session.factors?.user?.loginName
) {
const { session } = response;
const newCookie: SessionCookie = {
id: sessionCookie.id,
token: sessionCookie.token,
changeDate: session.changeDate?.toString() ?? "",
loginName: session.factors?.user?.loginName ?? "",
};
return updateSessionCookie(sessionCookie.id, newCookie)
.then(() => {
return NextResponse.json({ factors: session.factors });
})
.catch((error) => {
return NextResponse.json(
{ details: "could not set cookie" },
{ status: 500 }
);
});
} else {
return NextResponse.json(
{
details:
"could not get session or session does not have loginName",
},
{ status: 500 }
);
}
}
);
} else {
return NextResponse.json(
{ details: "Session not be set" },
{ status: 500 }
);
}
})
.catch((error) => {
return NextResponse.json(error, { status: 500 });
});
} else {
return NextResponse.error();
}
}
/**
*
* @param request id of the session to be deleted
*/
export async function DELETE(request: NextRequest) {
const { searchParams } = new URL(request.url);
const id = searchParams.get("id");
if (id) {
const session = await getSessionCookieById(id);
return deleteSession(server, session.id, session.token)
.then(() => {
return removeSessionFromCookie(session)
.then(() => {
return NextResponse.json({ factors: session.factors });
})
.catch((error) => {
return NextResponse.json(
{ details: "could not set cookie" },
{ status: 500 }
);
});
})
.catch((error) => {
return NextResponse.json(
{ details: "could not delete session" },
{ status: 500 }
);
});
} else {
return NextResponse.error();
}
}

112
apps/login/cypress/integration/login.cy.ts Normal file
View File

@@ -0,0 +1,112 @@
import { stub } from "../support/mock";
describe("login", () => {
beforeEach(() => {
stub("zitadel.session.v2alpha.SessionService", "CreateSession", {
data: {
details: {
sequence: 859,
changeDate: "2023-07-04T07:58:20.126Z",
resourceOwner: "220516472055706145",
},
sessionId: "221394658884845598",
sessionToken:
"SDMc7DlYXPgwRJ-Tb5NlLqynysHjEae3csWsKzoZWLplRji0AYY3HgAkrUEBqtLCvOayLJPMd0ax4Q",
challenges: undefined,
},
});
stub("zitadel.session.v2alpha.SessionService", "GetSession", {
data: {
session: {
id: "221394658884845598",
creationDate: "2023-07-04T07:58:20.026Z",
changeDate: "2023-07-04T07:58:20.126Z",
sequence: 859,
factors: {
user: {
id: "123",
loginName: "john@zitadel.com",
},
password: undefined,
passkey: undefined,
intent: undefined,
},
metadata: {},
domain: "localhost",
},
},
});
stub("zitadel.settings.v2alpha.SettingsService", "GetLoginSettings", {
data: {
settings: {
passkeysType: 1,
},
},
});
});
describe("password login", () => {
beforeEach(() => {
stub(
"zitadel.user.v2alpha.UserService",
"ListAuthenticationMethodTypes",
{
data: {
authMethodTypes: [1], // 1 for password authentication
},
}
);
});
it("should redirect a user with password authentication to /password", () => {
cy.visit("/loginname?loginName=johndoe%40zitadel.com&submit=true");
cy.location("pathname", { timeout: 10_000 }).should("eq", "/password");
});
describe("with passkey prompt", () => {
beforeEach(() => {
stub("zitadel.session.v2alpha.SessionService", "SetSession", {
data: {
details: {
sequence: 859,
changeDate: "2023-07-04T07:58:20.126Z",
resourceOwner: "220516472055706145",
},
sessionToken:
"SDMc7DlYXPgwRJ-Tb5NlLqynysHjEae3csWsKzoZWLplRji0AYY3HgAkrUEBqtLCvOayLJPMd0ax4Q",
challenges: undefined,
},
});
});
it("should prompt a user to setup passwordless authentication if passkey is allowed in the login settings", () => {
cy.visit("/loginname?loginName=john%40zitadel.com&submit=true");
cy.location("pathname", { timeout: 10_000 }).should("eq", "/password");
cy.get('input[type="password"]').focus().type("MyStrongPassword!1");
cy.get('button[type="submit"]').click();
cy.location("pathname", { timeout: 10_000 }).should(
"eq",
"/passkey/add"
);
});
});
});
describe("passkey login", () => {
beforeEach(() => {
stub(
"zitadel.user.v2alpha.UserService",
"ListAuthenticationMethodTypes",
{
data: {
authMethodTypes: [2], // 2 for passwordless authentication
},
}
);
});
it("should redirect a user with passwordless authentication to /passkey/login", () => {
cy.visit("/loginname?loginName=johndoe%40zitadel.com&submit=true");
cy.location("pathname", { timeout: 10_000 }).should(
"eq",
"/passkey/login"
);
});
});
});

22
apps/login/cypress/integration/register.cy.ts Normal file
View File

@@ -0,0 +1,22 @@
import { stub } from "../support/mock";
describe("register", () => {
beforeEach(() => {
stub("zitadel.user.v2alpha.UserService", "AddHumanUser", {
data: {
userId: "123",
},
});
});
it("should redirect a user who selects passwordless on register to /passkeys/add", () => {
cy.visit("/register");
cy.get('input[autocomplete="firstname"]').focus().type("John");
cy.get('input[autocomplete="lastname"]').focus().type("Doe");
cy.get('input[autocomplete="email"]').focus().type("john@zitadel.com");
cy.get('input[type="checkbox"][value="privacypolicy"]').check();
cy.get('input[type="checkbox"][value="tos"]').check();
cy.get('button[type="submit"]').click();
cy.location("pathname", { timeout: 10_000 }).should("eq", "/passkey/add");
});
});

10
apps/login/cypress/integration/verify.cy.ts
View File

@@ -1,15 +1,13 @@
import { addStub, removeStub } from "../support/mock";
import { stub } from "../support/mock";
describe("/verify", () => {
it("redirects after successful email verification", () => {
removeStub("zitadel.user.v2alpha.UserService", "VerifyEmail");
addStub("zitadel.user.v2alpha.UserService", "VerifyEmail");
stub("zitadel.user.v2alpha.UserService", "VerifyEmail");
cy.visit("/verify?userID=123&code=abc&submit=true");
cy.location("pathname", { timeout: 10_000 }).should("eq", "/username");
cy.location("pathname", { timeout: 10_000 }).should("eq", "/loginname");
});
it("shows an error if validation failed", () => {
removeStub("zitadel.user.v2alpha.UserService", "VerifyEmail");
addStub("zitadel.user.v2alpha.UserService", "VerifyEmail", {
stub("zitadel.user.v2alpha.UserService", "VerifyEmail", {
code: 3,
error: "error validating code",
});

15
apps/login/cypress/support/mock.ts
View File

@@ -1,24 +1,25 @@
export function removeStub(service: string, method: string) {
function removeStub(service: string, method: string) {
return cy.request({
url: "http://localhost:22220/v1/stubs",
method: "DELETE",
qs: {
service: service,
method: method,
service,
method,
},
});
}
export function addStub(service: string, method: string, out?: any) {
export function stub(service: string, method: string, out?: any) {
removeStub(service, method);
return cy.request({
url: "http://localhost:22220/v1/stubs",
method: "POST",
body: {
stubs: [
{
service: service,
method: method,
out: out,
service,
method,
out,
},
],
},

4
apps/login/lib/demos.ts
View File

@@ -9,8 +9,8 @@ export const demos: { name: string; items: Item[] }[] = [
name: "Login",
items: [
{
name: "Username",
slug: "username",
name: "Loginname",
slug: "loginname",
description: "The entrypoint of the application",
},
{

62
apps/login/lib/zitadel.ts
View File

@@ -21,6 +21,10 @@ import {
SetSessionResponse,
DeleteSessionResponse,
VerifyPasskeyRegistrationResponse,
ChallengeKind,
LoginSettings,
GetLoginSettingsResponse,
ListAuthenticationMethodTypesResponse,
} from "@zitadel/server";
export const zitadelConfig: ZitadelServerOptions = {
@@ -45,6 +49,15 @@ export async function getBrandingSettings(
.then((resp: GetBrandingSettingsResponse) => resp.settings);
}
export async function getLoginSettings(
server: ZitadelServer
): Promise<LoginSettings | undefined> {
const settingsService = settings.getSettings(server);
return settingsService
.getLoginSettings({}, {})
.then((resp: GetLoginSettingsResponse) => resp.settings);
}
export async function getGeneralSettings(
server: ZitadelServer
): Promise<string[] | undefined> {
@@ -78,29 +91,47 @@ export async function getPasswordComplexitySettings(
export async function createSession(
server: ZitadelServer,
loginName: string,
domain: string,
password: string | undefined,
domain: string
challenges: ChallengeKind[] | undefined
): Promise<CreateSessionResponse | undefined> {
const sessionService = session.getSession(server);
return password
? sessionService.createSession(
{ checks: { user: { loginName }, password: { password } }, domain },
{
checks: { user: { loginName }, password: { password } },
challenges,
domain,
},
{}
)
: sessionService.createSession({ checks: { user: { loginName } } }, {});
: sessionService.createSession(
{ checks: { user: { loginName } }, domain },
{}
);
}
export async function setSession(
server: ZitadelServer,
sessionId: string,
sessionToken: string,
password: string
domain: string | undefined,
password: string | undefined,
passkey: { credentialAssertionData: any } | undefined,
challenges: ChallengeKind[] | undefined
): Promise<SetSessionResponse | undefined> {
const sessionService = session.getSession(server);
return sessionService.setSession(
{ sessionId, sessionToken, checks: { password: { password } } },
{}
);
const payload = { sessionId, sessionToken, challenges, domain };
return password
? sessionService.setSession(
{
...payload,
checks: { password: { password }, passkey },
},
{}
)
: sessionService.setSession(payload, {});
}
export async function getSession(
@@ -265,4 +296,19 @@ 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<ListAuthenticationMethodTypesResponse> {
const userservice = user.getUser(server);
return userservice.listAuthenticationMethodTypes({
userId,
});
}
export { server };

22
apps/login/mock/initial-stubs/zitadel.settings.v2alpha.SettingsService.json
View File

@@ -7,11 +7,29 @@
{
"service": "zitadel.settings.v2alpha.SettingsService",
"method": "GetLegalAndSupportSettings",
"out": {}
"out": {
"data": {
"settings": {
"tosLink": "http://whatever.com/help",
"privacyPolicyLink": "http://whatever.com/help",
"helpLink": "http://whatever.com/help"
}
}
}
},
{
"service": "zitadel.settings.v2alpha.SettingsService",
"method": "GetPasswordComplexitySettings",
"out": {}
"out": {
"data": {
"settings": {
"minLength": 8,
"requiresUppercase": true,
"requiresLowercase": true,
"requiresNumber": true,
"requiresSymbol": true
}
}
}
}
]

3
apps/login/package.json
View File

@@ -42,13 +42,14 @@
"clsx": "1.2.1",
"date-fns": "2.29.3",
"moment": "^2.29.4",
"next": "13.4.2",
"next": "13.4.7",
"next-themes": "^0.2.1",
"nice-grpc": "2.0.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "7.39.5",
"sass": "^1.62.0",
"swr": "^2.2.0",
"tinycolor2": "1.4.2"
},
"devDependencies": {

8
apps/login/readme.md
View File

@@ -15,3 +15,11 @@ The Login UI should provide the following functionality:
## Documentation
https://beta.nextjs.org/docs
<!--
This can be uncommented once @zitadel/... packages are available in the public npm registry
## Deploy your own
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzitadel%2Ftypescript%2Ftree%2Fmain%2Fapps%2Flogin&env=ZITADEL_API_URL,ZITADEL_SERVICE_USER_TOKEN&demo-title=Next.js%20Login&demo-description=A%20Login%20Application%20built%20with%20Next.js) -->

204
apps/login/ui/LoginPasskey.tsx Normal file
View File

@@ -0,0 +1,204 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Challenges_Passkey } from "@zitadel/server";
import { coerceToArrayBuffer, coerceToBase64Url } from "#/utils/base64";
import { Button, ButtonVariants } from "./Button";
import Alert from "./Alert";
import { Spinner } from "./Spinner";
type Props = {
loginName: string;
altPassword: boolean;
};
export default function LoginPasskey({ loginName, altPassword }: Props) {
const [error, setError] = useState<string>("");
const [loading, setLoading] = useState<boolean>(false);
const router = useRouter();
const initialized = useRef(false);
useEffect(() => {
if (!initialized.current) {
initialized.current = true;
setLoading(true);
updateSessionForChallenge()
.then((response) => {
const pK =
response.challenges.passkey.publicKeyCredentialRequestOptions
.publicKey;
if (pK) {
submitLoginAndContinue(pK)
.then(() => {
setLoading(false);
})
.catch((error) => {
setError(error);
setLoading(false);
});
} else {
setError("Could not request passkey challenge");
setLoading(false);
}
})
.catch((error) => {
setError(error);
setLoading(false);
});
}
}, []);
async function updateSessionForChallenge() {
setLoading(true);
const res = await fetch("/api/session", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
loginName,
challenges: [1], // request passkey challenge
}),
});
setLoading(false);
if (!res.ok) {
const error = await res.json();
throw error.details.details;
}
return res.json();
}
async function submitLogin(data: any) {
setLoading(true);
const res = await fetch("/api/session", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
loginName,
passkey: data,
}),
});
const response = await res.json();
setLoading(false);
if (!res.ok) {
setError(response.details);
return Promise.reject(response.details);
}
return response;
}
async function submitLoginAndContinue(
publicKey: any
): Promise<boolean | void> {
publicKey.challenge = coerceToArrayBuffer(
publicKey.challenge,
"publicKey.challenge"
);
publicKey.allowCredentials.map((listItem: any) => {
listItem.id = coerceToArrayBuffer(
listItem.id,
"publicKey.allowCredentials.id"
);
});
navigator.credentials
.get({
publicKey,
})
.then((assertedCredential: any) => {
if (assertedCredential) {
let authData = new Uint8Array(
assertedCredential.response.authenticatorData
);
let clientDataJSON = new Uint8Array(
assertedCredential.response.clientDataJSON
);
let rawId = new Uint8Array(assertedCredential.rawId);
let sig = new Uint8Array(assertedCredential.response.signature);
let userHandle = new Uint8Array(
assertedCredential.response.userHandle
);
let data = JSON.stringify({
id: assertedCredential.id,
rawId: coerceToBase64Url(rawId, "rawId"),
type: assertedCredential.type,
response: {
authenticatorData: coerceToBase64Url(authData, "authData"),
clientDataJSON: coerceToBase64Url(
clientDataJSON,
"clientDataJSON"
),
signature: coerceToBase64Url(sig, "sig"),
userHandle: coerceToBase64Url(userHandle, "userHandle"),
},
});
return submitLogin(data).then(() => {
return router.push(`/accounts`);
});
} else {
setLoading(false);
setError("An error on retrieving passkey");
return null;
}
})
.catch((error) => {
console.error(error);
setLoading(false);
// setError(error);
return null;
});
}
return (
<div className="w-full">
{error && (
<div className="py-4">
<Alert>{error}</Alert>
</div>
)}
<div className="mt-8 flex w-full flex-row items-center">
{altPassword ? (
<Button
type="button"
variant={ButtonVariants.Secondary}
onClick={() =>
router.push(
"/password?" + new URLSearchParams({ loginName, alt: "true" }) // alt is set because password is requested as alternative auth method, so passwordless prompt can be escaped
)
}
>
use password
</Button>
) : (
<Button
type="button"
variant={ButtonVariants.Secondary}
onClick={() => router.back()}
>
back
</Button>
)}
<span className="flex-grow"></span>
<Button
type="submit"
className="self-end"
variant={ButtonVariants.Primary}
disabled={loading}
onClick={() => updateSessionForChallenge()}
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
continue
</Button>
</div>
</div>
);
}

20
apps/login/ui/PasswordForm.tsx
View File

@@ -14,9 +14,15 @@ type Inputs = {
type Props = {
loginName?: string;
isAlternative?: boolean; // whether password was requested as alternative auth method
promptPasswordless?: boolean;
};
export default function PasswordForm({ loginName }: Props) {
export default function PasswordForm({
loginName,
promptPasswordless,
isAlternative,
}: Props) {
const { register, handleSubmit, formState } = useForm<Inputs>({
mode: "onBlur",
});
@@ -30,12 +36,13 @@ export default function PasswordForm({ loginName }: Props) {
async function submitPassword(values: Inputs) {
setError("");
setLoading(true);
const res = await fetch("/session", {
const res = await fetch("/api/session", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
loginName,
password: values.password,
}),
});
@@ -52,12 +59,17 @@ export default function PasswordForm({ loginName }: Props) {
function submitPasswordAndContinue(value: Inputs): Promise<boolean | void> {
return submitPassword(value).then((resp: any) => {
if (resp.factors && !resp.factors.passwordless) {
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?` +
new URLSearchParams({
loginName: resp.factors.user.loginName,
prompt: "true",
promptPasswordless: "true",
})
);
} else {

2
apps/login/ui/PrivacyPolicyCheckboxes.tsx
View File

@@ -50,6 +50,7 @@ export function PrivacyPolicyCheckboxes({ legal, onChange }: Props) {
<Checkbox
className="mr-4"
checked={false}
value={"privacypolicy"}
onChangeVal={(checked: boolean) => {
setAcceptanceState({
...acceptanceState,
@@ -74,6 +75,7 @@ export function PrivacyPolicyCheckboxes({ legal, onChange }: Props) {
<Checkbox
className="mr-4"
checked={false}
value={"tos"}
onChangeVal={(checked: boolean) => {
setAcceptanceState({
...acceptanceState,

2
apps/login/ui/RegisterForm.tsx
View File

@@ -48,7 +48,7 @@ export default function RegisterForm({
async function submitRegister(values: Inputs) {
setLoading(true);
const res = await fetch("/registeruser", {
const res = await fetch("/api/registeruser", {
method: "POST",
headers: {
"Content-Type": "application/json",

35
apps/login/ui/RegisterFormWithoutPassword.tsx
View File

@@ -11,6 +11,7 @@ import { Spinner } from "./Spinner";
import AuthenticationMethodRadio, {
methods,
} from "./AuthenticationMethodRadio";
import Alert from "./Alert";
type Inputs =
| {
@@ -31,12 +32,13 @@ export default function RegisterFormWithoutPassword({ legal }: Props) {
const [loading, setLoading] = useState<boolean>(false);
const [selected, setSelected] = useState(methods[0]);
const [error, setError] = useState<string>("");
const router = useRouter();
async function submitAndRegister(values: Inputs) {
setLoading(true);
const res = await fetch("/registeruser", {
const res = await fetch("/api/registeruser", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -49,14 +51,15 @@ export default function RegisterFormWithoutPassword({ legal }: Props) {
});
setLoading(false);
if (!res.ok) {
throw new Error("Failed to register user");
const error = await res.json();
throw new Error(error.details);
}
return res.json();
}
async function createSessionWithLoginName(loginName: string) {
setLoading(true);
const res = await fetch("/session", {
const res = await fetch("/api/session", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -79,14 +82,20 @@ export default function RegisterFormWithoutPassword({ legal }: Props) {
) {
return withPassword
? router.push(`/register?` + new URLSearchParams(value))
: submitAndRegister(value).then((resp: any) => {
createSessionWithLoginName(value.email).then(({ factors }) => {
return router.push(
`/passkey/add?` +
new URLSearchParams({ loginName: factors.user.loginName })
);
: submitAndRegister(value)
.then((resp: any) => {
createSessionWithLoginName(value.email).then(({ factors }) => {
setError("");
return router.push(
`/passkey/add?` +
new URLSearchParams({ loginName: factors.user.loginName })
);
});
})
.catch((errorDetails: Error) => {
setLoading(false);
setError(errorDetails.message);
});
});
}
const { errors } = formState;
@@ -146,6 +155,12 @@ export default function RegisterFormWithoutPassword({ legal }: Props) {
/>
</div>
{error && (
<div className="py-4">
<Alert>{error}</Alert>
</div>
)}
<div className="mt-8 flex w-full flex-row items-center justify-between">
<Button
type="button"

4
apps/login/ui/RegisterPasskey.tsx
View File

@@ -29,7 +29,7 @@ export default function RegisterPasskey({ sessionId, isPrompt }: Props) {
async function submitRegister() {
setError("");
setLoading(true);
const res = await fetch("/passkeys", {
const res = await fetch("/api/passkeys", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -56,7 +56,7 @@ export default function RegisterPasskey({ sessionId, isPrompt }: Props) {
sessionId: string
) {
setLoading(true);
const res = await fetch("/passkeys/verify", {
const res = await fetch("/api/passkeys/verify", {
method: "POST",
headers: {
"Content-Type": "application/json",

16
apps/login/ui/SessionItem.tsx
View File

@@ -17,7 +17,7 @@ export default function SessionItem({
async function clearSession(id: string) {
setLoading(true);
const res = await fetch("/session?" + new URLSearchParams({ id }), {
const res = await fetch("/api/session?" + new URLSearchParams({ id }), {
method: "DELETE",
headers: {
"Content-Type": "application/json",
@@ -39,18 +39,22 @@ export default function SessionItem({
}
const validPassword = session?.factors?.password?.verifiedAt;
const validPasskey = session?.factors?.passkey?.verifiedAt;
const validUser = validPassword || validPasskey;
return (
<Link
href={
validPassword
validUser
? `/signedin?` +
new URLSearchParams({
loginName: session.factors?.user?.loginName as string,
})
: `/password?` +
: `/loginname?` +
new URLSearchParams({
loginName: session.factors?.user?.loginName as string,
submit: "true",
})
}
className="group flex flex-row items-center bg-background-light-400 dark:bg-background-dark-400 border border-divider-light hover:shadow-lg dark:hover:bg-white/10 py-2 px-4 rounded-md transition-all"
@@ -68,16 +72,16 @@ export default function SessionItem({
<span className="text-xs opacity-80">
{session.factors?.user?.loginName}
</span>
{validPassword && (
{validUser && (
<span className="text-xs opacity-80">
{moment(new Date(validPassword)).fromNow()}
{moment(new Date(validUser)).fromNow()}
</span>
)}
</div>
<span className="flex-grow"></span>
<div className="relative flex flex-row items-center">
{validPassword ? (
{validUser ? (
<div className="absolute h-2 w-2 bg-green-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>
) : (
<div className="absolute h-2 w-2 bg-red-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>

1
apps/login/ui/SessionsList.tsx
View File

@@ -11,7 +11,6 @@ type Props = {
export default function SessionsList({ sessions }: Props) {
const [list, setList] = useState<Session[]>(sessions);
return sessions ? (
<div className="flex flex-col space-y-2">
{list

4
apps/login/ui/SetPasswordForm.tsx
View File

@@ -47,7 +47,7 @@ export default function SetPasswordForm({
async function submitRegister(values: Inputs) {
setLoading(true);
const res = await fetch("/registeruser", {
const res = await fetch("/api/registeruser", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -71,7 +71,7 @@ export default function SetPasswordForm({
loginName: string,
password: string
) {
const res = await fetch("/session", {
const res = await fetch("/api/session", {
method: "POST",
headers: {
"Content-Type": "application/json",

98
apps/login/ui/UsernameForm.tsx
View File

@@ -1,28 +1,43 @@
"use client";
import { useState } from "react";
import { useEffect, useState } from "react";
import { Button, ButtonVariants } from "./Button";
import { TextInput } from "./Input";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { Spinner } from "./Spinner";
import { LoginSettings } from "@zitadel/server";
type Inputs = {
loginName: string;
};
export default function UsernameForm() {
type Props = {
loginSettings: LoginSettings | undefined;
loginName: string | undefined;
submit: boolean;
};
export default function UsernameForm({
loginSettings,
loginName,
submit,
}: Props) {
const { register, handleSubmit, formState } = useForm<Inputs>({
mode: "onBlur",
defaultValues: {
loginName: loginName ? loginName : "",
},
});
const [loading, setLoading] = useState<boolean>(false);
const router = useRouter();
async function submitUsername(values: Inputs) {
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<string>("");
async function submitLoginName(values: Inputs) {
setLoading(true);
const res = await fetch("/session", {
const res = await fetch("/api/loginname", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -34,22 +49,77 @@ export default function UsernameForm() {
setLoading(false);
if (!res.ok) {
throw new Error("Failed to set user");
throw new Error("Failed to load authentication methods");
}
return res.json();
}
function submitUsernameAndContinue(value: Inputs): Promise<boolean | void> {
return submitUsername(value).then(({ factors }) => {
return router.push(
`/password?` +
new URLSearchParams({ loginName: `${factors.user.loginName}` })
);
async function setLoginNameAndGetAuthMethods(values: Inputs) {
return submitLoginName(values).then((response) => {
if (response.authMethodTypes.length == 1) {
const method = response.authMethodTypes[0];
switch (method) {
case 1: //AuthenticationMethodType.AUTHENTICATION_METHOD_TYPE_PASSWORD:
return router.push(
"/password?" +
new URLSearchParams(
loginSettings?.passkeysType === 1
? {
loginName: values.loginName,
promptPasswordless: `true`, // PasskeysType.PASSKEYS_TYPE_ALLOWED,
}
: { loginName: values.loginName }
)
);
case 2: // AuthenticationMethodType.AUTHENTICATION_METHOD_TYPE_PASSKEY
return router.push(
"/passkey/login?" +
new URLSearchParams({ loginName: values.loginName })
);
default:
return router.push(
"/password?" +
new URLSearchParams(
loginSettings?.passkeysType === 1
? {
loginName: values.loginName,
promptPasswordless: `true`, // PasskeysType.PASSKEYS_TYPE_ALLOWED,
}
: { loginName: values.loginName }
)
);
}
} else if (
response.authMethodTypes &&
response.authMethodTypes.length === 0
) {
setError(
"User has no available authentication methods. Contact your administrator to setup authentication for the requested user."
);
} else {
// prefer passkey in favor of other methods
if (response.authMethodTypes.includes(2)) {
return router.push(
"/passkey/login?" +
new URLSearchParams({
loginName: values.loginName,
altPassword: `${response.authMethodTypes.includes(1)}`, // show alternative password option
})
);
}
}
});
}
const { errors } = formState;
useEffect(() => {
if (submit && loginName) {
// When we navigate to this page, we always want to be redirected if submit is true and the parameters are valid.
setLoginNameAndGetAuthMethods({ loginName });
}
}, []);
return (
<form className="w-full">
<div className="">
@@ -72,7 +142,7 @@ export default function UsernameForm() {
className="self-end"
variant={ButtonVariants.Primary}
disabled={loading || !formState.isValid}
onClick={handleSubmit(submitUsernameAndContinue)}
onClick={handleSubmit(setLoginNameAndGetAuthMethods)}
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
continue

6
apps/login/ui/VerifyEmailForm.tsx
View File

@@ -42,7 +42,7 @@ export default function VerifyEmailForm({ userId, code, submit }: Props) {
async function submitCode(values: Inputs) {
setLoading(true);
const res = await fetch("/verifyemail", {
const res = await fetch("/api/verifyemail", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -66,7 +66,7 @@ export default function VerifyEmailForm({ userId, code, submit }: Props) {
async function resendCode() {
setLoading(true);
const res = await fetch("/resendverifyemail", {
const res = await fetch("/api/resendverifyemail", {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -87,7 +87,7 @@ export default function VerifyEmailForm({ userId, code, submit }: Props) {
function submitCodeAndContinue(value: Inputs): Promise<boolean | void> {
return submitCode(value).then((resp: any) => {
return router.push(`/username`);
return router.push(`/loginname`);
});
}

16
apps/login/utils/colors.ts
View File

@@ -72,16 +72,16 @@ type BrandingColors = {
export function setTheme(document: any, policy?: Partial<BrandingSettings>) {
const lP: BrandingColors = {
lightTheme: {
backgroundColor: policy?.lightTheme?.backgroundColor ?? BACKGROUND,
fontColor: policy?.lightTheme?.fontColor ?? TEXT,
primaryColor: policy?.lightTheme?.primaryColor ?? PRIMARY,
warnColor: policy?.lightTheme?.warnColor ?? WARN,
backgroundColor: policy?.lightTheme?.backgroundColor || BACKGROUND,
fontColor: policy?.lightTheme?.fontColor || TEXT,
primaryColor: policy?.lightTheme?.primaryColor || PRIMARY,
warnColor: policy?.lightTheme?.warnColor || WARN,
},
darkTheme: {
backgroundColor: policy?.darkTheme?.backgroundColor ?? DARK_BACKGROUND,
fontColor: policy?.darkTheme?.fontColor ?? DARK_TEXT,
primaryColor: policy?.darkTheme?.primaryColor ?? DARK_PRIMARY,
warnColor: policy?.darkTheme?.warnColor ?? DARK_WARN,
backgroundColor: policy?.darkTheme?.backgroundColor || DARK_BACKGROUND,
fontColor: policy?.darkTheme?.fontColor || DARK_TEXT,
primaryColor: policy?.darkTheme?.primaryColor || DARK_PRIMARY,
warnColor: policy?.darkTheme?.warnColor || DARK_WARN,
},
};

36
apps/login/utils/cookies.ts
View File

@@ -19,6 +19,7 @@ function setSessionHttpOnlyCookie(sessions: SessionCookie[]) {
path: "/",
});
}
export async function addSessionToCookie(session: SessionCookie): Promise<any> {
const cookiesList = cookies();
const stringifiedCookie = cookiesList.get("sessions");
@@ -37,7 +38,7 @@ export async function addSessionToCookie(session: SessionCookie): Promise<any> {
currentSessions = [...currentSessions, session];
}
setSessionHttpOnlyCookie(currentSessions);
return setSessionHttpOnlyCookie(currentSessions);
}
export async function updateSessionCookie(
@@ -52,9 +53,12 @@ export async function updateSessionCookie(
: [session];
const foundIndex = sessions.findIndex((session) => session.id === id);
sessions[foundIndex] = session;
return setSessionHttpOnlyCookie(sessions);
if (foundIndex > -1) {
sessions[foundIndex] = session;
return setSessionHttpOnlyCookie(sessions);
} else {
throw "updateSessionCookie: session id now found";
}
}
export async function removeSessionFromCookie(
@@ -88,11 +92,11 @@ export async function getMostRecentSessionCookie(): Promise<any> {
return latest;
} else {
return Promise.reject();
return Promise.reject("no session cookie found");
}
}
export async function getSessionCookieById(id: string): Promise<any> {
export async function getSessionCookieById(id: string): Promise<SessionCookie> {
const cookiesList = cookies();
const stringifiedCookie = cookiesList.get("sessions");
@@ -110,6 +114,26 @@ export async function getSessionCookieById(id: string): Promise<any> {
}
}
export async function getSessionCookieByLoginName(
loginName: string
): Promise<SessionCookie> {
const cookiesList = cookies();
const stringifiedCookie = cookiesList.get("sessions");
if (stringifiedCookie?.value) {
const sessions: SessionCookie[] = JSON.parse(stringifiedCookie?.value);
const found = sessions.find((s) => s.loginName === loginName);
if (found) {
return found;
} else {
return Promise.reject("no cookie found with loginName: " + loginName);
}
} else {
return Promise.reject("no session cookie found");
}
}
export async function getAllSessionIds(): Promise<any> {
const cookiesList = cookies();
const stringifiedCookie = cookiesList.get("sessions");

102
apps/login/utils/session.ts Normal file
View File

@@ -0,0 +1,102 @@
import { createSession, getSession, server, setSession } from "#/lib/zitadel";
import {
SessionCookie,
addSessionToCookie,
updateSessionCookie,
} from "./cookies";
import { ChallengeKind, Session, Challenges } from "@zitadel/server";
export async function createSessionAndUpdateCookie(
loginName: string,
password: string | undefined,
domain: string,
challenges: ChallengeKind[] | undefined
): Promise<Session> {
const createdSession = await createSession(
server,
loginName,
domain,
password,
challenges
);
if (createdSession) {
return getSession(
server,
createdSession.sessionId,
createdSession.sessionToken
).then((response) => {
if (response?.session && response.session?.factors?.user?.loginName) {
const sessionCookie: SessionCookie = {
id: createdSession.sessionId,
token: createdSession.sessionToken,
changeDate: response.session.changeDate?.toString() ?? "",
loginName: response.session?.factors?.user?.loginName ?? "",
};
return addSessionToCookie(sessionCookie).then(() => {
return response.session as Session;
});
} else {
throw "could not get session or session does not have loginName";
}
});
} else {
throw "Could not create session";
}
}
export type SessionWithChallenges = Session & {
challenges: Challenges | undefined;
};
export async function setSessionAndUpdateCookie(
sessionId: string,
sessionToken: string,
loginName: string,
password: string | undefined,
passkey: { credentialAssertionData: any } | undefined,
domain: string | undefined,
challenges: ChallengeKind[] | undefined
): Promise<SessionWithChallenges> {
return setSession(
server,
sessionId,
sessionToken,
domain,
password,
passkey,
challenges
).then((updatedSession) => {
if (updatedSession) {
const sessionCookie: SessionCookie = {
id: sessionId,
token: updatedSession.sessionToken,
changeDate: updatedSession.details?.changeDate?.toString() ?? "",
loginName: loginName,
};
return getSession(server, sessionCookie.id, sessionCookie.token).then(
(response) => {
if (response?.session && response.session.factors?.user?.loginName) {
const { session } = response;
const newCookie: SessionCookie = {
id: sessionCookie.id,
token: updatedSession.sessionToken,
changeDate: session.changeDate?.toString() ?? "",
loginName: session.factors?.user?.loginName ?? "",
};
return updateSessionCookie(sessionCookie.id, newCookie).then(() => {
return { challenges: updatedSession.challenges, ...session };
});
} else {
throw "could not get session or session does not have loginName";
}
}
);
} else {
throw "Session not be set";
}
});
}

18
packages/zitadel-server/src/index.ts
View File

@@ -12,7 +12,18 @@ export {
Theme,
} from "./proto/server/zitadel/settings/v2alpha/branding_settings";
export { Session } from "./proto/server/zitadel/session/v2alpha/session";
export { LoginSettings } from "./proto/server/zitadel/settings/v2alpha/login_settings";
export {
ChallengeKind,
Challenges,
Challenges_Passkey,
} from "./proto/server/zitadel/session/v2alpha/challenge";
export {
Session,
Factors,
} from "./proto/server/zitadel/session/v2alpha/session";
export {
ListSessionsResponse,
GetSessionResponse,
@@ -25,6 +36,8 @@ export {
GetBrandingSettingsResponse,
GetLegalAndSupportSettingsResponse,
GetGeneralSettingsResponse,
GetLoginSettingsResponse,
GetLoginSettingsRequest,
} from "./proto/server/zitadel/settings/v2alpha/settings_service";
export {
AddHumanUserResponse,
@@ -35,6 +48,9 @@ export {
RegisterPasskeyResponse,
CreatePasskeyRegistrationLinkResponse,
CreatePasskeyRegistrationLinkRequest,
ListAuthenticationMethodTypesResponse,
ListAuthenticationMethodTypesRequest,
AuthenticationMethodType,
} from "./proto/server/zitadel/user/v2alpha/user_service";
export {
SetHumanPasswordResponse,

161
pnpm-lock.yaml generated
View File

@@ -54,7 +54,7 @@ importers:
lint-staged: 13.0.3
make-dir-cli: 3.0.0
moment: ^2.29.4
next: 13.4.2
next: 13.4.7
next-themes: ^0.2.1
nice-grpc: 2.0.1
nodemon: ^2.0.22
@@ -65,6 +65,7 @@ importers:
react-hook-form: 7.39.5
sass: ^1.62.0
start-server-and-test: ^2.0.0
swr: ^2.2.0
tailwindcss: 3.2.4
tinycolor2: 1.4.2
ts-jest: ^29.1.0
@@ -83,13 +84,14 @@ importers:
clsx: 1.2.1
date-fns: 2.29.3
moment: 2.29.4
next: 13.4.2_bteaqif5pz4zkv4h4kccxuyuxu
next-themes: 0.2.1_cmp7sjki5xcmfyvhcokzzink7a
next: 13.4.7_bteaqif5pz4zkv4h4kccxuyuxu
next-themes: 0.2.1_5v7kwk6wz2hvmegftnptprfjvm
nice-grpc: 2.0.1
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-hook-form: 7.39.5_react@18.2.0
sass: 1.62.0
swr: 2.2.0_react@18.2.0
tinycolor2: 1.4.2
devDependencies:
'@bufbuild/buf': 1.15.0
@@ -108,7 +110,7 @@ importers:
'@zitadel/tsconfig': link:../../packages/zitadel-tsconfig
autoprefixer: 10.4.13_postcss@8.4.21
concurrently: 8.2.0
cypress: 12.15.0
cypress: 12.16.0
del-cli: 5.0.0
env-cmd: 10.1.0
eslint-config-zitadel: link:../../packages/eslint-config-zitadel
@@ -136,9 +138,9 @@ importers:
eslint-config-turbo: latest
eslint-plugin-react: 7.28.0
dependencies:
eslint-config-next: 13.4.7_dewl7jrzrufmm6i6j6pp2pqhja
eslint-config-next: 13.4.8_dewl7jrzrufmm6i6j6pp2pqhja
eslint-config-prettier: 8.5.0_eslint@8.28.0
eslint-config-turbo: 1.10.6_eslint@8.28.0
eslint-config-turbo: 1.10.7_eslint@8.28.0
eslint-plugin-react: 7.28.0_eslint@8.28.0
packages/zitadel-client:
@@ -1386,12 +1388,12 @@ packages:
resolution: {integrity: sha512-FN50r/E+b8wuqyRjmGaqvqNDuWBWYWQiigfZ50KnSFH0f+AMQQyaZl+Zm2+CIpKk0fL9QxhLxOpTVA3xFHgFow==}
dev: false
/@next/env/13.4.2:
resolution: {integrity: sha512-Wqvo7lDeS0KGwtwg9TT9wKQ8raelmUxt+TQKWvG/xKfcmDXNOtCuaszcfCF8JzlBG1q0VhpI6CKaRMbVPMDWgw==}
/@next/env/13.4.7:
resolution: {integrity: sha512-ZlbiFulnwiFsW9UV1ku1OvX/oyIPLtMk9p/nnvDSwI0s7vSoZdRtxXNsaO+ZXrLv/pMbXVGq4lL8TbY9iuGmVw==}
dev: false
/@next/eslint-plugin-next/13.4.7:
resolution: {integrity: sha512-ANEPltxzXbyyG7CvqxdY4PmeM5+RyWdAJGufTHnU+LA/i3J6IDV2r8Z4onKwskwKEhwqzz5lMaSYGGXLyHX+mg==}
/@next/eslint-plugin-next/13.4.8:
resolution: {integrity: sha512-cmfVHpxWjjcETFt2WHnoFU6EmY69QcPJRlRNAooQlNe53Ke90vg1Ci/dkPffryJZaxxiRziP9bQrV8lDVCn3Fw==}
dependencies:
glob: 7.1.7
dev: false
@@ -1423,8 +1425,8 @@ packages:
dev: false
optional: true
/@next/swc-darwin-arm64/13.4.2:
resolution: {integrity: sha512-6BBlqGu3ewgJflv9iLCwO1v1hqlecaIH2AotpKfVUEzUxuuDNJQZ2a4KLb4MBl8T9/vca1YuWhSqtbF6ZuUJJw==}
/@next/swc-darwin-arm64/13.4.7:
resolution: {integrity: sha512-VZTxPv1b59KGiv/pZHTO5Gbsdeoxcj2rU2cqJu03btMhHpn3vwzEK0gUSVC/XW96aeGO67X+cMahhwHzef24/w==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
@@ -1441,8 +1443,8 @@ packages:
dev: false
optional: true
/@next/swc-darwin-x64/13.4.2:
resolution: {integrity: sha512-iZuYr7ZvGLPjPmfhhMl0ISm+z8EiyLBC1bLyFwGBxkWmPXqdJ60mzuTaDSr5WezDwv0fz32HB7JHmRC6JVHSZg==}
/@next/swc-darwin-x64/13.4.7:
resolution: {integrity: sha512-gO2bw+2Ymmga+QYujjvDz9955xvYGrWofmxTq7m70b9pDPvl7aDFABJOZ2a8SRCuSNB5mXU8eTOmVVwyp/nAew==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
@@ -1477,8 +1479,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-arm64-gnu/13.4.2:
resolution: {integrity: sha512-2xVabFtIge6BJTcJrW8YuUnYTuQjh4jEuRuS2mscyNVOj6zUZkom3CQg+egKOoS+zh2rrro66ffSKIS+ztFJTg==}
/@next/swc-linux-arm64-gnu/13.4.7:
resolution: {integrity: sha512-6cqp3vf1eHxjIDhEOc7Mh/s8z1cwc/l5B6ZNkOofmZVyu1zsbEM5Hmx64s12Rd9AYgGoiCz4OJ4M/oRnkE16/Q==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -1495,8 +1497,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-arm64-musl/13.4.2:
resolution: {integrity: sha512-wKRCQ27xCUJx5d6IivfjYGq8oVngqIhlhSAJntgXLt7Uo9sRT/3EppMHqUZRfyuNBTbykEre1s5166z+pvRB5A==}
/@next/swc-linux-arm64-musl/13.4.7:
resolution: {integrity: sha512-T1kD2FWOEy5WPidOn1si0rYmWORNch4a/NR52Ghyp4q7KyxOCuiOfZzyhVC5tsLIBDH3+cNdB5DkD9afpNDaOw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -1513,8 +1515,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-x64-gnu/13.4.2:
resolution: {integrity: sha512-NpCa+UVhhuNeaFVUP1Bftm0uqtvLWq2JTm7+Ta48+2Uqj2mNXrDIvyn1DY/ZEfmW/1yvGBRaUAv9zkMkMRixQA==}
/@next/swc-linux-x64-gnu/13.4.7:
resolution: {integrity: sha512-zaEC+iEiAHNdhl6fuwl0H0shnTzQoAoJiDYBUze8QTntE/GNPfTYpYboxF5LRYIjBwETUatvE0T64W6SKDipvg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -1531,8 +1533,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-x64-musl/13.4.2:
resolution: {integrity: sha512-ZWVC72x0lW4aj44e3khvBrj2oSYj1bD0jESmyah3zG/3DplEy/FOtYkMzbMjHTdDSheso7zH8GIlW6CDQnKhmQ==}
/@next/swc-linux-x64-musl/13.4.7:
resolution: {integrity: sha512-X6r12F8d8SKAtYJqLZBBMIwEqcTRvUdVm+xIq+l6pJqlgT2tNsLLf2i5Cl88xSsIytBICGsCNNHd+siD2fbWBA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -1549,8 +1551,8 @@ packages:
dev: false
optional: true
/@next/swc-win32-arm64-msvc/13.4.2:
resolution: {integrity: sha512-pLT+OWYpzJig5K4VKhLttlIfBcVZfr2+Xbjra0Tjs83NQSkFS+y7xx+YhCwvpEmXYLIvaggj2ONPyjbiigOvHQ==}
/@next/swc-win32-arm64-msvc/13.4.7:
resolution: {integrity: sha512-NPnmnV+vEIxnu6SUvjnuaWRglZzw4ox5n/MQTxeUhb5iwVWFedolPFebMNwgrWu4AELwvTdGtWjqof53AiWHcw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
@@ -1567,8 +1569,8 @@ packages:
dev: false
optional: true
/@next/swc-win32-ia32-msvc/13.4.2:
resolution: {integrity: sha512-dhpiksQCyGca4WY0fJyzK3FxMDFoqMb0Cn+uDB+9GYjpU2K5//UGPQlCwiK4JHxuhg8oLMag5Nf3/IPSJNG8jw==}
/@next/swc-win32-ia32-msvc/13.4.7:
resolution: {integrity: sha512-6Hxijm6/a8XqLQpOOf/XuwWRhcuc/g4rBB2oxjgCMuV9Xlr2bLs5+lXyh8w9YbAUMYR3iC9mgOlXbHa79elmXw==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
@@ -1585,8 +1587,8 @@ packages:
dev: false
optional: true
/@next/swc-win32-x64-msvc/13.4.2:
resolution: {integrity: sha512-O7bort1Vld00cu8g0jHZq3cbSTUNMohOEvYqsqE10+yfohhdPHzvzO+ziJRz4Dyyr/fYKREwS7gR4JC0soSOMw==}
/@next/swc-win32-x64-msvc/13.4.7:
resolution: {integrity: sha512-sW9Yt36Db1nXJL+mTr2Wo0y+VkPWeYhygvcHj1FF0srVtV+VoDjxleKtny21QHaG05zdeZnw2fCtf2+dEqgwqA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@@ -1866,8 +1868,8 @@ packages:
resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
dev: true
/@types/node/14.18.51:
resolution: {integrity: sha512-P9bsdGFPpVtofEKlhWMVS2qqx1A/rt9QBfihWlklfHHpUpjtYse5AzFz6j4DWrARLYh6gRnw9+5+DJcrq3KvBA==}
/@types/node/14.18.53:
resolution: {integrity: sha512-soGmOpVBUq+gaBMwom1M+krC/NNbWlosh4AtGA03SyWNDiqSKtwp7OulO1M6+mg8YkHMvJ/y0AkCeO8d1hNb7A==}
dev: true
/@types/node/18.11.9:
@@ -2966,15 +2968,15 @@ packages:
stream-transform: 2.1.3
dev: true
/cypress/12.15.0:
resolution: {integrity: sha512-FqGbxsH+QgjStuTO9onXMIeF44eOrgVwPvlcvuzLIaePQMkl72YgBvpuHlBGRcrw3Q4SvqKfajN8iV5XWShAiQ==}
/cypress/12.16.0:
resolution: {integrity: sha512-mwv1YNe48hm0LVaPgofEhGCtLwNIQEjmj2dJXnAkY1b4n/NE9OtgPph4TyS+tOtYp5CKtRmDvBzWseUXQTjbTg==}
engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
hasBin: true
requiresBuild: true
dependencies:
'@cypress/request': 2.88.11
'@cypress/xvfb': 1.2.4_supports-color@8.1.1
'@types/node': 14.18.51
'@types/node': 14.18.53
'@types/sinonjs__fake-timers': 8.1.1
'@types/sizzle': 2.3.3
arch: 2.2.0
@@ -2988,7 +2990,7 @@ packages:
cli-table3: 0.6.3
commander: 6.2.1
common-tags: 1.8.2
dayjs: 1.11.8
dayjs: 1.11.9
debug: 4.3.4_supports-color@8.1.1
enquirer: 2.3.6
eventemitter2: 6.4.7
@@ -3052,8 +3054,8 @@ packages:
'@babel/runtime': 7.22.3
dev: true
/dayjs/1.11.8:
resolution: {integrity: sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ==}
/dayjs/1.11.9:
resolution: {integrity: sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==}
dev: true
/debug/2.6.9:
@@ -3692,8 +3694,8 @@ packages:
source-map: 0.6.1
dev: true
/eslint-config-next/13.4.7_dewl7jrzrufmm6i6j6pp2pqhja:
resolution: {integrity: sha512-+IRAyD0+J1MZaTi9RQMPUfr6Q+GCZ1wOkK6XM52Vokh7VI4R6YFGOFzdkEFHl4ZyIX4FKa5vcwUP2WscSFNjNQ==}
/eslint-config-next/13.4.8_dewl7jrzrufmm6i6j6pp2pqhja:
resolution: {integrity: sha512-2hE0b6lHuhtHBX8VgEXi8v4G8PVrPUBMOSLCTq8qtcQ2qQOX7+uBOLK2kU4FD2qDZzyXNlhmuH+WLT5ptY4XLA==}
peerDependencies:
eslint: ^7.23.0 || ^8.0.0
typescript: '>=3.3.1'
@@ -3701,7 +3703,7 @@ packages:
typescript:
optional: true
dependencies:
'@next/eslint-plugin-next': 13.4.7
'@next/eslint-plugin-next': 13.4.8
'@rushstack/eslint-patch': 1.2.0
'@typescript-eslint/parser': 5.44.0_dewl7jrzrufmm6i6j6pp2pqhja
eslint: 8.28.0
@@ -3726,13 +3728,13 @@ packages:
eslint: 8.28.0
dev: false
/eslint-config-turbo/1.10.6_eslint@8.28.0:
resolution: {integrity: sha512-iZ63etePRUdEIDY5MxdUhU2ekV9TDbVdHg0BK00QqVFgQTXUYuJ7rsQj/wUKTsw3jwhbLfaY6H5sknAgYyWZ2g==}
/eslint-config-turbo/1.10.7_eslint@8.28.0:
resolution: {integrity: sha512-0yHt5UlXVph8S4SOvP6gYehLvYjJj6XFKTYOG/WUQbjlcF0OU4pOT1a1juqmmBPWYlvJ0evt7v+RekY4tOopPQ==}
peerDependencies:
eslint: '>6.6.0'
dependencies:
eslint: 8.28.0
eslint-plugin-turbo: 1.10.6_eslint@8.28.0
eslint-plugin-turbo: 1.10.7_eslint@8.28.0
dev: false
/eslint-import-resolver-node/0.3.6:
@@ -3900,8 +3902,8 @@ packages:
string.prototype.matchall: 4.0.8
dev: false
/eslint-plugin-turbo/1.10.6_eslint@8.28.0:
resolution: {integrity: sha512-jlzfxYaK8hcz1DTk8Glxxi1r0kgdy85191a4CbFOTiiBulmKHMLJgzhsyE9Ong796MA62n91KFpc20BiKjlHwg==}
/eslint-plugin-turbo/1.10.7_eslint@8.28.0:
resolution: {integrity: sha512-YikBHc75DY9VV1vAFUIBekHLQlxqVT5zTNibK8zBQInCUhF7PvyPJc0xXw5FSz8EYtt4uOV3r0Km3CmFRclS4Q==}
peerDependencies:
eslint: '>6.6.0'
dependencies:
@@ -4504,6 +4506,10 @@ packages:
dependencies:
is-glob: 4.0.3
/glob-to-regexp/0.4.1:
resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
dev: false
/glob/7.1.6:
resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
dependencies:
@@ -5210,7 +5216,7 @@ packages:
pretty-format: 29.5.0
slash: 3.0.0
strip-json-comments: 3.1.1
ts-node: 10.9.1_d2gyhxeuxd6tnmgqdyixls47tq
ts-node: 10.9.1_wup25etrarvlqkprac7h35hj7u
transitivePeerDependencies:
- supports-color
dev: true
@@ -5844,7 +5850,7 @@ packages:
log-update: 4.0.0
p-map: 4.0.0
rfdc: 1.3.0
rxjs: 7.8.1
rxjs: 7.8.0
through: 2.3.8
wrap-ansi: 7.0.0
dev: true
@@ -6160,14 +6166,14 @@ packages:
/natural-compare/1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
/next-themes/0.2.1_cmp7sjki5xcmfyvhcokzzink7a:
/next-themes/0.2.1_5v7kwk6wz2hvmegftnptprfjvm:
resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
peerDependencies:
next: '*'
react: '*'
react-dom: '*'
dependencies:
next: 13.4.2_bteaqif5pz4zkv4h4kccxuyuxu
next: 13.4.7_bteaqif5pz4zkv4h4kccxuyuxu
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
dev: false
@@ -6219,14 +6225,13 @@ packages:
- babel-plugin-macros
dev: false
/next/13.4.2_bteaqif5pz4zkv4h4kccxuyuxu:
resolution: {integrity: sha512-aNFqLs3a3nTGvLWlO9SUhCuMUHVPSFQC0+tDNGAsDXqx+WJDFSbvc233gOJ5H19SBc7nw36A9LwQepOJ2u/8Kg==}
/next/13.4.7_bteaqif5pz4zkv4h4kccxuyuxu:
resolution: {integrity: sha512-M8z3k9VmG51SRT6v5uDKdJXcAqLzP3C+vaKfLIAM0Mhx1um1G7MDnO63+m52qPdZfrTFzMZNzfsgvm3ghuVHIQ==}
engines: {node: '>=16.8.0'}
hasBin: true
peerDependencies:
'@opentelemetry/api': ^1.1.0
fibers: '>= 3.1.0'
node-sass: ^6.0.0 || ^7.0.0
react: ^18.2.0
react-dom: ^18.2.0
sass: ^1.3.0
@@ -6235,12 +6240,10 @@ packages:
optional: true
fibers:
optional: true
node-sass:
optional: true
sass:
optional: true
dependencies:
'@next/env': 13.4.2
'@next/env': 13.4.7
'@swc/helpers': 0.5.1
busboy: 1.6.0
caniuse-lite: 1.0.30001473
@@ -6249,17 +6252,18 @@ packages:
react-dom: 18.2.0_react@18.2.0
sass: 1.62.0
styled-jsx: 5.1.1_cealaxz4az2u5bjp2e6aea3kui
watchpack: 2.4.0
zod: 3.21.4
optionalDependencies:
'@next/swc-darwin-arm64': 13.4.2
'@next/swc-darwin-x64': 13.4.2
'@next/swc-linux-arm64-gnu': 13.4.2
'@next/swc-linux-arm64-musl': 13.4.2
'@next/swc-linux-x64-gnu': 13.4.2
'@next/swc-linux-x64-musl': 13.4.2
'@next/swc-win32-arm64-msvc': 13.4.2
'@next/swc-win32-ia32-msvc': 13.4.2
'@next/swc-win32-x64-msvc': 13.4.2
'@next/swc-darwin-arm64': 13.4.7
'@next/swc-darwin-x64': 13.4.7
'@next/swc-linux-arm64-gnu': 13.4.7
'@next/swc-linux-arm64-musl': 13.4.7
'@next/swc-linux-x64-gnu': 13.4.7
'@next/swc-linux-x64-musl': 13.4.7
'@next/swc-win32-arm64-msvc': 13.4.7
'@next/swc-win32-ia32-msvc': 13.4.7
'@next/swc-win32-x64-msvc': 13.4.7
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros
@@ -7199,6 +7203,12 @@ packages:
dependencies:
queue-microtask: 1.2.3
/rxjs/7.8.0:
resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==}
dependencies:
tslib: 2.4.1
dev: true
/rxjs/7.8.1:
resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
dependencies:
@@ -7658,6 +7668,15 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
/swr/2.2.0_react@18.2.0:
resolution: {integrity: sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==}
peerDependencies:
react: ^16.11.0 || ^17.0.0 || ^18.0.0
dependencies:
react: 18.2.0
use-sync-external-store: 1.2.0_react@18.2.0
dev: false
/symbol-tree/3.2.4:
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
dev: true
@@ -8358,6 +8377,14 @@ packages:
requires-port: 1.0.0
dev: true
/use-sync-external-store/1.2.0_react@18.2.0:
resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
dependencies:
react: 18.2.0
dev: false
/util-deprecate/1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -8425,6 +8452,14 @@ packages:
makeerror: 1.0.12
dev: true
/watchpack/2.4.0:
resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
engines: {node: '>=10.13.0'}
dependencies:
glob-to-regexp: 0.4.1
graceful-fs: 4.2.10
dev: false
/wcwidth/1.0.1:
resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
dependencies: