feat(console): refresh toggle out of granttype context (#1785)

* refresh toggle * disable if not code flow, lint * lint * fix: change oidc config order * accept refresh option within flow Co-authored-by: Livio Amstutz <livio.a@gmail.com>
2025-03-04 07:05:15 +00:00 · 2021-05-31 09:04:49 +02:00 · 2021-05-31 09:04:49 +02:00 · 1f41cc5ca8
commit 1f41cc5ca8
parent 769fb93506
6 changed files with 301 additions and 221 deletions
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
@ -198,11 +198,21 @@
                </div>

                <div class="content">
+                  <div class="grid">
                    <cnsl-form-field class="formfield" appearance="outline">
                        <cnsl-label>{{ 'APP.OIDC.CLIENTID' | translate }}</cnsl-label>
                        <input cnslInput formControlName="clientId" />
                    </cnsl-form-field>

+                    <cnsl-form-field appearance="outline" class="formfield">
+                      <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
+                      <mat-select formControlName="appType">
+                        <mat-option *ngFor="let type of oidcAppTypes" [value]="type">
+                          {{ 'APP.OIDC.APPTYPE.'+type | translate }}
+                        </mat-option>
+                      </mat-select>
+                    </cnsl-form-field>
+
                    <cnsl-form-field class="formfield" appearance="outline">
                        <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
                        <mat-select formControlName="responseTypesList" multiple>
@ -212,24 +222,6 @@
                        </mat-select>
                    </cnsl-form-field>

-                    <cnsl-form-field class="formfield" appearance="outline">
-                        <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
-                        <mat-select formControlName="grantTypesList" multiple>
-                            <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
-                                {{ 'APP.OIDC.GRANT.'+grant | translate }}
-                            </mat-option>
-                        </mat-select>
-                    </cnsl-form-field>
-
-                    <cnsl-form-field appearance="outline" class="formfield">
-                        <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
-                        <mat-select formControlName="appType">
-                            <mat-option *ngFor="let type of oidcAppTypes" [value]="type">
-                                {{ 'APP.OIDC.APPTYPE.'+type | translate }}
-                            </mat-option>
-                        </mat-select>
-                    </cnsl-form-field>
-
                    <cnsl-form-field appearance="outline" class="formfield">
                        <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
                        <mat-select formControlName="authMethodType">
@ -239,6 +231,21 @@
                        </mat-select>
                    </cnsl-form-field>

+                    <cnsl-form-field class="formfield" appearance="outline">
+                      <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
+                      <mat-select formControlName="grantTypesList" multiple>
+                        <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
+                          {{ 'APP.OIDC.GRANT.'+grant | translate }}
+                        </mat-option>
+                      </mat-select>
+                    </cnsl-form-field>
+
+                    <mat-checkbox color="primary" class="rt"
+                        (change)="toggleRefreshToken($event)" [disabled]="!this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE)" [checked]="this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)">
+                        {{ 'APP.OIDC.REFRESHTOKEN' | translate }}
+                    </mat-checkbox>
+                  </div>
+
                    <div class="divider"></div>

                    <p class="full-width section-title">{{'APP.OIDC.TOKENSECTIONTITLE' | translate}}</p>
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
@ -142,6 +142,17 @@
  flex-wrap: wrap;
  margin: 0 -.5rem;

+  .grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+
+    .rt {
+      margin-top: 2.3rem;
+      margin-left: .5rem;
+    }
+  }
+
  &.nowrap {
    flex-wrap: nowrap;
  }
--- 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
@ -3,6 +3,7 @@ import { Location } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Params, Router } from '@angular/router';
@ -112,6 +113,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  public OIDCAuthMethodType: any = OIDCAuthMethodType;
  public APIAuthMethodType: any = APIAuthMethodType;
  public OIDCTokenType: any = OIDCTokenType;
+  public OIDCGrantType: any = OIDCGrantType;

  public ChangeType: any = ChangeType;

@ -439,6 +441,24 @@ export class AppDetailComponent implements OnInit, OnDestroy {
    }
  }

