From bbb89bf98a52ad9a18a464b6d4a8e4ff6a6c51b6 Mon Sep 17 00:00:00 2001
From: Mateusz <76775507+szczygiel-m@users.noreply.github.com>
Date: Fri, 18 Aug 2023 12:30:22 +0200
Subject: [PATCH] Feature/auth (#1707)

Added auth to hermes console
---
 hermes-console-vue/json-server/db.json        |   4 +-
 hermes-console-vue/package.json               |   4 +
 hermes-console-vue/src/App.vue                |  28 ++--
 .../src/api/access-token-response.ts          |   3 +
 .../src/api/app-configuration.ts              |   2 +
 .../src/api/hermes-client/index.ts            |  25 ++++
 .../console-header/ConsoleHeader.spec.ts      | 130 +++++++++++++++++-
 .../console-header/ConsoleHeader.vue          |  38 ++++-
 hermes-console-vue/src/dummy/app-config.ts    |   6 +-
 hermes-console-vue/src/dummy/store.ts         |  13 +-
 hermes-console-vue/src/i18n/en-US.ts          |   4 +
 hermes-console-vue/src/main.ts                |   3 +
 hermes-console-vue/src/mocks/handlers.ts      |  10 ++
 hermes-console-vue/src/router/index.ts        |  31 +++--
 .../src/store/{ => app-config}/types.ts       |   0
 .../src/store/app-config/useAppConfigStore.ts |   8 +-
 hermes-console-vue/src/store/auth/types.ts    |  10 ++
 .../src/store/auth/useAuthStore.spec.ts       |  65 +++++++++
 .../src/store/auth/useAuthStore.ts            |  90 ++++++++++++
 hermes-console-vue/src/utils/jwt-utils.ts     |   4 +
 .../consumer-groups/ConsumerGroupsView.vue    |   8 +-
 .../views/group-topics/GroupTopicsView.vue    |   4 +-
 .../GroupTopicsListing.vue                    |   4 +-
 .../src/views/groups/GroupsView.vue           |   2 +-
 .../groups/group-listing/GroupListing.vue     |   2 +-
 .../src/views/home/HomeView.spec.ts           |   4 +-
 .../src/views/home/HomeView.vue               |  16 +--
 .../src/views/redirect/RedirectView.spec.ts   |  42 ++++++
 .../src/views/redirect/RedirectView.vue       |  23 ++++
 .../views/subscription/SubscriptionView.vue   |   6 +-
 .../src/views/topic/TopicView.spec.ts         |   2 +-
 .../src/views/topic/TopicView.vue             |   6 +-
 hermes-console-vue/yarn.lock                  |  39 ++++++
 .../config/console/ConsoleProperties.java     |  20 ++-
 34 files changed, 598 insertions(+), 58 deletions(-)
 create mode 100644 hermes-console-vue/src/api/access-token-response.ts
 rename hermes-console-vue/src/store/{ => app-config}/types.ts (100%)
 create mode 100644 hermes-console-vue/src/store/auth/types.ts
 create mode 100644 hermes-console-vue/src/store/auth/useAuthStore.spec.ts
 create mode 100644 hermes-console-vue/src/store/auth/useAuthStore.ts
 create mode 100644 hermes-console-vue/src/utils/jwt-utils.ts
 create mode 100644 hermes-console-vue/src/views/redirect/RedirectView.spec.ts
 create mode 100644 hermes-console-vue/src/views/redirect/RedirectView.vue

diff --git a/hermes-console-vue/json-server/db.json b/hermes-console-vue/json-server/db.json
index f5ddfc6a36..9d2f84c417 100644
--- a/hermes-console-vue/json-server/db.json
+++ b/hermes-console-vue/json-server/db.json
@@ -466,7 +466,9 @@
     "auth": {
       "oauth": {
         "enabled": false,
-        "url": "localhost:8092/auth",
+        "url": "localhost:8092",
+        "authorizationEndpoint": "/auth/oauth/authorize",
+        "tokenEndpoint": "/auth/oauth/token",
         "clientId": "hermes",
         "scope": "hermes"
       },
diff --git a/hermes-console-vue/package.json b/hermes-console-vue/package.json
index c92657b99c..72e4abb85d 100644
--- a/hermes-console-vue/package.json
+++ b/hermes-console-vue/package.json
@@ -18,7 +18,11 @@
   },
   "dependencies": {
     "axios": "1.4.0",
+    "base64-arraybuffer": "1.0.2",
+    "jwt-decode": "3.1.2",
     "pinia": "2.1.4",
+    "pinia-plugin-persistedstate": "3.2.0",
+    "query-string": "8.1.0",
     "vue": "3.3.4",
     "vue-i18n": "9.2.2",
     "vue-router": "4.2.2",
diff --git a/hermes-console-vue/src/App.vue b/hermes-console-vue/src/App.vue
index de7bb6d33a..06c6eb61d2 100644
--- a/hermes-console-vue/src/App.vue
+++ b/hermes-console-vue/src/App.vue
@@ -1,25 +1,29 @@
-<template>
-  <v-app class="fill-height">
-    <console-header />
-
-    <v-main class="main">
-      <RouterView />
-    </v-main>
-
-    <console-footer />
-  </v-app>
-</template>
-
 <script setup lang="ts">
   import { RouterView } from 'vue-router';
   import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
   import ConsoleFooter from '@/components/console-footer/ConsoleFooter.vue';
   import ConsoleHeader from '@/components/console-header/ConsoleHeader.vue';
+  import LoadingSpinner from '@/components/loading-spinner/LoadingSpinner.vue';
 
   const configStore = useAppConfigStore();
   configStore.loadConfig();
 </script>
 
+<template>
+  <v-app class="fill-height">
+    <div v-if="configStore.appConfig">
+      <console-header />
+
+      <v-main class="main">
+        <RouterView />
+      </v-main>
+
+      <console-footer />
+    </div>
+    <loading-spinner v-else />
+  </v-app>
+</template>
+
 <style scoped lang="scss">
   .main {
     margin: 0 auto;
diff --git a/hermes-console-vue/src/api/access-token-response.ts b/hermes-console-vue/src/api/access-token-response.ts
new file mode 100644
index 0000000000..2e88f49f49
--- /dev/null
+++ b/hermes-console-vue/src/api/access-token-response.ts
@@ -0,0 +1,3 @@
+export interface AccessTokenResponse {
+  access_token: string;
+}
diff --git a/hermes-console-vue/src/api/app-configuration.ts b/hermes-console-vue/src/api/app-configuration.ts
index 9064ec342d..eb1a1da5d7 100644
--- a/hermes-console-vue/src/api/app-configuration.ts
+++ b/hermes-console-vue/src/api/app-configuration.ts
@@ -54,6 +54,8 @@ export interface AuthConfiguration {
 export interface OAuthConfiguration {
   enabled: boolean;
   url: string;
+  authorizationEndpoint: string;
+  tokenEndpoint: string;
   clientId: string;
   scope: string;
 }
diff --git a/hermes-console-vue/src/api/hermes-client/index.ts b/hermes-console-vue/src/api/hermes-client/index.ts
index 86314beb15..4801ed2217 100644
--- a/hermes-console-vue/src/api/hermes-client/index.ts
+++ b/hermes-console-vue/src/api/hermes-client/index.ts
@@ -1,5 +1,8 @@
 import axios from 'axios';
+import qs from 'query-string';
+import type { AccessTokenResponse } from '@/api/access-token-response';
 import type { AppConfiguration } from '@/api/app-configuration';
+import type { AxiosRequestConfig } from 'axios';
 import type { ConstraintsConfig } from '@/api/constraints';
 import type { ConsumerGroup } from '@/api/consumer-group';
 import type { DatacenterReadiness } from '@/api/datacenter-readiness';
@@ -96,3 +99,25 @@ export function fetchGroupNames(): ResponsePromise<string[]> {
 export function fetchStats(): ResponsePromise<Stats> {
   return axios.get<Stats>(`/stats`);
 }
+
+export function fetchToken(
+  code: string,
+  url: string,
+  clientId: string,
+  redirectUri: string,
+  codeVerifier: string,
+): ResponsePromise<AccessTokenResponse> {
+  return axios.post<AccessTokenResponse>(
+    url,
+    qs.stringify({
+      client_id: clientId,
+      code: code,
+      redirect_uri: redirectUri,
+      grant_type: 'authorization_code',
+      code_verifier: codeVerifier,
+    }),
+    {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    } as AxiosRequestConfig,
+  );
+}
diff --git a/hermes-console-vue/src/components/console-header/ConsoleHeader.spec.ts b/hermes-console-vue/src/components/console-header/ConsoleHeader.spec.ts
index 84faca3f2d..9a6611dffd 100644
--- a/hermes-console-vue/src/components/console-header/ConsoleHeader.spec.ts
+++ b/hermes-console-vue/src/components/console-header/ConsoleHeader.spec.ts
@@ -1,14 +1,21 @@
-import { appConfigStoreState } from '@/dummy/store';
+import {
+  appConfigStoreState,
+  authStoreState,
+  createTestingPiniaWithState,
+} from '@/dummy/store';
 import { createTestingPinia } from '@pinia/testing';
 import { dummyAppConfig } from '@/dummy/app-config';
 import { expect } from 'vitest';
+import { expiredToken, validToken } from '@/utils/jwt-utils';
 import { render } from '@/utils/test-utils';
 import ConsoleHeader from '@/components/console-header/ConsoleHeader.vue';
 
 describe('ConsoleHeader', () => {
   it('renders properly', () => {
     // when
-    const { getByRole } = render(ConsoleHeader);
+    const { getByRole } = render(ConsoleHeader, {
+      testPinia: createTestingPiniaWithState(),
+    });
 
     // then
     expect(getByRole('img')).toHaveAttribute('alt', 'Hermes');
@@ -36,4 +43,123 @@ describe('ConsoleHeader', () => {
     // then
     expect(getByText('TEST ENV')).toBeVisible();
   });
+
+  it('should display login button', () => {
+    // when
+    const { getByText } = render(ConsoleHeader, {
+      testPinia: createTestingPinia({
+        initialState: {
+          appConfig: {
+            ...appConfigStoreState,
+            appConfig: {
+              ...dummyAppConfig,
+              auth: {
+                ...dummyAppConfig.auth,
+                oauth: {
+                  ...dummyAppConfig.auth.oauth,
+                  enabled: true,
+                },
+              },
+            },
+          },
+          auth: {
+            ...authStoreState,
+          },
+        },
+      }),
+    });
+
+    // then
+    expect(getByText('header.signIn')).toBeVisible();
+  });
+
+  it('should not display login button when auth is disabled', () => {
+    // when
+    const { queryByText } = render(ConsoleHeader, {
+      testPinia: createTestingPinia({
+        initialState: {
+          appConfig: {
+            ...appConfigStoreState,
+            appConfig: {
+              ...dummyAppConfig,
+              auth: {
+                ...dummyAppConfig.auth,
+                oauth: {
+                  ...dummyAppConfig.auth.oauth,
+                  enabled: false,
+                },
+              },
+            },
+          },
+          auth: {
+            ...authStoreState,
+          },
+        },
+      }),
+    });
+
+    // then
+    expect(queryByText('header.signIn')).not.toBeInTheDocument();
+    expect(queryByText('header.signout')).not.toBeInTheDocument();
+  });
+
+  it('should display logout button if token is valid', () => {
+    // when
+    const { getByText } = render(ConsoleHeader, {
+      testPinia: createTestingPinia({
+        initialState: {
+          appConfig: {
+            ...appConfigStoreState,
+            appConfig: {
+              ...dummyAppConfig,
+              auth: {
+                ...dummyAppConfig.auth,
+                oauth: {
+                  ...dummyAppConfig.auth.oauth,
+                  enabled: true,
+                },
+              },
+            },
+          },
+          auth: {
+            ...authStoreState,
+            accessToken: validToken,
+          },
+        },
+      }),
+    });
+
+    // then
+    expect(getByText('header.logout')).toBeVisible();
+  });
+
+  it('should display login button if token expired', () => {
+    // when
+    const { getByText } = render(ConsoleHeader, {
+      testPinia: createTestingPinia({
+        initialState: {
+          appConfig: {
+            ...appConfigStoreState,
+            appConfig: {
+              ...dummyAppConfig,
+              auth: {
+                ...dummyAppConfig.auth,
+                oauth: {
+                  ...dummyAppConfig.auth.oauth,
+                  enabled: true,
+                },
+              },
+            },
+          },
+          auth: {
+            ...authStoreState,
+            accessToken: expiredToken,
+          },
+        },
+      }),
+    });
+
+    // then
+    expect(getByText('header.signIn')).toBeVisible();
+  });
 });
diff --git a/hermes-console-vue/src/components/console-header/ConsoleHeader.vue b/hermes-console-vue/src/components/console-header/ConsoleHeader.vue
index fbab94745d..688eb66f83 100644
--- a/hermes-console-vue/src/components/console-header/ConsoleHeader.vue
+++ b/hermes-console-vue/src/components/console-header/ConsoleHeader.vue
@@ -1,11 +1,27 @@
 <script setup lang="ts">
+  import { computed } from 'vue';
   import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
+  import { useAuthStore } from '@/store/auth/useAuthStore';
+  import { useI18n } from 'vue-i18n';
   import { useTheme } from 'vuetify';
   import EnvironmentBadge from '@/components/environment-badge/EnviromentBadge.vue';
   import ThemeSwitch from '@/components/theme-switch/ThemeSwitch.vue';
 
+  const { t } = useI18n();
+
   const theme = useTheme();
   const configStore = useAppConfigStore();
+  const authStore = useAuthStore();
+
+  const isLoggedIn = computed(() => authStore.isUserAuthorized);
+
+  function logIn() {
+    authStore.login(window.location.pathname);
+  }
+
+  function logout() {
+    authStore.logout();
+  }
 </script>
 
 <template>
@@ -13,7 +29,7 @@
     <div class="header">
       <!-- TODO: navigate to home -->
       <div class="header-left">
-        <router-link to="/" custom v-slot="{ navigate }">
+        <router-link to="/ui" custom v-slot="{ navigate }">
           <img
             @click="navigate"
             v-if="!theme.current.value.dark"
@@ -38,7 +54,25 @@
           "
         />
       </div>
-      <theme-switch />
+      <div>
+        <theme-switch />
+        <v-btn
+          v-if="configStore.loadedConfig.auth.oauth.enabled && !isLoggedIn"
+          color="primary"
+          variant="tonal"
+          @click="logIn()"
+        >
+          {{ t('header.signIn') }}
+        </v-btn>
+        <v-btn
+          v-if="configStore.loadedConfig.auth.oauth.enabled && isLoggedIn"
+          variant="tonal"
+          color="primary"
+          @click="logout"
+        >
+          {{ t('header.logout') }}
+        </v-btn>
+      </div>
     </div>
   </v-app-bar>
 </template>
diff --git a/hermes-console-vue/src/dummy/app-config.ts b/hermes-console-vue/src/dummy/app-config.ts
index dc6a6f59bf..d97bcaffc5 100644
--- a/hermes-console-vue/src/dummy/app-config.ts
+++ b/hermes-console-vue/src/dummy/app-config.ts
@@ -29,8 +29,10 @@ export const dummyAppConfig: AppConfiguration = {
   auth: {
     oauth: {
       enabled: false,
-      url: '',
-      clientId: '',
+      url: 'http://localhost:8080',
+      authorizationEndpoint: '/authorization',
+      tokenEndpoint: '/token',
+      clientId: 'hermes',
       scope: '',
     },
     headers: {
diff --git a/hermes-console-vue/src/dummy/store.ts b/hermes-console-vue/src/dummy/store.ts
index cd05fbceae..0129270e67 100644
--- a/hermes-console-vue/src/dummy/store.ts
+++ b/hermes-console-vue/src/dummy/store.ts
@@ -1,6 +1,7 @@
 import { createTestingPinia } from '@pinia/testing';
 import { dummyAppConfig } from '@/dummy/app-config';
-import type { AppConfigStoreState } from '@/store/types';
+import type { AppConfigStoreState } from '@/store/app-config/types';
+import type { AuthStoreState } from '@/store/auth/types';
 
 export const appConfigStoreState: AppConfigStoreState = {
   appConfig: dummyAppConfig,
@@ -10,8 +11,18 @@ export const appConfigStoreState: AppConfigStoreState = {
   },
 };
 
+export const authStoreState: AuthStoreState = {
+  accessToken: '',
+  codeVerifier: '',
+  loading: false,
+  error: {
+    loadAuth: null,
+  },
+};
+
 export const dummyStoresState = {
   appConfig: appConfigStoreState,
+  auth: authStoreState,
 };
 
 export const createTestingPiniaWithState = () =>
diff --git a/hermes-console-vue/src/i18n/en-US.ts b/hermes-console-vue/src/i18n/en-US.ts
index f1650eeda5..ff00efcfdc 100644
--- a/hermes-console-vue/src/i18n/en-US.ts
+++ b/hermes-console-vue/src/i18n/en-US.ts
@@ -9,6 +9,10 @@ const en_US = {
       adminTools: 'Admin tools',
     },
   },
+  header: {
+    signIn: 'Sign in',
+    logout: 'Logout',
+  },
   consistency: {
     connectionError: {
       title: 'Connection error',
diff --git a/hermes-console-vue/src/main.ts b/hermes-console-vue/src/main.ts
index e5bb01ab7f..346d0c32df 100644
--- a/hermes-console-vue/src/main.ts
+++ b/hermes-console-vue/src/main.ts
@@ -9,6 +9,7 @@ import { createVuetify } from 'vuetify';
 import App from './App.vue';
 import axios from 'axios';
 import messages from '@/i18n/messages';
+import piniaPluginPersistedState from 'pinia-plugin-persistedstate';
 import router from './router';
 
 if (import.meta.env.DEV) {
@@ -56,6 +57,8 @@ const i18n = createI18n({
 
 const store = createPinia();
 
+store.use(piniaPluginPersistedState);
+
 const app = createApp(App);
 
 app.use(vuetify);
diff --git a/hermes-console-vue/src/mocks/handlers.ts b/hermes-console-vue/src/mocks/handlers.ts
index 3fc321c289..80756e7181 100644
--- a/hermes-console-vue/src/mocks/handlers.ts
+++ b/hermes-console-vue/src/mocks/handlers.ts
@@ -10,6 +10,7 @@ import {
   dummyTopicOwner,
 } from '@/dummy/topic';
 import { rest } from 'msw';
+import type { AccessTokenResponse } from '@/api/access-token-response';
 import type { ConstraintsConfig } from '@/api/constraints';
 import type { ConsumerGroup } from '@/api/consumer-group';
 import type { DatacenterReadiness } from '@/api/datacenter-readiness';
@@ -311,3 +312,12 @@ export const fetchStatsErrorHandler = ({
   rest.get(`${url}/stats`, (req, res, ctx) => {
     return res(ctx.status(errorCode), ctx.json(undefined));
   });
+
+export const fetchTokenHandler = ({
+  accessToken,
+}: {
+  accessToken: AccessTokenResponse;
+}) =>
+  rest.post(`http://localhost:8080/token`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(accessToken));
+  });
diff --git a/hermes-console-vue/src/router/index.ts b/hermes-console-vue/src/router/index.ts
index a87d9cda0a..f08a8fb279 100644
--- a/hermes-console-vue/src/router/index.ts
+++ b/hermes-console-vue/src/router/index.ts
@@ -1,59 +1,68 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
-  history: createWebHashHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
+      redirect: () => '/ui',
+    },
+    {
+      path: '/ui',
       name: 'home',
       component: () => import('@/views/home/HomeView.vue'),
     },
     {
-      path: '/groups',
+      path: '/ui/groups',
       name: 'groups',
       component: () => import('@/views/groups/GroupsView.vue'),
     },
     {
-      path: '/groups/:groupId',
+      path: '/ui/groups/:groupId',
       name: 'groupTopics',
       component: () => import('@/views/group-topics/GroupTopicsView.vue'),
     },
     {
-      path: '/groups/:groupId/topics/:topicName',
+      path: '/ui/groups/:groupId/topics/:topicName',
       name: 'topic',
       component: () => import('@/views/topic/TopicView.vue'),
     },
     {
-      path: '/groups/:groupId/topics/:topicId/subscriptions/:subscriptionId',
+      path: '/ui/groups/:groupId/topics/:topicId/subscriptions/:subscriptionId',
       name: 'subscription',
       component: () => import('@/views/subscription/SubscriptionView.vue'),
     },
     {
-      path: '/readiness/',
+      path: '/ui/readiness',
       name: 'readiness',
       component: () => import('@/views/admin/readiness/ReadinessView.vue'),
     },
     {
-      path: '/constraints/',
+      path: '/ui/constraints',
       name: 'constraints',
       component: () => import('@/views/admin/constraints/ConstraintsView.vue'),
     },
     {
-      path: '/consistency/',
+      path: '/ui/consistency',
       name: 'consistency',
       component: () => import('@/views/admin/consistency/ConsistencyView.vue'),
     },
     {
-      path: '/groups/:groupId/topics/:topicId/subscriptions/:subscriptionId/diagnostics/',
+      path: '/ui/groups/:groupId/topics/:topicId/subscriptions/:subscriptionId/diagnostics/',
       name: 'consumerGroups',
       component: () =>
         import('@/views/admin/consumer-groups/ConsumerGroupsView.vue'),
     },
     {
-      path: '/stats/',
+      path: '/ui/stats',
       name: 'stats',
       component: () => import('@/views/stats/StatsView.vue'),
     },
+    {
+      path: '/ui/redirect',
+      name: 'redirect',
+      component: () => import('@/views/redirect/RedirectView.vue'),
+    },
   ],
 });
 
diff --git a/hermes-console-vue/src/store/types.ts b/hermes-console-vue/src/store/app-config/types.ts
similarity index 100%
rename from hermes-console-vue/src/store/types.ts
rename to hermes-console-vue/src/store/app-config/types.ts
diff --git a/hermes-console-vue/src/store/app-config/useAppConfigStore.ts b/hermes-console-vue/src/store/app-config/useAppConfigStore.ts
index d4cece8e5f..722b27b598 100644
--- a/hermes-console-vue/src/store/app-config/useAppConfigStore.ts
+++ b/hermes-console-vue/src/store/app-config/useAppConfigStore.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { fetchAppConfiguration } from '@/api/hermes-client';
-import type { AppConfigStoreState } from '@/store/types';
+import type { AppConfigStoreState } from '@/store/app-config/types';
+import type { AppConfiguration } from '@/api/app-configuration';
 
 export const useAppConfigStore = defineStore('appConfig', {
   state: (): AppConfigStoreState => {
@@ -24,4 +25,9 @@ export const useAppConfigStore = defineStore('appConfig', {
       }
     },
   },
+  getters: {
+    loadedConfig(state: AppConfigStoreState): AppConfiguration {
+      return state.appConfig!!;
+    },
+  },
 });
diff --git a/hermes-console-vue/src/store/auth/types.ts b/hermes-console-vue/src/store/auth/types.ts
new file mode 100644
index 0000000000..d393aefdf9
--- /dev/null
+++ b/hermes-console-vue/src/store/auth/types.ts
@@ -0,0 +1,10 @@
+export interface AuthStoreState {
+  accessToken: string | null;
+  codeVerifier: string | null;
+  loading: boolean;
+  error: AuthStoreErrors;
+}
+
+export interface AuthStoreErrors {
+  loadAuth: Error | null;
+}
diff --git a/hermes-console-vue/src/store/auth/useAuthStore.spec.ts b/hermes-console-vue/src/store/auth/useAuthStore.spec.ts
new file mode 100644
index 0000000000..0844b0bcf2
--- /dev/null
+++ b/hermes-console-vue/src/store/auth/useAuthStore.spec.ts
@@ -0,0 +1,65 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { dummyAppConfig } from '@/dummy/app-config';
+import { expect } from 'vitest';
+import { fetchTokenHandler } from '@/mocks/handlers';
+import { setupServer } from 'msw/node';
+import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
+import { useAuthStore } from '@/store/auth/useAuthStore';
+import { validToken } from '@/utils/jwt-utils';
+
+describe('useGroups', () => {
+  const server = setupServer();
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('should initialize', async () => {
+    // when
+    const authStore = useAuthStore();
+
+    // then
+    expect(authStore.accessToken).toBeNull();
+    expect(authStore.codeVerifier).toBeNull();
+    expect(authStore.loading).toBeFalsy();
+    expect(authStore.error.loadAuth).toBeNull();
+    expect(authStore.isUserAuthorized).toBeFalsy();
+  });
+
+  it('should generate codeVerifier', async () => {
+    //given
+    const authStore = useAuthStore();
+
+    // when
+    const promise = authStore.login('/');
+
+    // then
+    expect(authStore.loading).toBeTruthy();
+
+    // when
+    await promise;
+
+    // then
+    expect(authStore.loading).toBeFalsy();
+    expect(authStore.codeVerifier).not.toBeNull();
+  });
+
+  it('should exchange code for token', async () => {
+    //given
+    server.use(
+      fetchTokenHandler({ accessToken: { access_token: validToken } }),
+    );
+    server.listen();
+    const configStore = useAppConfigStore();
+    configStore.appConfig = dummyAppConfig;
+    const authStore = useAuthStore();
+
+    // when
+    await authStore.exchangeCodeForTokenWithPKCE('codeXYZ');
+
+    // then
+    expect(authStore.accessToken).toBe(validToken);
+    expect(authStore.codeVerifier).toBeNull();
+    expect(authStore.isUserAuthorized).toBeTruthy();
+  });
+});
diff --git a/hermes-console-vue/src/store/auth/useAuthStore.ts b/hermes-console-vue/src/store/auth/useAuthStore.ts
new file mode 100644
index 0000000000..43fa7da20f
--- /dev/null
+++ b/hermes-console-vue/src/store/auth/useAuthStore.ts
@@ -0,0 +1,90 @@
+import { encode as base64encode } from 'base64-arraybuffer';
+import { defineStore } from 'pinia';
+import { fetchToken } from '@/api/hermes-client';
+import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
+import axios from 'axios';
+import decode from 'jwt-decode';
+import qs from 'query-string';
+import type { AuthStoreState } from '@/store/auth/types';
+
+export const useAuthStore = defineStore('auth', {
+  state: (): AuthStoreState => {
+    return {
+      accessToken: null,
+      codeVerifier: null,
+      loading: false,
+      error: {
+        loadAuth: null,
+      },
+    };
+  },
+  actions: {
+    async exchangeCodeForTokenWithPKCE(code: string): Promise<void> {
+      const configStore = useAppConfigStore();
+      return fetchToken(
+        code,
+        `${configStore.loadedConfig.auth.oauth.url}${configStore.loadedConfig.auth.oauth.tokenEndpoint}`,
+        configStore.loadedConfig.auth.oauth.clientId,
+        this.getRedirectUri(),
+        this.codeVerifier!!,
+      )
+        .then((response) => {
+          this.accessToken = response.data.access_token;
+          axios.interceptors.request.use(function (config) {
+            config.headers.Authorization = `Bearer ${response.data.access_token}`;
+            return config;
+          });
+        })
+        .finally(() => (this.codeVerifier = null));
+    },
+    async getAuthorizationCodeWithPKCE(pathname: string): Promise<void> {
+      const configStore = useAppConfigStore();
+      this.codeVerifier = window.crypto.randomUUID();
+      const queryParams = qs.stringify({
+        client_id: configStore.loadedConfig.auth.oauth.clientId,
+        redirect_uri: this.getRedirectUri(),
+        response_type: 'code',
+        code_challenge_method: 'S256',
+        code_challenge: await this.generateCodeChallange(this.codeVerifier),
+        state: pathname,
+      });
+      window.location.href = `${configStore.loadedConfig.auth.oauth.url}${configStore.loadedConfig.auth.oauth.authorizationEndpoint}?${queryParams}`;
+    },
+    async generateCodeChallange(codeVerifier: string): Promise<string> {
+      const encoder = new TextEncoder();
+      const data = encoder.encode(codeVerifier);
+      const digest = await window.crypto.subtle.digest('SHA-256', data);
+      const base64Digest = base64encode(digest);
+      return base64Digest
+        .replace(/\+/g, '-')
+        .replace(/\//g, '_')
+        .replace(/=/g, '');
+    },
+    getRedirectUri(): string {
+      return `${window.location.origin}/ui/redirect`;
+    },
+    logout() {
+      this.accessToken = null;
+    },
+    async login(path: string): Promise<void> {
+      try {
+        this.loading = true;
+        await this.getAuthorizationCodeWithPKCE(path);
+      } catch (e) {
+        this.error.loadAuth = e as Error;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  getters: {
+    userData(state: AuthStoreState): { exp: number } {
+      return state.accessToken ? decode(state.accessToken) : { exp: 0 };
+    },
+    isUserAuthorized(state: AuthStoreState): boolean {
+      const expiresAt = this.userData.exp * 1000;
+      return state.accessToken !== null && expiresAt >= Date.now();
+    },
+  },
+  persist: true,
+});
diff --git a/hermes-console-vue/src/utils/jwt-utils.ts b/hermes-console-vue/src/utils/jwt-utils.ts
new file mode 100644
index 0000000000..b5d85b5f79
--- /dev/null
+++ b/hermes-console-vue/src/utils/jwt-utils.ts
@@ -0,0 +1,4 @@
+export const validToken: string =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxOTk2MjM5MDIyfQ.3CP-EemSMKu8O2cZNJCAT4PUCiolDcHIx3Du7EpR8EY';
+export const expiredToken: string =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxOTYyMzkwMjJ9.dqPw8DoRNgDoV68oprIwJG6546VccGfnoPgyMOGT8yQ';
diff --git a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue
index 0ff82c04cb..1da2a768ce 100644
--- a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue
+++ b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue
@@ -24,19 +24,19 @@
     },
     {
       title: t('consumerGroups.breadcrumbs.groups'),
-      href: '/#/groups',
+      href: '/ui/groups',
     },
     {
       title: groupId,
-      href: `/#/groups/${groupId}`,
+      href: `/ui/groups/${groupId}`,
     },
     {
       title: topicId,
-      href: `/#/groups/${groupId}/topics/${topicId}`,
+      href: `/ui/groups/${groupId}/topics/${topicId}`,
     },
     {
       title: subscriptionId,
-      href: `/#/groups/${groupId}/topics/${topicId}/subscriptions/${subscriptionId}`,
+      href: `/ui/groups/${groupId}/topics/${topicId}/subscriptions/${subscriptionId}`,
     },
     {
       title: t('consumerGroups.breadcrumbs.title'),
diff --git a/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue b/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue
index f8910ce297..66f1633b98 100644
--- a/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue
+++ b/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue
@@ -28,11 +28,11 @@
     },
     {
       title: t('subscription.subscriptionBreadcrumbs.groups'),
-      href: '/#/groups',
+      href: '/ui/groups',
     },
     {
       title: groupId,
-      href: `/#/groups/${groupId}`,
+      href: `/ui/groups/${groupId}`,
     },
   ];
 </script>
diff --git a/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue b/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue
index c57b291e90..734dafbb99 100644
--- a/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue
+++ b/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue
@@ -19,7 +19,9 @@
   });
 
   function onTopicClick(topicName: string) {
-    router.push({ path: `/groups/${props.group?.name}/topics/${topicName}` });
+    router.push({
+      path: `/ui/groups/${props.group?.name}/topics/${topicName}`,
+    });
   }
 </script>
 
diff --git a/hermes-console-vue/src/views/groups/GroupsView.vue b/hermes-console-vue/src/views/groups/GroupsView.vue
index 199f26963f..2abac3a61d 100644
--- a/hermes-console-vue/src/views/groups/GroupsView.vue
+++ b/hermes-console-vue/src/views/groups/GroupsView.vue
@@ -19,7 +19,7 @@
     },
     {
       title: t('subscription.subscriptionBreadcrumbs.groups'),
-      href: '/#/groups',
+      href: '/ui/groups',
     },
   ];
 </script>
diff --git a/hermes-console-vue/src/views/groups/group-listing/GroupListing.vue b/hermes-console-vue/src/views/groups/group-listing/GroupListing.vue
index f0bc2b59d7..75374140b1 100644
--- a/hermes-console-vue/src/views/groups/group-listing/GroupListing.vue
+++ b/hermes-console-vue/src/views/groups/group-listing/GroupListing.vue
@@ -19,7 +19,7 @@
   });
 
   function onGroupClick(groupName: string) {
-    router.push({ path: `/groups/${groupName}` });
+    router.push({ path: `/ui/groups/${groupName}` });
   }
 </script>
 
diff --git a/hermes-console-vue/src/views/home/HomeView.spec.ts b/hermes-console-vue/src/views/home/HomeView.spec.ts
index 30e1018fe7..a6003bfe5c 100644
--- a/hermes-console-vue/src/views/home/HomeView.spec.ts
+++ b/hermes-console-vue/src/views/home/HomeView.spec.ts
@@ -6,7 +6,9 @@ import HomeView from '@/views/home/HomeView.vue';
 describe('HomeView', () => {
   it('renders properly', () => {
     // when
-    const { getByText } = render(HomeView);
+    const { getByText } = render(HomeView, {
+      testPinia: createTestingPiniaWithState(),
+    });
 
     // then
     expect(getByText('homeView.links.console')).toBeVisible();
diff --git a/hermes-console-vue/src/views/home/HomeView.vue b/hermes-console-vue/src/views/home/HomeView.vue
index 012e14e6fa..a6794b9ca3 100644
--- a/hermes-console-vue/src/views/home/HomeView.vue
+++ b/hermes-console-vue/src/views/home/HomeView.vue
@@ -3,9 +3,9 @@
   import { useTheme } from 'vuetify';
 
   const adminViews: { title: string; to: string }[] = [
-    { title: 'Consistency', to: '/consistency' },
-    { title: 'Constraints', to: '/constraints' },
-    { title: 'Readiness', to: '/readiness' },
+    { title: 'Consistency', to: '/ui/consistency' },
+    { title: 'Constraints', to: '/ui/constraints' },
+    { title: 'Readiness', to: '/ui/readiness' },
   ];
 
   const theme = useTheme();
@@ -29,7 +29,7 @@
 
     <v-row justify="center">
       <v-col cols="6">
-        <v-btn to="/groups" color="secondary" block>
+        <v-btn to="/ui/groups" color="secondary" block>
           <v-icon left icon="mdi-cog"></v-icon>
           <span class="ml-1">{{ $t('homeView.links.console') }}</span>
         </v-btn>
@@ -38,13 +38,13 @@
 
     <v-row justify="center">
       <v-col cols="3">
-        <v-btn to="/stats" color="accent" block>
+        <v-btn to="/ui/stats" color="accent" block>
           <v-icon left icon="mdi-chart-bar"></v-icon>
           <span class="ml-1">{{ $t('homeView.links.statistics') }}</span>
         </v-btn>
       </v-col>
       <v-col cols="3">
-        <v-btn to="/search" color="accent" block>
+        <v-btn to="/ui/search" color="accent" block>
           <v-icon left icon="mdi-magnify"></v-icon>
           <span class="ml-1">{{ $t('homeView.links.search') }}</span>
         </v-btn>
@@ -55,7 +55,7 @@
       <v-col cols="3">
         <v-btn
           block
-          :href="configStore.appConfig?.dashboard.metrics"
+          :href="configStore.loadedConfig.dashboard.metrics"
           target="_blank"
         >
           <v-icon left icon="mdi-chart-multiple"></v-icon>
@@ -65,7 +65,7 @@
       <v-col cols="3">
         <v-btn
           block
-          :href="configStore.appConfig?.dashboard.docs"
+          :href="configStore.loadedConfig.dashboard.docs"
           target="_blank"
         >
           <v-icon left icon="mdi-book-open-variant"></v-icon>
diff --git a/hermes-console-vue/src/views/redirect/RedirectView.spec.ts b/hermes-console-vue/src/views/redirect/RedirectView.spec.ts
new file mode 100644
index 0000000000..9566d98732
--- /dev/null
+++ b/hermes-console-vue/src/views/redirect/RedirectView.spec.ts
@@ -0,0 +1,42 @@
+import { appConfigStoreState } from '@/dummy/store';
+import { createTestingPinia } from '@pinia/testing';
+import { expect } from 'vitest';
+import { fetchTokenHandler } from '@/mocks/handlers';
+import { render } from '@/utils/test-utils';
+import { setActivePinia } from 'pinia';
+import { setupServer } from 'msw/node';
+import { useAuthStore } from '@/store/auth/useAuthStore';
+import { validToken } from '@/utils/jwt-utils';
+import RedirectView from '@/views/redirect/RedirectView.vue';
+import router from '@/router';
+
+describe('RedirectView', () => {
+  const server = setupServer();
+  const pinia = createTestingPinia({
+    createSpy: vi.fn,
+    initialState: { appConfig: appConfigStoreState },
+  });
+
+  beforeEach(() => {
+    setActivePinia(pinia);
+  });
+
+  it('should push to state', async () => {
+    // given
+    server.use(
+      fetchTokenHandler({ accessToken: { access_token: validToken } }),
+    );
+    server.listen();
+    const authStore = useAuthStore();
+    vi.mocked(authStore.exchangeCodeForTokenWithPKCE).mockReturnValueOnce(
+      Promise.resolve(),
+    );
+    await router.push(`/ui/redirect?code=XYZ`);
+
+    // when
+    render(RedirectView, { testPinia: pinia });
+
+    // then
+    expect(authStore.exchangeCodeForTokenWithPKCE).toHaveBeenCalledOnce();
+  });
+});
diff --git a/hermes-console-vue/src/views/redirect/RedirectView.vue b/hermes-console-vue/src/views/redirect/RedirectView.vue
new file mode 100644
index 0000000000..3efd83f12d
--- /dev/null
+++ b/hermes-console-vue/src/views/redirect/RedirectView.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
+  import { useAuthStore } from '@/store/auth/useAuthStore';
+  import { useRoute, useRouter } from 'vue-router';
+  import LoadingSpinner from '@/components/loading-spinner/LoadingSpinner.vue';
+
+  const configStore = useAppConfigStore();
+  const auth = useAuthStore();
+  const route = useRoute();
+  const router = useRouter();
+
+  if (configStore.loadedConfig && route.query.code) {
+    auth.exchangeCodeForTokenWithPKCE(String(route.query.code)).then(() => {
+      router.push(String(route.query.state));
+    });
+  }
+</script>
+
+<template>
+  <loading-spinner />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/hermes-console-vue/src/views/subscription/SubscriptionView.vue b/hermes-console-vue/src/views/subscription/SubscriptionView.vue
index 6c74ecd0ff..24954c1af1 100644
--- a/hermes-console-vue/src/views/subscription/SubscriptionView.vue
+++ b/hermes-console-vue/src/views/subscription/SubscriptionView.vue
@@ -42,15 +42,15 @@
     },
     {
       title: t('subscription.subscriptionBreadcrumbs.groups'),
-      href: '/#/groups',
+      href: '/ui/groups',
     },
     {
       title: groupId,
-      href: `/#/groups/${groupId}`,
+      href: `/ui/groups/${groupId}`,
     },
     {
       title: topicId,
-      href: `/#/groups/${groupId}/topics/${topicId}`,
+      href: `/ui/groups/${groupId}/topics/${topicId}`,
     },
     {
       title: subscriptionId,
diff --git a/hermes-console-vue/src/views/topic/TopicView.spec.ts b/hermes-console-vue/src/views/topic/TopicView.spec.ts
index 5e851ce36c..cbf6c13134 100644
--- a/hermes-console-vue/src/views/topic/TopicView.spec.ts
+++ b/hermes-console-vue/src/views/topic/TopicView.spec.ts
@@ -45,7 +45,7 @@ const useTopicMock: UseTopic = {
 describe('TopicView', () => {
   beforeEach(async () => {
     await router.push(
-      `/groups/pl.allegro.public.group` + `/topics/${dummyTopic.name}`,
+      `/ui/groups/pl.allegro.public.group` + `/topics/${dummyTopic.name}`,
     );
   });
 
diff --git a/hermes-console-vue/src/views/topic/TopicView.vue b/hermes-console-vue/src/views/topic/TopicView.vue
index f068b3358b..2070d276da 100644
--- a/hermes-console-vue/src/views/topic/TopicView.vue
+++ b/hermes-console-vue/src/views/topic/TopicView.vue
@@ -40,15 +40,15 @@
     },
     {
       title: t('subscription.subscriptionBreadcrumbs.groups'),
-      href: '/#/groups',
+      href: '/ui/groups',
     },
     {
       title: groupId,
-      href: `/#/groups/${groupId}`,
+      href: `/ui/groups/${groupId}`,
     },
     {
       title: topicName,
-      href: `/#/groups/${groupId}/topics/${topicName}`,
+      href: `/ui/groups/${groupId}/topics/${topicName}`,
     },
   ];
   const configStore = useAppConfigStore();
diff --git a/hermes-console-vue/yarn.lock b/hermes-console-vue/yarn.lock
index a4c0a6f9e1..8efb916664 100644
--- a/hermes-console-vue/yarn.lock
+++ b/hermes-console-vue/yarn.lock
@@ -1041,6 +1041,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -1482,6 +1487,11 @@ decimal.js@^10.4.3:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
 
+decode-uri-component@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.4.1.tgz#2ac4859663c704be22bf7db760a1494a49ab2cc5"
+  integrity sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==
+
 deep-eql@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.3.tgz#7c7775513092f7df98d8df9996dd085eb668cc6d"
@@ -2038,6 +2048,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-obj@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-5.1.0.tgz#5bd89676000a713d7db2e197f660274428e524ed"
+  integrity sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==
+
 finalhandler@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
@@ -2852,6 +2867,11 @@ jsonc-parser@^3.2.0:
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
   integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
 
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -3468,6 +3488,11 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
 
+pinia-plugin-persistedstate@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.0.tgz#9932ca2ae88aa6c0d6763bebc6447d7bd1f097d0"
+  integrity sha512-tZbNGf2vjAQcIm7alK40sE51Qu/m9oWr+rEgNm/2AWr1huFxj72CjvpQcIQzMknDBJEkQznCLAGtJTIcLKrKdw==
+
 pinia@2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.4.tgz#a642adfe6208e10c36d3dc16184a91064788142a"
@@ -3596,6 +3621,15 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
+query-string@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-8.1.0.tgz#e7f95367737219544cd360a11a4f4ca03836e115"
+  integrity sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==
+  dependencies:
+    decode-uri-component "^0.4.1"
+    filter-obj "^5.1.0"
+    split-on-first "^3.0.0"
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -3970,6 +4004,11 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.12.tgz#69077835abe2710b65f03969898b6637b505a779"
   integrity sha512-rr+VVSXtRhO4OHbXUiAF7xW3Bo9DuuF6C5jH+q/x15j2jniycgKbxU09Hr0WqlSLUs4i4ltHGXqTe7VHclYWyA==
 
+split-on-first@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-3.0.0.tgz#f04959c9ea8101b9b0bbf35a61b9ebea784a23e7"
+  integrity sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==
+
 stack-utils@^2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
diff --git a/hermes-management/src/main/java/pl/allegro/tech/hermes/management/config/console/ConsoleProperties.java b/hermes-management/src/main/java/pl/allegro/tech/hermes/management/config/console/ConsoleProperties.java
index 122da5d7a2..a3ec5a1170 100644
--- a/hermes-management/src/main/java/pl/allegro/tech/hermes/management/config/console/ConsoleProperties.java
+++ b/hermes-management/src/main/java/pl/allegro/tech/hermes/management/config/console/ConsoleProperties.java
@@ -277,7 +277,9 @@ public void setHeaders(AuthHeaders headers) {
 
     public static final class OAuth {
         private boolean enabled = false;
-        private String url = "localhost:8092/auth";
+        private String url = "localhost:8092";
+        private String authorizationEndpoint = "/auth/oauth/authorize";
+        private String tokenEndpoint = "/auth/oauth/token";
         private String clientId = "hermes";
         private String scope = "hermes";
 
@@ -297,6 +299,22 @@ public void setUrl(String url) {
             this.url = url;
         }
 
+        public String getAuthorizationEndpoint() {
+            return authorizationEndpoint;
+        }
+
+        public void setAuthorizationEndpoint(String authorizationEndpoint) {
+            this.authorizationEndpoint = authorizationEndpoint;
+        }
+
+        public String getTokenEndpoint() {
+            return tokenEndpoint;
+        }
+
+        public void setTokenEndpoint(String tokenEndpoint) {
+            this.tokenEndpoint = tokenEndpoint;
+        }
+
         public String getClientId() {
             return clientId;
         }