mfa, idp i18n

apps/login/locales/en.json

@@ -48,7 +48,19 @@
       "description": "An error occurred while trying to link your account."
     }
   },
+  "mfa": {
+    "verify": {
+      "title": "Verify your identity",
+      "description": "Choose one of the following factors.",
+      "noResults": "No second factors available to setup."
+    },
+    "set": {
+      "title": "Set up 2-Factor",
+      "description": "Choose one of the following second factors."
+    }
+  },
   "error": {
-    "unknownContext": "Could not get the context of the user. Make sure to enter the username first or provide a loginName as searchParam."
+    "unknownContext": "Could not get the context of the user. Make sure to enter the username first or provide a loginName as searchParam.",
+    "sessionExpired": "You need to have a valid session in order to continue."
   }
 }

apps/login/src/app/(login)/accounts/page.tsx

@@ -3,7 +3,7 @@ import { SessionsList } from "@/components/sessions-list";
 import { getAllSessionCookieIds } from "@/lib/cookies";
 import { getBrandingSettings, listSessions } from "@/lib/zitadel";
 import { UserPlusIcon } from "@heroicons/react/24/outline";
-import { useTranslations } from "next-intl";
+import { getLocale, getTranslations } from "next-intl/server";
 import Link from "next/link";
 
 async function loadSessions() {
@@ -25,7 +25,9 @@ export default async function Page({
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const t = useTranslations("accounts");
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "accounts" });
+
   const authRequestId = searchParams?.authRequestId;
   const organization = searchParams?.organization;
 

apps/login/src/app/(login)/idp/[provider]/failure/page.tsx

@@ -1,6 +1,7 @@
 import { DynamicTheme } from "@/components/dynamic-theme";
 import { getBrandingSettings } from "@/lib/zitadel";
 import { IdentityProviderType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { getLocale, getTranslations } from "next-intl/server";
 
 // This configuration shows the given name in the respective IDP button as fallback
 const PROVIDER_NAME_MAPPING: {
@@ -18,36 +19,19 @@ export default async function Page({
   searchParams: Record<string | number | symbol, string | undefined>;
   params: { provider: string };
 }) {
-  const { id, token, authRequestId, organization } = searchParams;
-  const { provider } = params;
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "idp" });
+
+  const { organization } = searchParams;
 
   const branding = await getBrandingSettings(organization);
 
-  if (provider) {
-    return (
-      <DynamicTheme branding={branding}>
-        <div className="flex flex-col items-center space-y-4">
-          <h1>Login failure</h1>
-          <div>
-            An error signing in with{" "}
-            {PROVIDER_NAME_MAPPING[provider]
-              ? PROVIDER_NAME_MAPPING[provider]
-              : provider}{" "}
-            happened!
-          </div>
-
-          {/* <Alert type={AlertType.ALERT}>
-                    {}
-                  </Alert> */}
-        </div>
-      </DynamicTheme>
-    );
-  } else {
-    return (
+  return (
+    <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>Register</h1>
-        <p className="ztdl-p">No id and token received!</p>
+        <h1>{t("loginError.title")}</h1>
+        <div>{t("loginError.description")}</div>
       </div>
-    );
-  }
+    </DynamicTheme>
+  );
 }

apps/login/src/app/(login)/idp/page.tsx

@@ -2,7 +2,7 @@ import { DynamicTheme } from "@/components/dynamic-theme";
 import { SignInWithIdp } from "@/components/sign-in-with-idp";
 import { getBrandingSettings, settingsService } from "@/lib/zitadel";
 import { makeReqCtx } from "@zitadel/client/v2";
-import { useTranslations } from "next-intl";
+import { getLocale, getTranslations } from "next-intl/server";
 
 function getIdentityProviders(orgId?: string) {
   return settingsService
@@ -17,7 +17,9 @@ export default async function Page({
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const t = useTranslations("idp");
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "idp" });
+
   const authRequestId = searchParams?.authRequestId;
   const organization = searchParams?.organization;
 

apps/login/src/app/(login)/mfa/page.tsx

@@ -10,12 +10,16 @@ import {
   getSession,
   listAuthenticationMethodTypes,
 } from "@/lib/zitadel";
+import { getLocale, getTranslations } from "next-intl/server";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "mfa" });
+
   const { loginName, authRequestId, organization, sessionId } = searchParams;
 
   const sessionFactors = sessionId
@@ -67,9 +71,9 @@ export default async function Page({
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>Verify 2-Factor</h1>
+        <h1>{t("verify.title")}</h1>
 
-        <p className="ztdl-p">Choose one of the following second factors.</p>
+        <p className="ztdl-p">{t("verify.description")}</p>
 
         {sessionFactors && (
           <UserAvatar
@@ -81,7 +85,7 @@ export default async function Page({
         )}
 
         {!(loginName || sessionId) && (
-          <Alert>Provide your active session as loginName param</Alert>
+          <Alert>{t("error.unknownContext")}</Alert>
         )}
 
         {sessionFactors ? (
@@ -93,7 +97,7 @@ export default async function Page({
             userMethods={sessionFactors.authMethods ?? []}
           ></ChooseSecondFactor>
         ) : (
-          <Alert>No second factors available to setup.</Alert>
+          <Alert>{t("verify.noResults")}</Alert>
         )}
 
         <div className="mt-8 flex w-full flex-row items-center">

apps/login/src/app/(login)/mfa/set/page.tsx

@@ -14,6 +14,7 @@ import {
 } from "@/lib/zitadel";
 import { Timestamp, timestampDate } from "@zitadel/client";
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
+import { getLocale, getTranslations } from "next-intl/server";
 
 function isSessionValid(session: Partial<Session>): {
   valid: boolean;
@@ -36,6 +37,9 @@ export default async function Page({
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "mfa" });
+
   const {
     loginName,
     checkAfter,
@@ -104,9 +108,9 @@ export default async function Page({
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>Set up 2-Factor</h1>
+        <h1>{t("set.title")}</h1>
 
-        <p className="ztdl-p">Choose one of the following second factors.</p>
+        <p className="ztdl-p">{t("set.description")}</p>
 
         {sessionWithData && (
           <UserAvatar
@@ -118,15 +122,10 @@ export default async function Page({
         )}
 
         {!(loginName || sessionId) && (
-          <Alert>Provide your active session as loginName param</Alert>
+          <Alert>{t("error.unknownContext")}</Alert>
         )}
 
-        {!valid && (
-          <Alert>
-            You need to have a valid session in order to set a second factor!
-            {/* TODO: show reauth button */}
-          </Alert>
-        )}
+        {!valid && <Alert>{t("error.sessionExpired")}</Alert>}
 
         {isSessionValid(sessionWithData).valid &&
           loginSettings &&