+  public toggleRefreshToken(event: MatCheckboxChange): void {
+    const c = this.grantTypesList?.value;
+
+    if (event.checked) {
+      if (!c.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)) {
+        this.grantTypesList?.setValue([OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN, ...c]);
+      }
+    } else {
+      const index = (this.grantTypesList?.value as OIDCGrantType[])
+        .findIndex(gt => gt === OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN);
+      if (index > -1) {
+        const copy = Object.assign([], this.grantTypesList?.value);
+        copy.splice(index, 1);
+        this.grantTypesList?.setValue(copy);
+      }
+    }
+  }
+

  public saveOIDCApp(): void {
    this.requestRedirectValuesSubject$.next();
--- a/console/src/app/pages/projects/apps/authmethods.ts
+++ b/console/src/app/pages/projects/apps/authmethods.ts
@ -1,237 +1,277 @@
 import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
 import {
-    APIAuthMethodType,
-    APIConfig,
-    OIDCAuthMethodType,
-    OIDCConfig,
-    OIDCGrantType,
-    OIDCResponseType,
+  APIAuthMethodType,
+  APIConfig,
+  OIDCAuthMethodType,
+  OIDCConfig,
+  OIDCGrantType,
+  OIDCResponseType,
 } from 'src/app/proto/generated/zitadel/app_pb';

 export const CODE_METHOD: RadioItemAuthType = {
-    key: 'CODE',
-    titleI18nKey: 'APP.AUTHMETHODS.CODE.TITLE',
-    descI18nKey: 'APP.AUTHMETHODS.CODE.DESCRIPTION',
-    disabled: false,
-    prefix: 'CODE',
-    background: 'rgb(89 115 128)',
-    responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
-    grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
-    authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
-    recommended: false,
+  key: 'CODE',
+  titleI18nKey: 'APP.AUTHMETHODS.CODE.TITLE',
+  descI18nKey: 'APP.AUTHMETHODS.CODE.DESCRIPTION',
+  disabled: false,
+  prefix: 'CODE',
+  background: 'rgb(89 115 128)',
+  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_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',
-    descI18nKey: 'APP.AUTHMETHODS.PKCE.DESCRIPTION',
-    disabled: false,
-    prefix: 'PKCE',
-    background: 'rgb(80 110 92)',
-    responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
-    grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
-    authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
-    recommended: true,
+  key: 'PKCE',
+  titleI18nKey: 'APP.AUTHMETHODS.PKCE.TITLE',
+  descI18nKey: 'APP.AUTHMETHODS.PKCE.DESCRIPTION',
+  disabled: false,
+  prefix: 'PKCE',
+  background: 'rgb(80 110 92)',
+  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_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',
-    descI18nKey: 'APP.AUTHMETHODS.POST.DESCRIPTION',
-    disabled: false,
-    prefix: 'POST',
-    background: 'rgb(144 75 75)',
-    responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
-    grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
-    authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
-    notRecommended: true,
+  key: 'POST',
+  titleI18nKey: 'APP.AUTHMETHODS.POST.TITLE',
+  descI18nKey: 'APP.AUTHMETHODS.POST.DESCRIPTION',
+  disabled: false,
+  prefix: 'POST',
+  background: 'rgb(144 75 75)',
+  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_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',
-    descI18nKey: 'APP.AUTHMETHODS.PK_JWT.DESCRIPTION',
-    disabled: false,
-    prefix: 'JWT',
-    background: 'rgb(89, 93, 128)',
-    responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_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,
+  key: 'PK_JWT',
+  titleI18nKey: 'APP.AUTHMETHODS.PK_JWT.TITLE',
+  descI18nKey: 'APP.AUTHMETHODS.PK_JWT.DESCRIPTION',
+  disabled: false,
+  prefix: 'JWT',
+  background: 'rgb(89, 93, 128)',
+  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_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',
-    descI18nKey: 'APP.AUTHMETHODS.BASIC.DESCRIPTION',
-    disabled: false,
-    prefix: 'BASIC',
-    background: 'rgb(144 75 75)',
-    responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
-    grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
-    authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
-    apiAuthMethod: APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC,
+  key: 'BASIC',
+  titleI18nKey: 'APP.AUTHMETHODS.BASIC.TITLE',
+  descI18nKey: 'APP.AUTHMETHODS.BASIC.DESCRIPTION',
+  disabled: false,
+  prefix: 'BASIC',
+  background: 'rgb(144 75 75)',
+  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
+  grantType: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE,
+  authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
+  apiAuthMethod: APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC,
 };

 export const IMPLICIT_METHOD: RadioItemAuthType = {
-    key: 'IMPLICIT',
-    titleI18nKey: 'APP.AUTHMETHODS.IMPLICIT.TITLE',
-    descI18nKey: 'APP.AUTHMETHODS.IMPLICIT.DESCRIPTION',
-    disabled: false,
-    prefix: 'IMP',
-    background: 'rgb(144 75 75)',
-    responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN,
-    grantType: OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT,
-    authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
-    notRecommended: true,
+  key: 'IMPLICIT',
+  titleI18nKey: 'APP.AUTHMETHODS.IMPLICIT.TITLE',
+  descI18nKey: 'APP.AUTHMETHODS.IMPLICIT.DESCRIPTION',
+  disabled: false,
+  prefix: 'IMP',
+  background: 'rgb(144 75 75)',
+  responseType: OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN,
+  grantType: OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT,
+  authMethod: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+  notRecommended: true,
 };

 export const CUSTOM_METHOD: RadioItemAuthType = {
-    key: 'CUSTOM',
-    titleI18nKey: 'APP.AUTHMETHODS.CUSTOM.TITLE',
-    descI18nKey: 'APP.AUTHMETHODS.CUSTOM.DESCRIPTION',
-    disabled: false,
-    prefix: 'CUSTOM',
-    background: '#333',
+  key: 'CUSTOM',
+  titleI18nKey: 'APP.AUTHMETHODS.CUSTOM.TITLE',
+  descI18nKey: 'APP.AUTHMETHODS.CUSTOM.DESCRIPTION',
+  disabled: false,
+  prefix: 'CUSTOM',
+  background: '#333',
 };

 export function getPartialConfigFromAuthMethod(authMethod: string): {
-    oidc?: Partial<OIDCConfig.AsObject>;
-    api?: Partial<APIConfig.AsObject>;
+  oidc?: Partial<OIDCConfig.AsObject>;
+  api?: Partial<APIConfig.AsObject>;
 } | undefined {
-    let config: {
-        oidc?: Partial<OIDCConfig.AsObject>,
-        api?: Partial<APIConfig.AsObject>,
-    };
-    switch (authMethod) {
-        case CODE_METHOD.key:
-            config = {
-                oidc: {
-                    responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
-                    grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
-                    authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
-                },
-            };
-            return config;
-        case PKCE_METHOD.key:
-            config = {
-                oidc: {
-                    responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
-                    grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
-                    authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
-                },
-            };
-            return config;
-        case POST_METHOD.key:
-            config = {
-                oidc: {
-                    responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
-                    grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
-                    authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
-                },
-            };
-            return config;
-        case PK_JWT_METHOD.key:
-            config = {
-                oidc: {
-                    responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
-                    grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
-                    authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
-                },
-                api: {
-                    authMethodType: APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
-                },
-            };
-            return config;
-        case BASIC_AUTH_METHOD.key:
-            config = {
-                oidc: {
-                    authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
-                },
-                api: {
-                    authMethodType: APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC,
-                },
-            };
-            return config;
-        case IMPLICIT_METHOD.key:
-            config = {
-                oidc: {
-                    responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN_TOKEN],
-                    grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT],
-                    authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
-                },
-                api: {
-                    authMethodType: APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
-                },
-            };
-            return config;
-        default:
-            return undefined;
-    }
+  let config: {
+    oidc?: Partial<OIDCConfig.AsObject>,
+    api?: Partial<APIConfig.AsObject>,
+  };
+  switch (authMethod) {
+    case CODE_METHOD.key:
+      config = {
+        oidc: {
+          responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+          grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
+          authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
+        },
+      };
+      return config;
+    case PKCE_METHOD.key:
+      config = {
+        oidc: {
+          responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+          grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
+          authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+        },
+      };
+      return config;
+    case POST_METHOD.key:
+      config = {
+        oidc: {
+          responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+          grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
+          authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
+        },
+      };
+      return config;
+    case PK_JWT_METHOD.key:
+      config = {
+        oidc: {
+          responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+          grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
+          authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
+        },
+        api: {
+          authMethodType: APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
+        },
+      };
+      return config;
+    case BASIC_AUTH_METHOD.key:
+      config = {
+        oidc: {
+          authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
+        },
+        api: {
+          authMethodType: APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC,
+        },
+      };
+      return config;
+    case IMPLICIT_METHOD.key:
+      config = {
+        oidc: {
+          responseTypesList: [OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN_TOKEN],
+          grantTypesList: [OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT],
+          authMethodType: OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+        },
+        api: {
+          authMethodType: APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
+        },
+      };
+      return config;
+    default:
+      return undefined;
+  }
 }

 export function getAuthMethodFromPartialConfig(
-    config: {
-        oidc?: Partial<OIDCConfig.AsObject>,
-        api?: Partial<APIConfig.AsObject>,
-    },
+  config: {
+    oidc?: Partial<OIDCConfig.AsObject>,
+    api?: Partial<APIConfig.AsObject>,
+  },
 ): string {
-    if (config?.oidc) {
-        const toCheck = [config.oidc.responseTypesList, config.oidc.grantTypesList, config.oidc.authMethodType];
-        const code = JSON.stringify(
-            [
-                [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
-                [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
-                OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
-            ],
-        );
+  if (config?.oidc) {
+    const toCheck = [config.oidc.responseTypesList, config.oidc.grantTypesList?.sort(), config.oidc.authMethodType];
+    const code = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
+      ],
+    );

-        const pkce = JSON.stringify(
-            [
-                [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
-                [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
-                OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
-            ],
-        );
+    const codeWithRefresh = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN].sort(),
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
+      ],
+    );

-        const post = JSON.stringify(
-            [
-                [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
-                [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
-                OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
-            ],
-        );
+    const pkce = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+      ],
+    );

-        const pkjwt = JSON.stringify(
-            [
-                [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
-                [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
-                OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
-            ],
-        );
+    const pkceWithRefresh = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN].sort(),
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+      ],
+    );

-        const implicit = JSON.stringify(
-            [
-                [OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN_TOKEN],
-                [OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT],
-                OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
-            ],
-        );
+    const post = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
+      ],
+    );

