chore(device): guide the user during device auth

.markdownlint.json

@@ -5,4 +5,4 @@
   "MD013": {
     "line_length": 180
   }
-} 
+}

apps/login-test-acceptance/docker-compose-ci.yaml

@@ -1,5 +1,4 @@
 services:
-
   zitadel:
     environment:
       ZITADEL_EXTERNALDOMAIN: traefik

apps/login-test-acceptance/docker-compose.yaml

@@ -1,5 +1,4 @@
 services:
-
   zitadel:
     user: "${UID:-1000}:${GID:-1000}"
     image: "${ZITADEL_TAG:-ghcr.io/zitadel/zitadel:latest}"
@@ -9,7 +8,7 @@ services:
       - "traefik.enable=true"
       - "traefik.http.routers.zitadel.rule=!PathPrefix(`/ui/v2/login`)"
       #      - "traefik.http.middlewares.zitadel.headers.customrequestheaders.Host=localhost"
-#      - "traefik.http.routers.zitadel.middlewares=zitadel@docker"
+      #      - "traefik.http.routers.zitadel.middlewares=zitadel@docker"
       - "traefik.http.services.zitadel-service.loadbalancer.server.scheme=h2c"
     ports:
       - "8080:8080"
@@ -54,7 +53,7 @@ services:
       - "traefik.http.routers.login.rule=PathPrefix(`/ui/v2/login`)"
       - "traefik.http.services.login-service.loadbalancer.server.url=http://host.docker.internal:3000"
     command:
-#      - "--log.level=DEBUG"
+      #      - "--log.level=DEBUG"
       - "--ping"
       - "--api.insecure=true"
       - "--providers.docker=true"
@@ -113,16 +112,16 @@ services:
       args:
         - LOGIN_TEST_ACCEPTANCE_GOLANG_TAG=${LOGIN_TEST_ACCEPTANCE_GOLANG_TAG:-golang:1.24-alpine}
     environment:
-      PORT: '3333'
+      PORT: "3333"
     command:
       - -port
-      - '3333'
+      - "3333"
       - -email
-      - '/email'
+      - "/email"
       - -sms
-      - '/sms'
+      - "/sms"
       - -notification
-      - '/notification'
+      - "/notification"
     ports:
       - "3333:3333"
     depends_on:
@@ -139,14 +138,14 @@ services:
       args:
         - LOGIN_TEST_ACCEPTANCE_GOLANG_TAG=${LOGIN_TEST_ACCEPTANCE_GOLANG_TAG:-golang:1.24-alpine}
     environment:
-      API_URL: 'http://traefik'
-      API_DOMAIN: 'traefik'
-      PAT_FILE: '/pat/zitadel-admin-sa.pat'
-      LOGIN_URL: 'https://traefik/ui/v2/login'
-      ISSUER: 'https://traefik'
-      HOST: 'traefik'
-      PORT: '8000'
-      SCOPES: 'openid profile email'
+      API_URL: "http://traefik"
+      API_DOMAIN: "traefik"
+      PAT_FILE: "/pat/zitadel-admin-sa.pat"
+      LOGIN_URL: "https://traefik/ui/v2/login"
+      ISSUER: "https://traefik"
+      HOST: "traefik"
+      PORT: "8000"
+      SCOPES: "openid profile email"
     ports:
       - "8000:8000"
     volumes:
@@ -167,11 +166,11 @@ services:
       args:
         - LOGIN_TEST_ACCEPTANCE_GOLANG_TAG=${LOGIN_TEST_ACCEPTANCE_GOLANG_TAG:-golang:1.24-alpine}
     environment:
-      API_URL: 'http://traefik'
-      API_DOMAIN: 'traefik'
-      PAT_FILE: '/pat/zitadel-admin-sa.pat'
-      SCHEMA: 'https'
-      HOST: 'traefik'
+      API_URL: "http://traefik"
+      API_DOMAIN: "traefik"
+      PAT_FILE: "/pat/zitadel-admin-sa.pat"
+      SCHEMA: "https"
+      HOST: "traefik"
       PORT: "8004"
     ports:
       - 8004:8004
