feat(console): device code (#5771)

* feat: device code * device code, create stepper * rm logs * app setup with device code * remove redirects if grant type is device code only * add device code app e2e --------- Co-authored-by: Fabi <fabienne.gerschwiler@gmail.com> Co-authored-by: Elio Bischof <elio@zitadel.com>
2025-01-06 13:05:32 +00:00 · 2023-05-11 10:18:14 +02:00 · 2023-05-11 10:18:14 +02:00 · 2dc016ea3b
commit 2dc016ea3b
parent 35a0977663
16 changed files with 212 additions and 46 deletions
--- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.html
+++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.html
@ -30,19 +30,23 @@
      <span class="fill-space"></span>
      <div class="app-specs cnsl-secondary-text">
        <div class="row" *ngIf="isOIDC && method && method.responseType !== undefined">
-          <span>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</span>
+          <span class="row-entry">{{ 'APP.OIDC.RESPONSETYPE' | translate }}</span>
          <span>{{ 'APP.OIDC.RESPONSE.' + method.responseType.toString() | translate }}</span>
        </div>
        <div class="row" *ngIf="isOIDC && method.grantType !== undefined">
-          <span>{{ 'APP.GRANT' | translate }}</span>
-          <span>{{ 'APP.OIDC.GRANT.' + method.grantType.toString() | translate }}</span>
+          <span class="row-entry">{{ 'APP.GRANT' | translate }}</span>
+          <span
+            ><span class="space" *ngFor="let grant of method.grantType">{{
+              'APP.OIDC.GRANT.' + grant.toString() | translate
+            }}</span></span
+          >
        </div>
        <div class="row" *ngIf="isOIDC && method.authMethod !== undefined">
-          <span>{{ 'APP.AUTHMETHOD' | translate }}</span>
+          <span class="row-entry">{{ 'APP.AUTHMETHOD' | translate }}</span>
          <span>{{ 'APP.OIDC.AUTHMETHOD.' + method.authMethod.toString() | translate }}</span>
        </div>
        <div class="row" *ngIf="!isOIDC && method.apiAuthMethod !== undefined">
-          <span>{{ 'APP.AUTHMETHOD' | translate }}</span>
+          <span class="row-entry">{{ 'APP.AUTHMETHOD' | translate }}</span>
          <span>{{ 'APP.API.AUTHMETHOD.' + method.apiAuthMethod.toString() | translate }}</span>
        </div>
      </div>
--- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
+++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
@ -155,7 +155,11 @@
          white-space: nowrap;
        }

