handle error when linking

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

@@ -28,7 +28,7 @@ export default async function Page(props: {
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
         <h1>{t("loginError.title")}</h1>
-        <div>{t("loginError.description")}</div>
+        <p className="ztdl-p">{t("loginError.description")}</p>
       </div>
     </DynamicTheme>
   );

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

@@ -74,17 +74,20 @@ export default async function Page(props: {
 
   if (link && options?.isLinkingAllowed) {
     console.log(userId);
-    const idpLink = await addIDPLink(
-      {
-        id: idpInformation.idpId,
-        userId: idpInformation.userId,
-        userName: idpInformation.userName,
-      },
-      userId,
-    ).catch((error) => {
+    let idpLink;
+    try {
+      idpLink = await addIDPLink(
+        {
+          id: idpInformation.idpId,
+          userId: idpInformation.userId,
+          userName: idpInformation.userName,
+        },
+        userId,
+      );
+    } catch (error) {
       console.error(error);
       return linkingFailed(branding);
-    });
+    }
 
     if (!idpLink) {
       console.log("linking failed");
@@ -126,17 +129,21 @@ export default async function Page(props: {
     }
 
     if (foundUser) {
-      const idpLink = await addIDPLink(
-        {
-          id: idpInformation.idpId,
-          userId: idpInformation.userId,
-          userName: idpInformation.userName,
-        },
-        foundUser.userId,
-      ).catch((error) => {
+      let idpLink;
+      try {
+        idpLink = await addIDPLink(
+          {
+            id: idpInformation.idpId,
+            userId: idpInformation.userId,
+            userName: idpInformation.userName,
+          },
+          foundUser.userId,
+        );
+      } catch (error) {
         console.error(error);
         return linkingFailed(branding);
-      });
+      }
+
       if (!idpLink) {
         return linkingFailed(branding);
       } else {

apps/login/src/components/idps/pages/linking-failed.tsx

@@ -1,13 +1,12 @@
-"use client";
-
 import { LanguageProvider } from "@/components/language-provider";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
-import { useTranslations } from "next-intl";
+import { getLocale, getTranslations } from "next-intl/server";
 import { Alert, AlertType } from "../../alert";
 import { DynamicTheme } from "../../dynamic-theme";
 
-export function linkingFailed(branding?: BrandingSettings) {
-  const t = useTranslations("idp");
+export async function linkingFailed(branding?: BrandingSettings) {
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "idp" });
 
   return (
     <LanguageProvider>

apps/login/src/components/idps/pages/linking-success.tsx

@@ -1,17 +1,16 @@
-"use client";
-
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
-import { useTranslations } from "next-intl";
+import { getLocale, getTranslations } from "next-intl/server";
 import { DynamicTheme } from "../../dynamic-theme";
 import { IdpSignin } from "../../idp-signin";
 
-export function linkingSuccess(
+export async function linkingSuccess(
   userId: string,
   idpIntent: { idpIntentId: string; idpIntentToken: string },
   authRequestId?: string,
   branding?: BrandingSettings,
 ) {
-  const t = useTranslations("idp");
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "idp" });
 
   return (
     <DynamicTheme branding={branding}>

apps/login/src/components/idps/pages/login-failed.tsx

@@ -1,13 +1,15 @@
-"use client";
-
 import { LanguageProvider } from "@/components/language-provider";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
-import { useTranslations } from "next-intl";
+import { getLocale, getTranslations } from "next-intl/server";
 import { Alert, AlertType } from "../../alert";
 import { DynamicTheme } from "../../dynamic-theme";
 
-export function loginFailed(branding?: BrandingSettings, error: string = "") {
-  const t = useTranslations("idp");
+export async function loginFailed(
+  branding?: BrandingSettings,
+  error: string = "",
+) {
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "idp" });
 
   return (
     <LanguageProvider>

apps/login/src/components/idps/pages/login-success.tsx

@@ -1,18 +1,17 @@
-"use client";
-
 import { LanguageProvider } from "@/components/language-provider";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
-import { useTranslations } from "next-intl";
+import { getLocale, getTranslations } from "next-intl/server";
 import { DynamicTheme } from "../../dynamic-theme";
 import { IdpSignin } from "../../idp-signin";
 
-export function loginSuccess(
+export async function loginSuccess(
   userId: string,
   idpIntent: { idpIntentId: string; idpIntentToken: string },
   authRequestId?: string,
   branding?: BrandingSettings,
 ) {
-  const t = useTranslations("idp");
+  const locale = getLocale();
+  const t = await getTranslations({ locale, namespace: "idp" });
 
   return (
     <LanguageProvider>