Merge branch 'main' into saml-2

.dockerignore

@@ -0,0 +1,2 @@
+*
+!docker

.github/workflows/docker.yml

@@ -0,0 +1,72 @@
+name: Docker
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: 'image=moby/buildkit:v0.11.6'
+
+      - name: Login
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.DOCKER_REGISTRY }}
+          username: ${{ secrets.DOCKER_REGISTRY_USERNAME }}
+          password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ secrets.DOCKER_IMAGE }}
+          # generate Docker tags based on the following events/attributes
+          tags: type=sha
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build for Docker
+        run: NEXT_PUBLIC_BASE_PATH=/new-login pnpm build:docker
+
+      - name: Build and Push Image
+        id: build
+        uses: docker/build-push-action@v5
+        timeout-minutes: 10
+        with:
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          push: true

.gitignore

@@ -22,3 +22,5 @@ packages/zitadel-server/src/app/proto
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/out
+/docker

.nvmrc

@@ -0,0 +1 @@
+lts/iron

CONTRIBUTING.md

@@ -67,7 +67,7 @@ export ZITADEL_SERVICE_USER_TOKEN=<your service account personal access token he
 ### Setting up local environment
 
 ```sh
-# Install dependencies. Developing requires Node.js v16
+# Install dependencies. Developing requires Node.js v20
 pnpm install
 
 # Generate gRPC stubs

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# If /.env-file/.env is mounted into the container, its variables are made available to the server before it starts up.
+RUN mkdir -p /.env-file && touch /.env-file/.env && chown -R nextjs:nodejs /.env-file
+
+COPY --chown=nextjs:nodejs ./docker/apps/login/.next/standalone ./
+COPY --chown=nextjs:nodejs ./docker/apps/login/.next/static ./apps/login/.next/static
+COPY --chown=nextjs:nodejs ./docker/apps/login/public ./apps/login/public
+
+USER nextjs
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["/bin/sh", "-c", " set -o allexport && . /.env-file/.env && set +o allexport && node apps/login/server.js"]

README.md

@@ -8,7 +8,7 @@ Login UI.
 [![npm package](https://img.shields.io/npm/v/@zitadel/proto.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/@zitadel/proto)
 [![npm package](https://img.shields.io/npm/v/@zitadel/client.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/@zitadel/client)
 
-**⚠️ This repo and packages are in alpha state and subject to change ⚠️**
+**⚠️ This repo and packages are in beta state and subject to change ⚠️**
 
 The scope of functionality of this repo and packages is under active development.
 

apps/login/next-env-vars.d.ts

@@ -10,10 +10,18 @@ declare namespace NodeJS {
     SYSTEM_USER_PRIVATE_KEY: string; // The fallback service user private key
 
     /**
-     * Self hosting: The instance url
+     * Self hosting: The Zitadel API url
      */
     ZITADEL_API_URL: string;
 
+    /**
+     * Takes effect only if ZITADEL_API_URL is not empty.
+     * This is only relevant if Zitadels runtime has the ZITADEL_INSTANCEHOSTHEADERS config changed.
+     * The default is x-zitadel-instance-host.
+     * Most users don't need to set this variable.
+     */
+    ZITADEL_INSTANCE_HOST_HEADER: string;
+
     /**
      * Self hosting: The service user id
      */

apps/login/next.config.mjs

@@ -34,27 +34,39 @@ const secureHeaders = [
   },
 ];
 
+const imageRemotePatterns = [
+  {
+    protocol: "http",
+    hostname: "localhost",
+    port: "8080",
+    pathname: "/**",
+  },
+  {
+    protocol: "https",
+    hostname: "*.zitadel.*",
+    port: "",
+    pathname: "/**",
+  },
+];
+
+if (process.env.ZITADEL_API_URL) {
+  imageRemotePatterns.push({
+    protocol: "https",
+    hostname: process.env.ZITADEL_API_URL?.replace("https://", "") || "",
+    port: "",
+    pathname: "/**",
+  });
+}
+
 const nextConfig = {
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  output: process.env.NEXT_OUTPUT_MODE || undefined,
   reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
   experimental: {
     dynamicIO: true,
   },
   images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: process.env.ZITADEL_API_URL?.replace("https://", "") || "",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "http",
-        hostname: "localhost",
-        port: "8080",
-        pathname: "/**",
-      },
-    ],
+    remotePatterns: imageRemotePatterns,
   },
   async headers() {
     return [

apps/login/package.json

@@ -23,6 +23,7 @@
     "lint:fix": "prettier --write .",
     "lint-staged": "lint-staged",
     "build": "next build",
+    "build:standalone": "NEXT_OUTPUT_MODE=standalone pnpm build",
     "prestart": "pnpm build",
     "start": "next start",
     "start:built": "next start",
@@ -62,7 +63,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/ms": "0.7.34",
-    "@types/node": "22.9.0",
+    "@types/node": "^20.17.17",
     "@types/react": "19.0.2",
     "@types/react-dom": "19.0.2",
     "@types/tinycolor2": "1.4.3",

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

@@ -13,19 +13,13 @@ import { getLocale, getTranslations } from "next-intl/server";
 import { headers } from "next/headers";
 import Link from "next/link";
 
-async function loadSessions({
-  serviceUrl,
-  serviceRegion,
-}: {
-  serviceUrl: string;
-  serviceRegion: string;
-}) {
+async function loadSessions({ serviceUrl }: { serviceUrl: string }) {
   const ids: (string | undefined)[] = await getAllSessionCookieIds();
 
   if (ids && ids.length) {
     const response = await listSessions({
       serviceUrl,
-      serviceRegion,
+
       ids: ids.filter((id) => !!id) as string[],
     });
     return response?.sessions ?? [];
@@ -46,24 +40,23 @@ export default async function Page(props: {
   const organization = searchParams?.organization;
 
   const _headers = await headers();
-  const { serviceUrl, serviceRegion } = getServiceUrlFromHeaders(_headers);
+  const { serviceUrl } = getServiceUrlFromHeaders(_headers);
 
   let defaultOrganization;
   if (!organization) {
     const org: Organization | null = await getDefaultOrg({
       serviceUrl,
-      serviceRegion,
     });
     if (org) {
       defaultOrganization = org.id;
     }
   }
 
-  let sessions = await loadSessions({ serviceUrl, serviceRegion });
+  let sessions = await loadSessions({ serviceUrl });
 
   const branding = await getBrandingSettings({
     serviceUrl,
-    serviceRegion,
+
     organization: organization ?? defaultOrganization,
   });
 

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

@@ -30,15 +30,15 @@ export default async function Page(props: {
   const { loginName, requestId, organization, sessionId } = searchParams;
 
   const _headers = await headers();
-  const { serviceUrl, serviceRegion } = getServiceUrlFromHeaders(_headers);
+  const { serviceUrl } = getServiceUrlFromHeaders(_headers);
 
   const sessionWithData = sessionId
     ? await loadSessionById(serviceUrl, sessionId, organization)
     : await loadSessionByLoginname(serviceUrl, loginName, organization);
 
   async function getAuthMethodsAndUser(
     serviceUrl: string,
-    serviceRegion: string,
+
     session?: Session,
   ) {
     const userId = session?.factors?.user?.id;
@@ -49,10 +49,10 @@ export default async function Page(props: {
 
     return listAuthenticationMethodTypes({
       serviceUrl,
-      serviceRegion,
+
       userId,
     }).then((methods) => {
-      return getUserByID({ serviceUrl, serviceRegion, userId }).then((user) => {
+      return getUserByID({ serviceUrl, userId }).then((user) => {
         const humanUser =
           user.user?.type.case === "human" ? user.user?.type.value : undefined;
 
@@ -74,13 +74,13 @@ export default async function Page(props: {
   ) {
     return loadMostRecentSession({
       serviceUrl,
-      serviceRegion,
+
       sessionParams: {
         loginName,
         organization,
       },
     }).then((session) => {
-      return getAuthMethodsAndUser(serviceUrl, serviceRegion, session);
+      return getAuthMethodsAndUser(serviceUrl, session);
     });
   }
 
@@ -92,13 +92,13 @@ export default async function Page(props: {
     const recent = await getSessionCookieById({ sessionId, organization });
     return getSession({
       serviceUrl,
-      serviceRegion,
+
       sessionId: recent.id,
       sessionToken: recent.token,
     }).then((sessionResponse) => {
       return getAuthMethodsAndUser(
         serviceUrl,
-        serviceRegion,
+
         sessionResponse.session,
       );
     });
@@ -110,19 +110,19 @@ export default async function Page(props: {
 
   const branding = await getBrandingSettings({
     serviceUrl,
-    serviceRegion,
+
     organization: sessionWithData.factors?.user?.organizationId,
   });
 
   const loginSettings = await getLoginSettings({
     serviceUrl,
-    serviceRegion,
+
     organization: sessionWithData.factors?.user?.organizationId,
   });
 
   const identityProviders = await getActiveIdentityProviders({
     serviceUrl,
-    serviceRegion,
+
     orgId: sessionWithData.factors?.user?.organizationId,
     linking_allowed: true,
   }).then((resp) => {