@@ -193,13 +192,13 @@ services:
       args:
         - LOGIN_TEST_ACCEPTANCE_GOLANG_TAG=${LOGIN_TEST_ACCEPTANCE_GOLANG_TAG:-golang:1.24-alpine}
     environment:
-      API_URL: 'http://traefik'
-      API_DOMAIN: 'traefik'
-      PAT_FILE: '/pat/zitadel-admin-sa.pat'
-      LOGIN_URL: 'https://traefik/ui/v2/login'
-      IDP_URL: 'http://zitadel:8080/saml/v2/metadata'
-      HOST: 'https://traefik'
-      PORT: '8001'
+      API_URL: "http://traefik"
+      API_DOMAIN: "traefik"
+      PAT_FILE: "/pat/zitadel-admin-sa.pat"
+      LOGIN_URL: "https://traefik/ui/v2/login"
+      IDP_URL: "http://zitadel:8080/saml/v2/metadata"
+      HOST: "https://traefik"
+      PORT: "8001"
     ports:
       - 8001:8001
     volumes:
@@ -220,11 +219,11 @@ services:
       args:
         - LOGIN_TEST_ACCEPTANCE_GOLANG_TAG=${LOGIN_TEST_ACCEPTANCE_GOLANG_TAG:-golang:1.24-alpine}
     environment:
-      API_URL: 'http://traefik:8080'
-      API_DOMAIN: 'traefik'
-      PAT_FILE: '/pat/zitadel-admin-sa.pat'
-      SCHEMA: 'https'
-      HOST: 'traefik'
+      API_URL: "http://traefik:8080"
+      API_DOMAIN: "traefik"
+      PAT_FILE: "/pat/zitadel-admin-sa.pat"
+      SCHEMA: "https"
+      HOST: "traefik"
       PORT: "8003"
     ports:
       - 8003:8003

apps/login/locales/en.json

@@ -22,6 +22,7 @@
   "loginname": {
     "title": "Welcome",
     "description": "Choose your login method:",
+    "deviceAuthNotice": "Sign in to authorize the device and complete the connection.",
     "register": "Create account",
     "submit": "Continue",
     "notRegistered": "Not registered?",
@@ -266,7 +267,8 @@
       "title": "{appName} would like to connect",
       "description": "{appName} will have access to:",
       "disclaimer": "By clicking Allow, you allow {appName} and Zitadel to use your information in accordance with their respective terms of service and privacy policies. You can revoke this access at any time.",
-      "submit": "Allow",
+      "signInNotice": "You'll need to sign in to complete the authorization.",
+      "submit": "Allow & Sign In",
       "deny": "Deny"
     },
     "scope": {

apps/login/src/app/(main)/(boxed)/signedin/page.tsx

@@ -1,6 +1,5 @@
 import { Alert, AlertType } from "@/components/alert";
 import { Button, ButtonVariants } from "@/components/button";
-
 import { Translated } from "@/components/translated";
 import { UserAvatar } from "@/components/user-avatar";
 import {
@@ -59,7 +58,9 @@ export default async function Page(props: { searchParams: Promise<any> }) {
       });
     } catch (err) {
       deviceAuthorizationError =
-        err instanceof Error ? err.message : "Could not complete device authorization";
+        err instanceof Error
+          ? err.message
+          : "Could not complete device authorization";
     }
   }
 

apps/login/src/app/(main)/(illustration)/loginname/page.tsx

@@ -1,3 +1,4 @@
+import { Alert, AlertType } from "@/components/alert";
 import { SignInWithIdp } from "@/components/sign-in-with-idp";
 import { Translated } from "@/components/translated";
 import { UsernameForm } from "@/components/username-form";
