context on verification pages

This commit is contained in:
Max Peintner
2024-12-19 08:59:39 +01:00
parent 4bb03574e6
commit 6cd0e7cb18
5 changed files with 164 additions and 104 deletions

View File

@@ -3,6 +3,7 @@ import { DynamicTheme } from "@/components/dynamic-theme";
import { UserAvatar } from "@/components/user-avatar";
import { VerifyForm } from "@/components/verify-form";
import { VerifyRedirectButton } from "@/components/verify-redirect-button";
import { loadMostRecentSession } from "@/lib/session";
import {
getBrandingSettings,
getUserByID,
@@ -23,9 +24,17 @@ export default async function Page(props: { searchParams: Promise<any> }) {
const branding = await getBrandingSettings(organization);
let sessionFactors;
let user: User | undefined;
let human: HumanUser | undefined;
if (userId) {
let id: string | undefined;
if ("loginName" in searchParams) {
sessionFactors = await loadMostRecentSession({
loginName,
organization,
});
} else if ("userId" in searchParams && userId) {
const userResponse = await getUserByID(userId);
if (userResponse) {
user = userResponse.user;
@@ -35,6 +44,8 @@ export default async function Page(props: { searchParams: Promise<any> }) {
}
}
id = userId ?? sessionFactors?.factors?.user?.id;
let authMethods: AuthenticationMethodType[] | null = null;
if (human?.email?.isVerified) {
const authMethodsResponse = await listAuthenticationMethodTypes(userId);
@@ -66,7 +77,7 @@ export default async function Page(props: { searchParams: Promise<any> }) {
<h1>{t("verify.title")}</h1>
<p className="ztdl-p mb-6 block">{t("verify.description")}</p>
{!userId && (
{!id && (
<>
<h1>{t("verify.title")}</h1>
<p className="ztdl-p mb-6 block">{t("verify.description")}</p>
@@ -85,21 +96,26 @@ export default async function Page(props: { searchParams: Promise<any> }) {
/>
)}
{human?.email?.isVerified ? (
<VerifyRedirectButton
userId={userId}
authRequestId={authRequestId}
authMethods={authMethods}
/>
) : (
// check if auth methods are set
<VerifyForm
userId={userId}
code={code}
isInvite={invite === "true"}
params={params}
/>
)}
{id &&
(human?.email?.isVerified ? (
// show page for already verified users
<VerifyRedirectButton
userId={id}
loginName={loginName}
organization={organization}
authRequestId={authRequestId}
authMethods={authMethods}
/>
) : (
// check if auth methods are set
<VerifyForm
loginName={loginName}
userId={id}
code={code}
isInvite={invite === "true"}
params={params}
/>
))}
</div>
</DynamicTheme>
);

View File

@@ -17,12 +17,19 @@ type Inputs = {
type Props = {
userId: string;
loginName?: string;
code?: string;
isInvite: boolean;
params: URLSearchParams;
};
export function VerifyForm({ userId, code, isInvite, params }: Props) {
export function VerifyForm({
userId,
loginName,
code,
isInvite,
params,
}: Props) {
const t = useTranslations("verify");
const router = useRouter();

View File

@@ -1,6 +1,9 @@
"use client";
import { sendVerificationRedirectWithoutCheck } from "@/lib/server/verify";
import {
sendVerificationRedirectWithoutCheck,
SendVerificationRedirectWithoutCheckCommand,
} from "@/lib/server/verify";
import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
import { useTranslations } from "next-intl";
import { useState } from "react";
@@ -11,12 +14,16 @@ import { Spinner } from "./spinner";
export function VerifyRedirectButton({
userId,
loginName,
authRequestId,
authMethods,
organization,
}: {
userId: string;
userId?: string;
loginName?: string;
authRequestId: string;
authMethods: AuthenticationMethodType[] | null;
organization?: string;
}) {
const t = useTranslations("verify");
const [error, setError] = useState<string>("");
@@ -26,10 +33,24 @@ export function VerifyRedirectButton({
async function submitAndContinue(): Promise<boolean | void> {
setLoading(true);
await sendVerificationRedirectWithoutCheck({
userId,
let command = {
organization,
authRequestId,
})
} as SendVerificationRedirectWithoutCheckCommand;
if (userId) {
command = {
...command,
userId,
} as SendVerificationRedirectWithoutCheckCommand;
} else if (loginName) {
command = {
...command,
loginName,
} as SendVerificationRedirectWithoutCheckCommand;
}
await sendVerificationRedirectWithoutCheck(command)
.catch((error) => {
setError("Could not verify user");
return;

View File

@@ -340,7 +340,7 @@ export async function checkSessionAndSetPassword({
}
}
function checkMFAFactors(
export function checkMFAFactors(
session: Session,
loginSettings: LoginSettings | undefined,
authMethods: AuthenticationMethodType[],

View File

@@ -2,23 +2,22 @@
import {
getLoginSettings,
getSession,
getUserByID,
listAuthenticationMethodTypes,
listUsers,
resendEmailCode,
resendInviteCode,
verifyEmail,
verifyInviteCode,
} from "@/lib/zitadel";
import { create } from "@zitadel/client";
import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
import { ChecksSchema } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
import { User } from "@zitadel/proto/zitadel/user/v2/user_pb";
import { getNextUrl } from "../client";
import { getSessionCookieByLoginName } from "../cookies";
import {
createSessionAndUpdateCookie,
setSessionAndUpdateCookie,
} from "./cookie";
import { createSessionAndUpdateCookie } from "./cookie";
import { checkMFAFactors } from "./password";
type VerifyUserByEmailCommand = {
userId: string;
@@ -96,16 +95,13 @@ export async function resendVerification(command: resendVerifyEmailCommand) {
: resendEmailCode(command.userId);
}
type SendVerificationRedirectWithoutCheckCommand =
| {
loginName: string;
organization?: string;
authRequestId?: string;
}
| {
userId: string;
authRequestId?: string;
};
export type SendVerificationRedirectWithoutCheckCommand = {
organization?: string;
authRequestId?: string;
} & (
| { userId: string; loginName?: never }
| { userId?: never; loginName: string }
);
export async function sendVerificationRedirectWithoutCheck(
command: SendVerificationRedirectWithoutCheckCommand,
@@ -114,52 +110,31 @@ export async function sendVerificationRedirectWithoutCheck(
return { error: "No userId, nor loginname provided" };
}
let sessionCookie;
let loginSettings: LoginSettings | undefined;
let session;
let user: User;
let session: Session | undefined;
let user: User | undefined;
const loginSettings = await getLoginSettings(command.organization);
if ("loginName" in command) {
sessionCookie = await getSessionCookieByLoginName({
const sessionCookie = await getSessionCookieByLoginName({
loginName: command.loginName,
organization: command.organization,
}).catch((error) => {
console.warn("Ignored error:", error);
});
} else if (command.userId) {
const users = await listUsers({
loginName: command.loginName,
organizationId: command.organization,
});
if (users.details?.totalResult == BigInt(1) && users.result[0].userId) {
user = users.result[0];
const checks = create(ChecksSchema, {
user: { search: { case: "userId", value: users.result[0].userId } },
password: { password: command.checks.password?.password },
});
loginSettings = await getLoginSettings(command.organization);
session = await createSessionAndUpdateCookie(
checks,
undefined,
command.authRequestId,
loginSettings?.passwordCheckLifetime,
);
if (!sessionCookie) {
return { error: "Could not load session cookie" };
}
// this is a fake error message to hide that the user does not even exist
return { error: "Could not verify password" };
} else {
session = await setSessionAndUpdateCookie(
sessionCookie,
command.checks,
undefined,
command.authRequestId,
loginSettings?.passwordCheckLifetime,
);
session = await getSession({
sessionId: sessionCookie.id,
sessionToken: sessionCookie.token,
}).then((response) => {
if (response?.session) {
return response.session;
}
});
if (!session?.factors?.user?.id) {
return { error: "Could not create session for user" };
@@ -167,50 +142,57 @@ export async function sendVerificationRedirectWithoutCheck(
const userResponse = await getUserByID(session?.factors?.user?.id);
if (!userResponse.user) {
return { error: "Could not find user" };
if (!userResponse?.user) {
return { error: "Could not load user" };
}
user = userResponse.user;
}
} else if ("userId" in command) {
const userResponse = await getUserByID(command.userId);
if (!loginSettings) {
loginSettings = await getLoginSettings(
command.organization ?? session.factors?.user?.organizationId,
if (!userResponse?.user) {
return { error: "Could not load user" };
}
user = userResponse.user;
const checks = create(ChecksSchema, {
user: {
search: {
case: "loginName",
value: userResponse.user.preferredLoginName,
},
},
});
session = await createSessionAndUpdateCookie(
checks,
undefined,
command.authRequestId,
);
// this is a fake error message to hide that the user does not even exist
return { error: "Could not verify password" };
}
if (!session?.factors?.user?.id || !sessionCookie) {
if (!session?.factors?.user?.id) {
return { error: "Could not create session for user" };
}
// const userResponse = await getUserByID(command.userId);
// if (!userResponse || !userResponse.user) {
// return { error: "Could not load user" };
// }
if (!session?.factors?.user?.id) {
return { error: "Could not create session for user" };
}
// const checks = create(ChecksSchema, {
// user: {
// search: {
// case: "loginName",
// value: userResponse.user.preferredLoginName,
// },
// },
// });
if (!user) {
return { error: "Could not load user" };
}
// const session = await createSessionAndUpdateCookie(
// checks,
// undefined,
// command.authRequestId,
// );
const authMethodResponse = await listAuthenticationMethodTypes(
command.userId,
);
const authMethodResponse = await listAuthenticationMethodTypes(user.userId);
if (!authMethodResponse || !authMethodResponse.authMethodTypes) {
return { error: "Could not load possible authenticators" };
}
// if no authmethods are found on the user, redirect to set one up
if (
authMethodResponse &&
@@ -226,4 +208,38 @@ export async function sendVerificationRedirectWithoutCheck(
}
return { redirect: `/authenticator/set?${params}` };
}
// redirect to mfa factor if user has one, or redirect to set one up
checkMFAFactors(
session,
loginSettings,
authMethodResponse.authMethodTypes,
command.organization,
command.authRequestId,
);
// login user if no additional steps are required
if (command.authRequestId && session.id) {
const nextUrl = await getNextUrl(
{
sessionId: session.id,
authRequestId: command.authRequestId,
organization:
command.organization ?? session.factors?.user?.organizationId,
},
loginSettings?.defaultRedirectUri,
);
return { redirect: nextUrl };
}
const url = await getNextUrl(
{
loginName: session.factors.user.loginName,
organization: session.factors?.user?.organizationId,
},
loginSettings?.defaultRedirectUri,
);
return { redirect: url };
}