-        switch (JSON.stringify(toCheck)) {
-            case code: return CODE_METHOD.key;
-            case pkce: return PKCE_METHOD.key;
-            case post: return POST_METHOD.key;
-            case pkjwt: return PK_JWT_METHOD.key;
-            case implicit: return IMPLICIT_METHOD.key;
-            default:
-                return CUSTOM_METHOD.key;
-        }
-    } else if (config.api && config.api.authMethodType !== undefined) {
-        switch (config.api.authMethodType.toString()) {
-            case APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT.toString(): return PK_JWT_METHOD.key;
-            case APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC.toString(): return BASIC_AUTH_METHOD.key;
-            default:
-                return CUSTOM_METHOD.key;
-        }
-    } else {
+    const postWithRefresh = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN].sort(),
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
+      ],
+    );
+
+    const pkjwt = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE],
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
+      ],
+    );
+
+    const pkjwtWithRefresh = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN].sort(),
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
+      ],
+    );
+
+    const implicit = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN_TOKEN],
+        [OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT],
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+      ],
+    );
+
+    switch (JSON.stringify(toCheck)) {
+      case code: return CODE_METHOD.key;
+      case codeWithRefresh: return CODE_METHOD.key;
+
+      case pkce: return PKCE_METHOD.key;
+      case pkceWithRefresh: return PKCE_METHOD.key;
+
+      case post: return POST_METHOD.key;
+      case postWithRefresh: return POST_METHOD.key;
+
+      case pkjwt: return PK_JWT_METHOD.key;
+      case pkjwtWithRefresh: return PK_JWT_METHOD.key;
+
+      case implicit: return IMPLICIT_METHOD.key;
+      default:
        return CUSTOM_METHOD.key;
    }
+  } else if (config.api && config.api.authMethodType !== undefined) {
+    switch (config.api.authMethodType.toString()) {
+      case APIAuthMethodType.API_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT.toString(): return PK_JWT_METHOD.key;
+      case APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC.toString(): return BASIC_AUTH_METHOD.key;
+      default:
+        return CUSTOM_METHOD.key;
+    }
+  } else {
+    return CUSTOM_METHOD.key;
+  }
 }
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@ -1106,6 +1106,7 @@
        "1": "ID-Token",
        "2": "Token-ID-Token"
      },
+      "REFRESHTOKEN":"Refresh Token",
      "GRANTTYPE": "Berechtigungstypen",
      "GRANT": {
        "0": "Authorisation Code",
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@ -1107,6 +1107,7 @@
        "1": "ID Token",
        "2": "Token-ID Token"
      },
+      "REFRESHTOKEN":"Refresh Token",
      "GRANTTYPE": "Grant Types",
      "GRANT": {
        "0": "Authorization Code",