-        :first-child {
+        .space {
+          margin-left: 0.5rem;
+        }
+
+        .row-entry {
          margin-right: 1rem;
          overflow: hidden;
          text-overflow: ellipsis;
--- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.ts
+++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.ts
@ -14,7 +14,7 @@ export interface RadioItemAuthType {
  prefix: string;
  background: string;
  responseType?: OIDCResponseType;
-  grantType?: OIDCGrantType;
+  grantType?: OIDCGrantType[];
  authMethod?: OIDCAuthMethodType;
  apiAuthMethod?: APIAuthMethodType;
  recommended?: boolean;
--- a/console/src/app/pages/projects/apps/app-create/app-create.component.html
+++ b/console/src/app/pages/projects/apps/app-create/app-create.component.html
@ -58,13 +58,9 @@
      </form>
    </mat-step>

-    <!-- skip for native OIDC and SAML applications -->
+    <!-- skip for SAML applications -->
    <mat-step
-      *ngIf="
-        (appType?.value?.createType === AppCreateType.OIDC &&
-          appType?.value.oidcAppType !== OIDCAppType.OIDC_APP_TYPE_NATIVE) ||
-        appType?.value?.createType === AppCreateType.API
-      "
+      *ngIf="appType?.value?.createType === AppCreateType.OIDC || appType?.value?.createType === AppCreateType.API"
      [stepControl]="secondFormGroup"
      [editable]="true"
    >
@ -93,9 +89,11 @@
        </div>
      </form>
    </mat-step>
-
    <!-- show redirect step only for OIDC apps -->
-    <mat-step *ngIf="appType?.value?.createType === AppCreateType.OIDC" [editable]="true">
+    <mat-step
+      *ngIf="appType?.value?.createType === AppCreateType.OIDC && authMethod?.value !== 'DEVICECODE'"
+      [editable]="true"
+    >
      <ng-template matStepLabel>{{ 'APP.OIDC.REDIRECTSECTION' | translate }}</ng-template>

      <p class="step-title">{{ 'APP.OIDC.REDIRECTTITLE' | translate }}</p>
@ -431,7 +429,13 @@
        </ng-container>
      </div>

-      <div class="content" *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
+      <div
+        class="content"
+        *ngIf="
+          formappType?.value?.createType === AppCreateType.OIDC &&
+          !(oidcAppRequest.toObject().appType === OIDCAppType.OIDC_APP_TYPE_NATIVE && grantTypesListContainsOnlyDeviceCode)
+        "
+      >
        <div class="formfield full-width">
          <cnsl-redirect-uris
            class="redirect-section"
--- a/console/src/app/pages/projects/apps/app-create/app-create.component.ts
+++ b/console/src/app/pages/projects/apps/app-create/app-create.component.ts
@ -32,6 +32,7 @@ import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog
 import {
  BASIC_AUTH_METHOD,
  CODE_METHOD,
+  DEVICE_CODE_METHOD,
  getPartialConfigFromAuthMethod,
  IMPLICIT_METHOD,
  PKCE_METHOD,
@ -112,6 +113,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
    { type: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, checked: true, disabled: false },
    { type: OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT, checked: false, disabled: true },
    { type: OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN, checked: false, disabled: true },
+    { type: OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE, checked: false, disabled: true },
  ];

  public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
@ -163,7 +165,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {

          switch (this.appType?.value.oidcAppType) {
            case OIDCAppType.OIDC_APP_TYPE_NATIVE:
-              this.authMethods = [PKCE_METHOD];
+              this.authMethods = [PKCE_METHOD, DEVICE_CODE_METHOD];

              // automatically set to PKCE and skip step
              this.oidcAppRequest.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE]);
@ -473,6 +475,13 @@ export class AppCreateComponent implements OnInit, OnDestroy {
    return this.form.get('grantTypesList');
  }

+  get grantTypesListContainsOnlyDeviceCode(): boolean {
+    return (
+      this.oidcAppRequest.toObject().grantTypesList.length === 1 &&
+      this.oidcAppRequest.toObject().grantTypesList[0] === OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE
+    );
+  }
+
  get formappType(): AbstractControl | null {
    return this.form.get('appType');
  }
@ -480,9 +489,6 @@ export class AppCreateComponent implements OnInit, OnDestroy {
  get formMetadataUrl(): AbstractControl | null {
    return this.form.get('metadataUrl');
  }
-  // get formapplicationType(): AbstractControl | null {
-  //     return this.form.get('applicationType');
-  // }

  get authMethodType(): AbstractControl | null {
    return this.form.get('authMethodType');
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
@ -46,6 +46,7 @@ import {
  BASIC_AUTH_METHOD,
  CODE_METHOD,
  CUSTOM_METHOD,
+  DEVICE_CODE_METHOD,
  getAuthMethodFromPartialConfig,
  getPartialConfigFromAuthMethod,
  IMPLICIT_METHOD,
@ -89,6 +90,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  public oidcGrantTypes: OIDCGrantType[] = [
    OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
    OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT,
+    OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE,
    OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN,
  ];
  public oidcAppTypes: OIDCAppType[] = [
@ -274,13 +276,24 @@ export class AppDetailComponent implements OnInit, OnDestroy {
              if (this.app.oidcConfig) {
                this.getAuthMethodOptions('OIDC');

-                this.settingsList = [
-                  { id: 'configuration', i18nKey: 'APP.CONFIGURATION' },
-                  { id: 'token', i18nKey: 'APP.TOKEN' },
-                  { id: 'redirect-uris', i18nKey: 'APP.OIDC.REDIRECTSECTIONTITLE' },
-                  { id: 'additional-origins', i18nKey: 'APP.ADDITIONALORIGINS' },
-                  { id: 'urls', i18nKey: 'APP.URLS' },
-                ];
+                if (
+                  this.app.oidcConfig.grantTypesList.length === 1 &&
+                  this.app.oidcConfig.grantTypesList[0] === OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE
+                ) {
+                  this.settingsList = [
+                    { id: 'configuration', i18nKey: 'APP.CONFIGURATION' },
+                    { id: 'token', i18nKey: 'APP.TOKEN' },
+                    { id: 'urls', i18nKey: 'APP.URLS' },
+                  ];
+                } else {
+                  this.settingsList = [
+                    { id: 'configuration', i18nKey: 'APP.CONFIGURATION' },
+                    { id: 'token', i18nKey: 'APP.TOKEN' },
+                    { id: 'redirect-uris', i18nKey: 'APP.OIDC.REDIRECTSECTIONTITLE' },
+                    { id: 'additional-origins', i18nKey: 'APP.ADDITIONALORIGINS' },
+                    { id: 'urls', i18nKey: 'APP.URLS' },
+                  ];
+                }

                this.initialAuthMethod = this.authMethodFromPartialConfig({ oidc: this.app.oidcConfig });
                this.currentAuthMethod = this.initialAuthMethod;
@ -381,7 +394,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
    if (type === 'OIDC') {
      switch (this.app?.oidcConfig?.appType) {
        case OIDCAppType.OIDC_APP_TYPE_NATIVE:
-          this.authMethods = [PKCE_METHOD, CUSTOM_METHOD];
+          this.authMethods = [PKCE_METHOD, DEVICE_CODE_METHOD, CUSTOM_METHOD];
          break;
        case OIDCAppType.OIDC_APP_TYPE_WEB:
          this.authMethods = [PKCE_METHOD, CODE_METHOD, PK_JWT_METHOD, POST_METHOD];
--- a/console/src/app/pages/projects/apps/authmethods.ts
+++ b/console/src/app/pages/projects/apps/authmethods.ts
@ -16,10 +16,11 @@ export const CODE_METHOD: RadioItemAuthType = {
  prefix: 'CODE',
  background: 'linear-gradient(40deg, rgb(25 105 143) 30%, rgb(23 95 129))',
  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
-  grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
+  grantType: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
  authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
  recommended: false,
 };
+
 export const PKCE_METHOD: RadioItemAuthType = {
  key: 'PKCE',
  titleI18nKey: 'APP.AUTHMETHODS.PKCE.TITLE',
@ -28,10 +29,11 @@ export const PKCE_METHOD: RadioItemAuthType = {
  prefix: 'PKCE',
  background: 'linear-gradient(40deg, #059669 30%, #047857)',
  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
-  grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
+  grantType: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
  authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
  recommended: true,
 };
+
 export const POST_METHOD: RadioItemAuthType = {
  key: 'POST',
  titleI18nKey: 'APP.AUTHMETHODS.POST.TITLE',
@ -40,10 +42,11 @@ export const POST_METHOD: RadioItemAuthType = {
  prefix: 'POST',
  background: 'linear-gradient(40deg, #c53b3b 30%, rgb(169 51 51))',
  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
-  grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
+  grantType: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
  authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
  notRecommended: true,
 };
+
 export const PK_JWT_METHOD: RadioItemAuthType = {
  key: 'PK_JWT',
  titleI18nKey: 'APP.AUTHMETHODS.PK_JWT.TITLE',
@ -52,11 +55,12 @@ export const PK_JWT_METHOD: RadioItemAuthType = {
  prefix: 'JWT',
  background: 'linear-gradient(40deg, rgb(70 77 145) 30%, rgb(58 65 124))',
  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
-  grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
+  grantType: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
  authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
  apiAuthMethod: APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
  // recommended: true,
 };
+
 export const BASIC_AUTH_METHOD: RadioItemAuthType = {
  key: 'BASIC',
  titleI18nKey: 'APP.AUTHMETHODS.BASIC.TITLE',
@ -65,7 +69,7 @@ export const BASIC_AUTH_METHOD: RadioItemAuthType = {
  prefix: 'BASIC',
  background: 'linear-gradient(40deg, #c53b3b 30%, rgb(169 51 51))',
  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
-  grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
+  grantType: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
  authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
  apiAuthMethod: APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC,
 };
@ -78,11 +82,24 @@ export const IMPLICIT_METHOD: RadioItemAuthType = {
  prefix: 'IMP',
  background: 'linear-gradient(40deg, #c53b3b 30%, rgb(169 51 51))',
  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN,
-  grantType: OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT,
+  grantType: [OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT],
  authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
  notRecommended: true,
 };

+export const DEVICE_CODE_METHOD: RadioItemAuthType = {
+  key: 'DEVICECODE',
+  titleI18nKey: 'APP.AUTHMETHODS.DEVICECODE.TITLE',
+  descI18nKey: 'APP.AUTHMETHODS.DEVICECODE.DESCRIPTION',
+  disabled: false,
+  prefix: 'DEVICECODE',
+  background: 'linear-gradient(40deg, rgb(56 189 248) 30%, rgb(14 165 233))',
+  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
+  grantType: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE],
+  authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
+  recommended: false,
+};
+
 export const CUSTOM_METHOD: RadioItemAuthType = {
  key: 'CUSTOM',
  titleI18nKey: 'APP.AUTHMETHODS.CUSTOM.TITLE',
@ -112,6 +129,15 @@ export function getPartialConfigFromAuthMethod(authMethod: string):
        },
      };
      return config;
+    case DEVICE_CODE_METHOD.key:
+      config = {
+        oidc: {
+          responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+          grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE],
+          authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+        },
+      };
+      return config;
    case PKCE_METHOD.key:
      config = {
        oidc: {
@ -211,6 +237,38 @@ export function getAuthMethodFromPartialConfig(config: {
      OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
    ]);

+    const deviceCode = JSON.stringify([
+      [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+      [OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE],
+      OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+    ]);
+
+    const deviceCodeWithCode = JSON.stringify([
+      [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+      [
+        OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
+        OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE,
+        // OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN,
+      ],
+      OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+    ]);
+
+    const deviceCodeWithCodeAndRefresh = JSON.stringify([
+      [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+      [
+        OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
+        OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE,
+        OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN,
+      ],
+      OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+    ]);
+
+    const deviceCodeWithRefresh = JSON.stringify([
+      [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+      [OIDCGrantType.OIDC_GRANT_TYPE_DEVICE_CODE, OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN],
+      OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+    ]);
+
    const pkjwt = JSON.stringify([
      [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
      [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
@ -245,6 +303,15 @@ export function getAuthMethodFromPartialConfig(config: {
      case postWithRefresh:
        return POST_METHOD.key;

+      case deviceCode:
+        return DEVICE_CODE_METHOD.key;
+      case deviceCodeWithCode:
+        return DEVICE_CODE_METHOD.key;
+      case deviceCodeWithRefresh:
+        return DEVICE_CODE_METHOD.key;
+      case deviceCodeWithCodeAndRefresh:
+        return DEVICE_CODE_METHOD.key;
+
      case pkjwt:
        return PK_JWT_METHOD.key;
      case pkjwtWithRefresh:
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@ -1965,7 +1965,8 @@
      "GRANT": {
        "0": "Authorization Code",
        "1": "Implicit",
-        "2": "Refresh Token"
+        "2": "Refresh Token",
+        "3": "Device Code"
      },
      "AUTHMETHOD": {
        "0": "Basic",
@ -2056,6 +2057,10 @@
        "TITLE": "Implicit",
        "DESCRIPTION": "Erhalte die Token direkt vom authorize Endpoint"
      },
+      "DEVICECODE": {
+        "TITLE": "Device Code",
+        "DESCRIPTION": "Autorisieren Sie das Gerät auf einem Computer oder Smartphone."
+      },
      "CUSTOM": {
        "TITLE": "Custom",
        "DESCRIPTION": "Deine Konfiguration entspricht keiner anderen Option."
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@ -1962,7 +1962,8 @@
      "GRANT": {
        "0": "Authorization Code",
        "1": "Implicit",
-        "2": "Refresh Token"
+        "2": "Refresh Token",
+        "3": "Device Code"
      },
      "AUTHMETHOD": {
        "0": "Basic",
@ -2053,6 +2054,10 @@
        "TITLE": "Implicit",
        "DESCRIPTION": "Get the tokens directly from the authorization endpoint"
      },
+      "DEVICECODE": {
+        "TITLE": "Device Code",
+        "DESCRIPTION": "Authorize the device on a computer or smartphone."
+      },
      "CUSTOM": {
        "TITLE": "Custom",
        "DESCRIPTION": "Your setting doesn't correspond to any other option."
--- a/console/src/assets/i18n/es.json
+++ b/console/src/assets/i18n/es.json
@ -1962,7 +1962,8 @@
      "GRANT": {
        "0": "Código de autorización",
        "1": "Implícito",
-        "2": "Token de refresco"
+        "2": "Token de refresco",
+        "3": "Device Code"
      },
      "AUTHMETHOD": {
        "0": "Básico",
@ -2053,6 +2054,10 @@
        "TITLE": "Implícita",
        "DESCRIPTION": "Obtén los tokens directamente del endpoint de autorización"
      },
+      "DEVICECODE": {
+        "TITLE": "Device Code",
+        "DESCRIPTION": "Autorizar el dispositivo en una computadora o teléfono."
+      },
      "CUSTOM": {
        "TITLE": "Personalizada",
        "DESCRIPTION": "Tu configuración no se corresponde con alguna de las otras opciones."
--- a/console/src/assets/i18n/fr.json
+++ b/console/src/assets/i18n/fr.json
@ -1966,7 +1966,8 @@
      "GRANT": {
        "0": "Code d'autorisation",
        "1": "Implicite",
-        "2": "Rafraîchir le jeton"
+        "2": "Rafraîchir le jeton",
+        "3": "Device Code"
      },
      "AUTHMETHOD": {
        "0": "Basic",
@ -2045,6 +2046,10 @@
        "TITLE": "Implicite",
        "DESCRIPTION": "Obtenir les jetons directement à partir du point final d'autorisation"
      },
+      "DEVICECODE": {
+        "TITLE": "Device Code",
+        "DESCRIPTION": "Autoriser l'appareil sur un ordinateur ou un smartphone."
+      },
      "CUSTOM": {
        "TITLE": "Personnalisé",
        "DESCRIPTION": "Votre paramètre ne correspond à aucune autre option."
--- a/console/src/assets/i18n/it.json
+++ b/console/src/assets/i18n/it.json
@ -1967,7 +1967,8 @@
      "GRANT": {
        "0": "Authorization Code",
        "1": "Implicit",
-        "2": "Refresh Token"
+        "2": "Refresh Token",
+        "3": "Device Code"
      },
      "AUTHMETHOD": {
        "0": "Basic",
@ -2058,6 +2059,10 @@
        "TITLE": "Implicit",
        "DESCRIPTION": "Ottenere i token direttamente dall'endpoint di autorizzazione"
      },
+      "DEVICECODE": {
+        "TITLE": "Device Code",
+        "DESCRIPTION": "Autorizza il dispositivo su un computer o uno smartphone."
+      },
      "CUSTOM": {
        "TITLE": "Custom",
        "DESCRIPTION": "La tua impostazione non corrisponde a nessun'altra opzione."
--- a/console/src/assets/i18n/ja.json
+++ b/console/src/assets/i18n/ja.json
@ -1957,7 +1957,8 @@
      "GRANT": {
        "0": "Authorization Code",
        "1": "Implicit",
-        "2": "Refresh Token"
+        "2": "Refresh Token",
+        "3": "Device Code"
      },
      "AUTHMETHOD": {
        "0": "Basic",
@ -2048,6 +2049,10 @@
        "TITLE": "Implicit",
        "DESCRIPTION": "認証エンドポイントから直接トークンを取得します。"
      },
+      "DEVICECODE": {
+        "TITLE": "Device Code",
+        "DESCRIPTION": "コンピューターまたはスマートフォンでデバイスを認証します。"
+      },
      "CUSTOM": {
        "TITLE": "Custom",
        "DESCRIPTION": "設定は他のオプションに対応していません。"
--- a/console/src/assets/i18n/pl.json
+++ b/console/src/assets/i18n/pl.json
@ -1966,7 +1966,8 @@
      "GRANT": {
        "0": "Kod autoryzacyjny",
        "1": "Implicite",
-        "2": "Token odświeżający"
+        "2": "Token odświeżający",
+        "3": "Device Code"
      },
      "AUTHMETHOD": {
        "0": "Podstawowy",
@ -2057,6 +2058,10 @@
        "TITLE": "Implicit",
        "DESCRIPTION": "Pobierz tokeny bezpośrednio z punktu autoryzacyjnego"
      },
+      "DEVICECODE": {
+        "TITLE": "Device Code",
+        "DESCRIPTION": "Autoryzuj urządzenie na komputerze lub smartfonie."
+      },
      "CUSTOM": {
        "TITLE": "Niestandardowy",
        "DESCRIPTION": "Twoje ustawienie nie odpowiada żadnej innej opcji."
--- a/console/src/assets/i18n/zh.json
+++ b/console/src/assets/i18n/zh.json
@ -1965,7 +1965,8 @@
      "GRANT": {
        "0": "Authorization Code",
        "1": "Implicit",
-        "2": "Refresh Token"
+        "2": "Refresh Token",
+        "3": "Device Code"
      },
      "AUTHMETHOD": {
        "0": "Basic",
@ -2044,6 +2045,10 @@
        "TITLE": "Implicit",
        "DESCRIPTION": "直接从授权端点获取令牌"
      },
+      "DEVICECODE": {
+        "TITLE": "Device Code",
+        "DESCRIPTION": "在计算机或智能手机上授权设备。"
+      },
      "CUSTOM": {
        "TITLE": "Custom",
        "DESCRIPTION": "您的设置与任何其他选项都不对应。"
--- a/e2e/cypress/e2e/applications/applications.cy.ts
+++ b/e2e/cypress/e2e/applications/applications.cy.ts
@ -2,7 +2,8 @@ import { Apps, ensureProjectExists, ensureProjectResourceDoesntExist } from '../
 import { Context } from 'support/commands';

 const testProjectName = 'e2eprojectapplication';
-const testAppName = 'e2eappundertest';
+const testPKCEAppName = 'e2eapppkcetest';
+const testDEVICECODEAppName = 'e2eappdevicecodetest';

 describe('applications', () => {
  beforeEach(() => {
@ -17,15 +18,15 @@ describe('applications', () => {
    beforeEach(`ensure it doesn't exist already`, () => {
      cy.get<Context>('@ctx').then((ctx) => {
        cy.get<string>('@projectId').then((projectId) => {
-          ensureProjectResourceDoesntExist(ctx.api, projectId, Apps, testAppName);
+          ensureProjectResourceDoesntExist(ctx.api, projectId, Apps, testPKCEAppName);
          cy.visit(`/projects/${projectId}`);
        });
      });
    });

-    it('add app', () => {
+    it('add web pkce app', () => {
      cy.get('[data-e2e="app-card-add"]').should('be.visible').click();
-      cy.get('[formcontrolname="name"]').focus().type(testAppName);
+      cy.get('[formcontrolname="name"]').focus().type(testPKCEAppName);
      cy.get('[for="WEB"]').click();
      cy.get('[data-e2e="continue-button-nameandtype"]').click();
      cy.get('[for="PKCE"]').should('be.visible').click();
@ -43,6 +44,33 @@ describe('applications', () => {
    });
  });

+  describe('add native device code app', () => {
+    beforeEach(`ensure it doesn't exist already`, () => {
+      cy.get<Context>('@ctx').then((ctx) => {
+        cy.get<string>('@projectId').then((projectId) => {
+          ensureProjectResourceDoesntExist(ctx.api, projectId, Apps, testDEVICECODEAppName);
+          cy.visit(`/projects/${projectId}`);
+        });
+      });
+    });
+
+    it('add device code app', () => {
+      cy.get('[data-e2e="app-card-add"]').should('be.visible').click();
+      cy.get('[formcontrolname="name"]').focus().type(testDEVICECODEAppName);
+      cy.get('[for="N"]').click();
+      cy.get('[data-e2e="continue-button-nameandtype"]').click();
+      cy.get('[for="DEVICECODE"]').should('be.visible').click();
+      cy.get('[data-e2e="continue-button-authmethod"]').click();
+      cy.get('[data-e2e="create-button"]').click();
+      cy.get('[id*=overlay]').should('exist');
+      cy.shouldConfirmSuccess();
+      const expectClientId = new RegExp(`^.*[0-9]+\\@${testProjectName}.*$`);
+      cy.get('[data-e2e="client-id-copy"]').click();
+      cy.contains('[data-e2e="client-id"]', expectClientId);
+      cy.clipboardMatches(expectClientId);
+    });
+  });
+
  describe('edit app', () => {
    it('should configure an application to enable dev mode');
    it('should configure an application to put user roles and info inside id token');