client side i18n

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

@@ -0,0 +1,201 @@
+import { Alert, AlertType } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { IdpSignin } from "@/components/idp-signin";
+import { idpTypeToIdentityProviderType, PROVIDER_MAPPING } from "@/lib/idp";
+import {
+  addIDPLink,
+  createUser,
+  getBrandingSettings,
+  getIDPByID,
+  listUsers,
+  retrieveIDPIntent,
+} from "@/lib/zitadel";
+import { AutoLinkingOption } from "@zitadel/proto/zitadel/idp/v2/idp_pb";
+
+export default async function Page({
+  searchParams,
+  params,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+  params: { provider: string };
+}) {
+  const { id, token, authRequestId, organization } = searchParams;
+  const { provider } = params;
+
+  const branding = await getBrandingSettings(organization);
+  if (provider && id && token) {
+    return retrieveIDPIntent(id, token)
+      .then(async (resp) => {
+        const { idpInformation, userId } = resp;
+
+        if (userId) {
+          // TODO: update user if idp.options.isAutoUpdate is true
+
+          return (
+            <DynamicTheme branding={branding}>
+              <div className="flex flex-col items-center space-y-4">
+                <h1>Login successful</h1>
+                <div>You have successfully been loggedIn!</div>
+
+                <IdpSignin
+                  userId={userId}
+                  idpIntent={{ idpIntentId: id, idpIntentToken: token }}
+                  authRequestId={authRequestId}
+                />
+              </div>
+            </DynamicTheme>
+          );
+        }
+
+        if (idpInformation) {
+          const idp = await getIDPByID(idpInformation.idpId);
+          const options = idp?.config?.options;
+
+          if (!idp) {
+            throw new Error("IDP not found");
+          }
+
+          const providerType = idpTypeToIdentityProviderType(idp.type);
+
+          // search for potential user via username, then link
+          if (options?.isLinkingAllowed) {
+            let foundUser;
+            const email =
+              PROVIDER_MAPPING[providerType](idpInformation).email?.email;
+
+            if (options.autoLinking === AutoLinkingOption.EMAIL && email) {
+              foundUser = await listUsers({ email }).then((response) => {
+                return response.result ? response.result[0] : null;
+              });
+            } else if (options.autoLinking === AutoLinkingOption.USERNAME) {
+              foundUser = await listUsers(
+                options.autoLinking === AutoLinkingOption.USERNAME
+                  ? { userName: idpInformation.userName }
+                  : { email },
+              ).then((response) => {
+                return response.result ? response.result[0] : null;
+              });
+            } else {
+              foundUser = await listUsers({
+                userName: idpInformation.userName,
+                email,
+              }).then((response) => {
+                return response.result ? response.result[0] : null;
+              });
+            }
+
+            if (foundUser) {
+              const idpLink = await addIDPLink(
+                {
+                  id: idpInformation.idpId,
+                  userId: idpInformation.userId,
+                  userName: idpInformation.userName,
+                },
+                foundUser.userId,
+              ).catch((error) => {
+                return (
+                  <DynamicTheme branding={branding}>
+                    <div className="flex flex-col items-center space-y-4">
+                      <h1>Linking failed</h1>
+                      <div className="w-full">
+                        {
+                          <Alert type={AlertType.ALERT}>
+                            {JSON.stringify(error.message)}
+                          </Alert>
+                        }
+                      </div>
+                    </div>
+                  </DynamicTheme>
+                );
+              });
+
+              if (idpLink) {
+                return (
+                  // TODO: possibily login user now
+                  <DynamicTheme branding={branding}>
+                    <div className="flex flex-col items-center space-y-4">
+                      <h1>Account successfully linked</h1>
+                      <div>Your account has successfully been linked!</div>
+                    </div>
+                  </DynamicTheme>
+                );
+              }
+            }
+          }
+
+          if (options?.isCreationAllowed && options.isAutoCreation) {
+            const newUser = await createUser(providerType, idpInformation);
+
+            if (newUser) {
+              return (
+                <DynamicTheme branding={branding}>
+                  <div className="flex flex-col items-center space-y-4">
+                    <h1>Register successful</h1>
+                    <div>You have successfully been registered!</div>
+                  </div>
+                </DynamicTheme>
+              );
+            }
+          }
+
+          // return login failed if no linking or creation is allowed and no user was found
+          return (
+            <DynamicTheme branding={branding}>
+              <div className="flex flex-col items-center space-y-4">
+                <h1>Login failed</h1>
+                <div className="w-full">
+                  {
+                    <Alert type={AlertType.ALERT}>
+                      User could not be logged in
+                    </Alert>
+                  }
+                </div>
+              </div>
+            </DynamicTheme>
+          );
+        } else {
+          return (
+            <DynamicTheme branding={branding}>
+              <div className="flex flex-col items-center space-y-4">
+                <h1>Login failed</h1>
+                <div className="w-full">
+                  {
+                    <Alert type={AlertType.ALERT}>
+                      Could not get user information
+                    </Alert>
+                  }
+                </div>
+              </div>
+            </DynamicTheme>
+          );
+        }
+      })
+      .catch((error) => {
+        return (
+          <DynamicTheme branding={branding}>
+            <div className="flex flex-col items-center space-y-4">
+              <h1>An error occurred</h1>
+              <div className="w-full">
+                {
+                  <Alert type={AlertType.ALERT}>
+                    {JSON.stringify(error.message)}
+                  </Alert>
+                }
+              </div>
+            </div>
+          </DynamicTheme>
+        );
+      });
+  } else {
+    return (
+      <DynamicTheme branding={branding}>
+        <div className="flex flex-col items-center space-y-4">
+          <div className="flex flex-col items-center space-y-4">
+            <h1>Register</h1>
+            <p className="ztdl-p">No id and token received!</p>
+          </div>
+        </div>
+      </DynamicTheme>
+    );
+  }
+}