fix: default redirect, server redirects, nextjs 15

acceptance/tests/register-screen.ts

@@ -5,12 +5,12 @@ const passwordConfirmField = "password-confirm-text-input";
 
 export async function registerUserScreenPassword(page: Page, firstname: string, lastname: string, email: string) {
   await registerUserScreen(page, firstname, lastname, email);
-  await page.getByTestId("Password-radio").click();
+  await page.getByTestId("password-radio").click();
 }
 
 export async function registerUserScreenPasskey(page: Page, firstname: string, lastname: string, email: string) {
   await registerUserScreen(page, firstname, lastname, email);
-  await page.getByTestId("Passkeys-radio").click();
+  await page.getByTestId("passkey-radio").click();
 }
 
 export async function registerPasswordScreen(page: Page, password1: string, password2: string) {

apps/login/cypress/integration/register.cy.ts

@@ -10,6 +10,16 @@ describe("register", () => {
         result: [{ id: "256088834543534543" }],
       },
     });
+    stub("zitadel.settings.v2.SettingsService", "GetLoginSettings", {
+      data: {
+        settings: {
+          passkeysType: 1,
+          allowRegister: true,
+          allowUsernamePassword: true,
+          defaultRedirectUri: "",
+        },
+      },
+    });
     stub("zitadel.user.v2.UserService", "AddHumanUser", {
       data: {
         userId: "221394658884845598",
@@ -53,9 +63,11 @@ describe("register", () => {
 
   it("should redirect a user who selects passwordless on register to /passkey/set", () => {
     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("[email protected]");
+    cy.get('input[data-testid="firstname-text-input"]').focus().type("John");
+    cy.get('input[data-testid="lastname-text-input"]').focus().type("Doe");
+    cy.get('input[data-testid="email-text-input"]')
+      .focus()
+      .type("[email protected]");
     cy.get('input[type="checkbox"][value="privacypolicy"]').check();
     cy.get('input[type="checkbox"][value="tos"]').check();
     cy.get('button[type="submit"]').click();

apps/login/locales/de.json

@@ -122,6 +122,18 @@
     }
   },
   "register": {
+    "methods": {
+      "passkey": "Passkey",
+      "password": "Password"
+    },
+    "disabled": {
+      "title": "Registrierung deaktiviert",
+      "description": "Die Registrierung ist deaktiviert. Bitte wenden Sie sich an den Administrator."
+    },
+    "missingdata": {
+      "title": "Registrierung fehlgeschlagen",
+      "description": "Einige Daten fehlen. Bitte überprüfen Sie Ihre Eingaben."
+    },
     "title": "Registrieren",
     "description": "Erstellen Sie Ihr ZITADEL-Konto.",
     "selectMethod": "Wählen Sie die Methode, mit der Sie sich authentifizieren möchten",
@@ -151,7 +163,8 @@
   },
   "signedin": {
     "title": "Willkommen {user}!",
-    "description": "Sie sind angemeldet."
+    "description": "Sie sind angemeldet.",
+    "continue": "Weiter"
   },
   "verify": {
     "userIdMissing": "Keine Benutzer-ID angegeben!",

apps/login/locales/en.json

@@ -122,6 +122,18 @@
     }
   },
   "register": {
+    "methods": {
+      "passkey": "Passkey",
+      "password": "Password"
+    },
+    "disabled": {
+      "title": "Registration disabled",
+      "description": "The registration is disabled. Please contact your administrator."
+    },
+    "missingdata": {
+      "title": "Missing data",
+      "description": "Provide email, first and last name to register."
+    },
     "title": "Register",
     "description": "Create your ZITADEL account.",
     "selectMethod": "Select the method you would like to authenticate",
@@ -151,7 +163,8 @@
   },
   "signedin": {
     "title": "Welcome {user}!",
-    "description": "You are signed in."
+    "description": "You are signed in.",
+    "continue": "Continue"
   },
   "verify": {
     "userIdMissing": "No userId provided!",

apps/login/locales/es.json

@@ -122,6 +122,18 @@
     }
   },
   "register": {
+    "methods": {
+      "passkey": "Clave de acceso",
+      "password": "Contraseña"
+    },
+    "disabled": {
+      "title": "Registro deshabilitado",
+      "description": "Registrarse está deshabilitado en este momento."
+    },
+    "missingdata": {
+      "title": "Datos faltantes",
+      "description": "No se proporcionaron datos suficientes para el registro."
+    },
     "title": "Registrarse",
     "description": "Crea tu cuenta ZITADEL.",
     "selectMethod": "Selecciona el método con el que deseas autenticarte",
@@ -151,7 +163,8 @@
   },
   "signedin": {
     "title": "¡Bienvenido {user}!",
-    "description": "Has iniciado sesión."
+    "description": "Has iniciado sesión.",
+    "continue": "Continuar"
   },
   "verify": {
     "userIdMissing": "¡No se proporcionó userId!",

apps/login/locales/it.json

@@ -122,6 +122,18 @@
     }
   },
   "register": {
+    "methods": {
+      "passkey": "Passkey",
+      "password": "Password"
+    },
+    "disabled": {
+      "title": "Registration disabled",
+      "description": "Registrazione disabilitata. Contatta l'amministratore di sistema per assistenza."
+    },
+    "missingdata": {
+      "title": "Registrazione",
+      "description": "Inserisci i tuoi dati per registrarti."
+    },
     "title": "Registrati",
     "description": "Crea il tuo account ZITADEL.",
     "selectMethod": "Seleziona il metodo con cui desideri autenticarti",
@@ -151,7 +163,8 @@
   },
   "signedin": {
     "title": "Benvenuto {user}!",
-    "description": "Sei connesso."
+    "description": "Sei connesso.",
+    "continue": "Continua"
   },
   "verify": {
     "userIdMissing": "Nessun userId fornito!",

apps/login/mock/initial-stubs/zitadel.settings.v2.SettingsService.json

@@ -2,7 +2,15 @@
   {
     "service": "zitadel.settings.v2.SettingsService",
     "method": "GetBrandingSettings",
-    "out": {}
+    "out": {
+      "data": {
+        "settings": {
+          "darkTheme": {
+            "backgroundColor": "#ff0000"
+          }
+        }
+      }
+    }
   },
   {
     "service": "zitadel.settings.v2.SettingsService",

apps/login/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/login/next.config.mjs

@@ -36,7 +36,9 @@ const secureHeaders = [
 
 const nextConfig = {
   reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
-  swcMinify: true,
+  experimental: {
+    dynamicIO: true,
+  },
   images: {
     remotePatterns: [
       {

apps/login/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "test": "concurrently --timings --kill-others-on-fail 'npm:test:unit' 'npm:test:integration'",
     "test:watch": "concurrently --kill-others 'npm:test:unit:watch' 'npm:test:integration:watch'",
     "test:unit": "vitest",
@@ -45,13 +45,13 @@
     "copy-to-clipboard": "^3.3.3",
     "deepmerge": "^4.3.1",
     "moment": "^2.29.4",
-    "next": "14.2.14",
-    "next-intl": "^3.20.0",
+    "next": "15.0.4-canary.23",
+    "next-intl": "^3.25.1",
     "next-themes": "^0.2.1",
     "nice-grpc": "2.0.1",
     "qrcode.react": "^3.1.0",
-    "react": "^18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-hook-form": "7.39.5",
     "swr": "^2.2.0",
     "tinycolor2": "1.4.2"
@@ -62,8 +62,8 @@
     "@testing-library/react": "^16.0.1",
     "@types/ms": "0.7.34",
     "@types/node": "22.9.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected].1",
     "@types/tinycolor2": "1.4.3",
     "@types/uuid": "^10.0.0",
     "@vercel/git-hooks": "1.0.0",

apps/login/readme.md

@@ -116,7 +116,7 @@ If the user has set up an additional **single** second factor, it is redirected
 
 **NO MFA, FORCE MFA:** If no MFA method is available, and the settings force MFA, the user is sent to `/mfa/set` which prompts to setup a second factor.
 
-**PROMPT PASSKEY** If the settings do not enforce MFA, we check if passkeys are allowed with `loginSettings?.passkeysType === PasskeysType.ALLOWED` and redirect the user to `/passkey/set` if no passkeys are setup. This step can be skipped.
+**PROMPT PASSKEY** If the settings do not enforce MFA, we check if passkeys are allowed with `loginSettings?.passkeysType == PasskeysType.ALLOWED` and redirect the user to `/passkey/set` if no passkeys are setup. This step can be skipped.
 
 If none of the previous conditions apply, we continue to sign in.
 
@@ -386,3 +386,11 @@ In future, self service options to jump to are shown below, like:
 - logout
 
 > NOTE: This page has to be explicitly enabled or act as a fallback if no default redirect is set.
+
+## Currently NOT Supported
+
+- loginSettings.disableLoginWithEmail
+- loginSettings.disableLoginWithPhone
+- loginSettings.allowExternalIdp - this will be deprecated with the new login as it can be determined by the available IDPs
+- loginSettings.forceMfaLocalOnly
+- loginSettings lifetimes - all besides Multifactor Init Check can be implemented. for the Init Check, an external storage or a timestamp has to be implemented which keeps track of the last verification

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

@@ -20,11 +20,10 @@ async function loadSessions() {
   }
 }
 
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Record<string | number | symbol, string | undefined>;
+export default async function Page(props: {
+  searchParams: Promise<Record<string | number | symbol, string | undefined>>;
 }) {
+  const searchParams = await props.searchParams;
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "accounts" });
 

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

@@ -15,11 +15,10 @@ import {
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import { getLocale, getTranslations } from "next-intl/server";
 
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Record<string | number | symbol, string | undefined>;
+export default async function Page(props: {
+  searchParams: Promise<Record<string | number | symbol, string | undefined>>;
 }) {
+  const searchParams = await props.searchParams;
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "authenticator" });
   const tError = await getTranslations({ locale, namespace: "error" });

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

@@ -12,13 +12,11 @@ const PROVIDER_NAME_MAPPING: {
   [IdentityProviderType.AZURE_AD]: "Microsoft",
 };
 
-export default async function Page({
-  searchParams,
-  params,
-}: {
-  searchParams: Record<string | number | symbol, string | undefined>;
-  params: { provider: string };
+export default async function Page(props: {
+  searchParams: Promise<Record<string | number | symbol, string | undefined>>;
+  params: Promise<{ provider: string }>;
 }) {
+  const searchParams = await props.searchParams;
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "idp" });
 

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

@@ -29,13 +29,12 @@ async function loginFailed(branding?: BrandingSettings) {
     </DynamicTheme>
   );
 }
-export default async function Page({
-  searchParams,
-  params,
-}: {
-  searchParams: Record<string | number | symbol, string | undefined>;
-  params: { provider: string };
+export default async function Page(props: {
+  searchParams: Promise<Record<string | number | symbol, string | undefined>>;
+  params: Promise<{ provider: string }>;
 }) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "idp" });
   const { id, token, authRequestId, organization } = searchParams;

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

@@ -12,11 +12,10 @@ function getIdentityProviders(orgId?: string) {
     });
 }
 
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Record<string | number | symbol, string | undefined>;
+export default async function Page(props: {
+  searchParams: Promise<Record<string | number | symbol, string | undefined>>;
 }) {
+  const searchParams = await props.searchParams;
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "idp" });
 

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

@@ -9,11 +9,10 @@ import {
 } from "@/lib/zitadel";
 import { getLocale, getTranslations } from "next-intl/server";
 
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Record<string | number | symbol, string | undefined>;
+export default async function Page(props: {
+  searchParams: Promise<Record<string | number | symbol, string | undefined>>;
 }) {
+  const searchParams = await props.searchParams;
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "invite" });
 

apps/login/src/app/(login)/invite/success/page.tsx

@@ -7,11 +7,10 @@ import { HumanUser, User } from "@zitadel/proto/zitadel/user/v2/user_pb";
 import { getLocale, getTranslations } from "next-intl/server";
 import Link from "next/link";
 
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Record<string | number | symbol, string | undefined>;
+export default async function Page(props: {
+  searchParams: Promise<Record<string | number | symbol, string | undefined>>;
 }) {
+  const searchParams = await props.searchParams;
   const locale = getLocale();
   const t = await getTranslations({ locale, namespace: "invite" });