@@ -59,6 +60,8 @@ export default async function Page(props: {
 
   const lastUsedIdpId = await getLastUsedIdpId();
 
+  const isDeviceAuth = requestId?.startsWith("device_");
+
   return (
     <>
       <h1>
@@ -68,6 +71,12 @@ export default async function Page(props: {
         <Translated i18nKey="description" namespace="loginname" />
       </p>
 
+      {isDeviceAuth && (
+        <Alert type={AlertType.INFO}>
+          <Translated i18nKey="deviceAuthNotice" namespace="loginname" />
+        </Alert>
+      )}
+
       {loginSettings?.allowUsernamePassword && (
         <>
           <UsernameForm

apps/login/src/components/consent.tsx

@@ -81,6 +81,10 @@ export function ConsentScreen({
         />
       </p>
 
+      <p className="ztdl-p text-xs text-left font-medium">
+        <Translated i18nKey="request.signInNotice" namespace="device" />
+      </p>
+
       {error && (
         <div className="py-4">
           <Alert>{error}</Alert>

config/base/deployment.yaml

@@ -69,4 +69,4 @@ spec:
               scheme: HTTP
       dnsPolicy: ClusterFirst
       restartPolicy: Always
-      terminationGracePeriodSeconds: 30
+      terminationGracePeriodSeconds: 30

config/base/http-route.yaml

@@ -16,5 +16,5 @@ spec:
       backendRefs:
         - name: auth-ui
           kind: Service
-          group: ''
-          port: 3000
+          group: ""
+          port: 3000

config/base/kustomization.yaml

@@ -1,4 +1,4 @@
 resources:
   - deployment.yaml
   - service.yaml
-  - http-route.yaml
+  - http-route.yaml

config/base/service.yaml

@@ -18,4 +18,4 @@ spec:
     app.kubernetes.io/instance: auth-ui
     app.kubernetes.io/name: auth-ui
   sessionAffinity: None
-  type: ClusterIP
+  type: ClusterIP

docker-compose.yml

@@ -2,10 +2,10 @@ services:
   zitadel:
     # The user should have the permission to write to ./machinekey
     user: "${UID:-1000}"
-    restart: 'always'
+    restart: "always"
     networks:
-      - 'zitadel'
-    image: 'ghcr.io/zitadel/zitadel:v3.3.0'
+      - "zitadel"
+    image: "ghcr.io/zitadel/zitadel:v3.3.0"
     command: 'start-from-init --masterkey "MasterkeyNeedsToHave32Characters" --tlsMode disabled'
     environment:
       ZITADEL_DATABASE_POSTGRES_HOST: db
@@ -24,34 +24,34 @@ services:
       ZITADEL_FIRSTINSTANCE_ORG_MACHINE_MACHINEKEY_TYPE: 1
     depends_on:
       db:
-        condition: 'service_healthy'
+        condition: "service_healthy"
     ports:
-      - '8080:8080'
+      - "8080:8080"
     volumes:
       - ./machinekey:/machinekey
 
   db:
-    restart: 'always'
+    restart: "always"
     image: postgres:17-alpine
     environment:
       PGUSER: postgres
       POSTGRES_PASSWORD: postgres
     networks:
-      - 'zitadel'
+      - "zitadel"
     healthcheck:
       test: ["CMD-SHELL", "pg_isready", "-d", "zitadel", "-U", "postgres"]
-      interval: '10s'
-      timeout: '30s'
+      interval: "10s"
+      timeout: "30s"
       retries: 5
-      start_period: '20s'
+      start_period: "20s"
 
   mailhog: # Mailhog is a fake local SMTP server for testing
     image: mailhog/mailhog:latest
     ports:
-      - '1025:1025'
-      - '8025:8025' # Web UI
+      - "1025:1025"
+      - "8025:8025" # Web UI
     networks:
-      - 'zitadel'
+      - "zitadel"
 
 networks:
   zitadel:

packages/zitadel-prettier-config/index.js

@@ -4,8 +4,8 @@ export default {
   useTabs: false,
   semi: true,
   singleQuote: false,
-  trailingComma: 'all',
+  trailingComma: "all",
   bracketSpacing: true,
-  arrowParens: 'always',
-  plugins: ["prettier-plugin-organize-imports"]
+  arrowParens: "always",
+  plugins: ["prettier-plugin-organize-imports"],
 };