Allow admin console to connect to keycloak

Author: rolljee

Dockerfile

@@ -10,3 +10,5 @@ RUN npm run build
 # Server step
 FROM nginx:1.27 AS production-stage
 COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80

docker-compose.yml

@@ -1,4 +1,12 @@
 services:
+  web:
+    image: kuzzleio/kuzzle-runner:22
+    command: npm run dev --prefix /var/app/ -- --host
+    ports:
+      - 8080:8080
+    volumes:
+      - .:/var/app
+
   kuzzle:
     image: kuzzleio/kuzzle:2
     ports:
@@ -20,17 +28,6 @@ services:
       interval: 5s
       retries: 30
 
-  web:
-    image: kuzzleio/kuzzle-runner:22
-    command: npm run dev --prefix /var/app/ -- --host
-    ports:
-      - 8080:8080
-    depends_on:
-      kuzzle:
-        condition: service_healthy
-    volumes:
-      - .:/var/app
-
   redis:
     image: redis:5
     ports:

src/components/Common/Login/Form.vue

@@ -32,13 +32,42 @@
       <b-alert variant="danger" show dismissible> Login failed: {{ error }} </b-alert>
     </div>
 
-    <div class="LoginForm-buttons float-right mt-3">
-      <b-button class="mr-3" data-cy="LoginAsAnonymous-Btn" variant="link" @click="loginAsAnonymous"
-        >Login as Anonymous</b-button
-      >
-      <b-button variant="primary" data-cy="Login-submitBtn" type="submit" name="action" tabindex="3"
-        >Login</b-button
-      >
+    <div class="LoginForm-buttons">
+      <div class="d-flex flex-column align-items-center w-100 gap-3">
+        <div class="w-100 d-flex justify-content-center mt-2">
+          <b-button
+            class="w-100"
+            variant="primary"
+            data-cy="Login-submitBtn"
+            type="submit"
+            name="action"
+            tabindex="3"
+            >Login</b-button
+          >
+        </div>
+
+        <div v-for="strategy in strategies" class="w-100 d-flex justify-content-center mt-2">
+          <b-button
+            class="w-100"
+            variant="primary"
+            data-cy="Login-submitBtn"
+            name="action"
+            @click="loginWithStrategy(strategy)"
+            tabindex="4"
+            >Login with {{ strategy }}</b-button
+          >
+        </div>
+
+        <div class="w-100 d-flex justify-content-center mt-2">
+          <b-button
+            class="w-100"
+            data-cy="LoginAsAnonymous-Btn"
+            variant="primary"
+            @click="loginAsAnonymous"
+            >Login as Anonymous</b-button
+          >
+        </div>
+      </div>
     </div>
   </form>
 </template>
@@ -67,6 +96,7 @@ export default {
       username: null,
       password: null,
       error: '',
+      strategies: ['keycloak'],
     };
   },
   computed: {
@@ -114,6 +144,34 @@ export default {
         this.error = error.message;
       }
     },
+
+    async loginWithStrategy(strategy) {
+      if (!strategy) {
+        return;
+      }
+
+      if (strategy !== 'keycloak') {
+        this.error = 'Strategy not supported yet.';
+        return;
+      }
+
+      this.error = '';
+      this.$kuzzle.jwt = null;
+
+      try {
+        const response = await this.$kuzzle.query({
+          controller: 'auth',
+          action: 'login',
+          strategy: 'keycloak',
+        });
+
+        localStorage.setItem('openid-sessionId', response.headers.keycloak);
+        window.location.href = response.headers.location;
+      } catch (error) {
+        this.error = error.message;
+        localStorage.removeItem('openid-sessionId');
+      }
+    },
   },
 };
 </script>

src/stores/auth.ts

@@ -243,8 +243,22 @@ export const useAuthStore = defineStore('auth', {
     async init() {
       this.reset();
       this.initializing = true;
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
       await this.checkFirstAdmin();
-      await this.loginByToken();
+
+      const sessionId = localStorage.getItem('openid-sessionId');
+
+      if (sessionId) {
+        await this.loginByOpenId(sessionId);
+      } else {
+        await this.loginByToken();
+      }
     },
     async createSingleUseToken(): Promise<string> {
       const kuzzleStore = useKuzzleStore();
@@ -318,6 +332,45 @@ export const useAuthStore = defineStore('auth', {
       const jwt = await kuzzle.auth.login('local', credentials, '2h');
       return await this.setSession(jwt);
     },
+
+    async loginByOpenId(sessionId: string) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      if (kuzzleStore.currentEnvironment === null) {
+        throw new Error('No current environment selected');
+      }
+
+      const response = await kuzzle.query({
+        controller: 'auth',
+        action: 'login',
+        strategy: 'keycloak',
+        body: {
+          sessionId: sessionId,
+          callbackUrl: window.location.href,
+        },
+      });
+
+      kuzzle.jwt = null;
+
+      if (response.status === 200) {
+        localStorage.removeItem('openid-sessionId');
+        const res = await kuzzle.auth.checkToken(response.result.jwt);
+
+        if (!res.valid) {
+          kuzzle.jwt = null;
+          return await this.setSession(null);
+        } else {
+          kuzzle.jwt = response.result.jwt;
+          return await this.setSession(response.result.jwt);
+        }
+      }
+    },
+
     async loginByToken() {
       const kuzzleStore = useKuzzleStore();
       const kuzzle = kuzzleStore.$kuzzle;

src/stores/kuzzle.ts

@@ -95,6 +95,8 @@ export const useKuzzleStore = defineStore('kuzzle', {
 
       localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(this.environments));
 
+      this.setCurrentEnvironment(payload.id);
+
       return payload.id;
     },
     deleteEnvironment(id: string) {

src/utils.ts

@@ -24,13 +24,14 @@ export const formatForDom = (word: string): string => {
 
 export const sortObject = (object: object): object => {
   return Object.keys(object)
-    .sort()
+    .sort((a, b) => a.localeCompare(b))
     .reduce((result, key) => {
       result[key] = object[key];
       return result;
     }, {});
 };
 
+
 export const truncateName = (name: string, maxLength = 50): string => {
   if (name.length === 0) {
     return '';

vite.config.ts

@@ -60,7 +60,7 @@ export default defineConfig({
   },
   plugins: [vue(), visualizer()],
   preview: {
-    port: 8080,
+    port: 8082,
   },
   resolve: {
     alias: {