@ghentcdh/authentication-vue 0.0.2-0

package/README.md

@@ -0,0 +1,119 @@
+---
+title: Authentication
+---
+
+# Use the GhentCDH keycloak libraries for authentication
+
+## Install the libraries
+
+```ssh
+pnpm add @ghentcdh/auth/frontend @ghentcdh/auth/backend
+```
+
+## Frontend vuejs
+
+Add following environment variables to the `.env` file.
+
+```
+      - VITE_KEYCLOAK_HOST=$KEYCLOAK_HOST
+      - VITE_KEYCLOAK_REALM=$KEYCLOAK_REALM
+      - VITE_KEYCLOAK_CLIENT_ID=$KEYCLOAK_CLIENT_ID
+```
+
+### Check if a user is logged in
+
+```vue
+
+<script setup lang="ts">
+  import {useAuthenticationStore} from "@ghentcdh/authentication/frontend";
+
+  const authenticationStore = useAuthenticationStore();
+</script>
+
+<template>
+  <pre>user: {{ authenticationStore.user() }}</pre>
+</template>
+
+```
+
+### Perform backend requests with the token
+
+```vue
+
+<script setup lang="ts">
+  import {useHttpStore} from "@ghentcdh/authentication/frontend";
+
+  const httpStore = useHttpStore();
+
+  httpStore.post('/api/auth/login', {}).then(response => {
+    alert('login ok')
+  });
+</script>
+
+
+```
+
+> TODO list
+> - [ ] Add roles guard to see if routes or parts of the application can be accessed by that user
+> - [ ] Test if it's possible to have public routes
+> - [ ] Add a
+> - [ ] Add logout functionality
+
+## Backend nestjs
+
+Add following environment variables to the `.env` file.
+
+```
+      - KEYCLOAK_HOST=$KEYCLOAK_HOST
+      - KEYCLOAK_REALM=$KEYCLOAK_REALM
+```
+
+### Secure requests
+
+Add the module to your module.ts imports
+
+```typescript
+
+import {AuthenticationApiModule} from "@ghentcdh/authentication/api";
+
+@Module({
+    imports: [AuthenticationApiModule],
+})
+export class MyModule {
+}
+
+```
+
+Use the `@GhentCdhGuard` decorator to secure your routes
+
+```typescript
+import {GhentCdhGuard} from "@ghentcdh/authentication/api";
+
+@Controller()
+export class MyController {
+    @UseGuards(GhentCdhGuard)
+    @Post('/secure')
+    async securePath(@User() user: any, @Request() req: any) {
+        return user;
+    }
+}
+```
+
+The `@User()` decorator will give you the user object from the keycloak token.
+
+
+> TODO list
+> - [ ] Add roles decorator and implement logic `@GhentCdhRoles(['admin'])`
+
+## Development environment
+
+Make sure the following is added to your hosts file, if you are running a local keycloak instance. Internally the docker
+containers cannot connect to the localhost:8080 port, so a hook is needed in terms of host rewrite.
+
+```sh
+echo "127.0.0.1 authentication\n" | sudo tee -a /etc/hosts
+```
+
+## Setup docker
+
+> TODO describe me

package/eslint.config.cjs

@@ -0,0 +1,21 @@
+const vue = require('eslint-plugin-vue');
+const baseConfig = require('../../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...vue.configs['flat/recommended'],
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: require('@typescript-eslint/parser'),
+      },
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.vue'],
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+];

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@ghentcdh/authentication-vue",
+  "version": "0.0.2-0",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "vue": "^3.5.13",
+    "pinia": "^3.0.1",
+    "keycloak-js": "^26.1.2"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js",
+      "types": "./index.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GhentCDH/ghentcdh-monorepo.git",
+    "directory": "libs/authentication/vue"
+  }
+}

package/project.json

@@ -0,0 +1,13 @@
+{
+  "name": "authentication-vue",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/authentication/vue/src",
+  "projectType": "library",
+  "tags": [
+    "publish",
+    "scope:api",
+    "scope:feature"
+  ],
+  "// targets": "to see all targets run: nx show project authentication-vue --web",
+  "targets": {}
+}

package/src/authentication.store.ts

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia';
+import { ref, shallowRef, watch } from 'vue';
+
+import { KeycloakAdapter } from './keycloak.adapter';
+
+const AUTH_STORE_NAME = 'GHENT_CDH_AUTH_STORE';
+
+export const useAuthenticationStore = defineStore(AUTH_STORE_NAME, () => {
+  const isAuthenticated = shallowRef(false);
+
+  const keycloackAdapter = ref<KeycloakAdapter>();
+
+  // create a promise initeDone
+  const initDone = ref(false);
+
+  KeycloakAdapter.init().then((adapter) => {
+    isAuthenticated.value = adapter.isAuthenticated;
+    keycloackAdapter.value = adapter;
+    initDone.value = true;
+    return adapter;
+  });
+
+  const logout = () => {
+    console.warn('logout');
+  };
+
+  return {
+    token: () => keycloackAdapter.value?.token,
+    user: () => keycloackAdapter.value?.userInfo,
+    isAuthenticated: () => keycloackAdapter.value?.isAuthenticated,
+    logout,
+    updateToken: async () => {
+      if (!initDone.value) {
+        await new Promise<void>((resolve) => {
+          const unwatch = watch(initDone, (newValue) => {
+            if (newValue) {
+              unwatch();
+              resolve();
+            }
+          });
+        });
+      }
+      return keycloackAdapter.value?.updateToken();
+    },
+  };
+});

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './keycloak.adapter';
+export * from './authentication.store';
+export * from './request.store';

package/src/keycloak.adapter.ts

@@ -0,0 +1,55 @@
+import Keycloak from 'keycloak-js';
+
+
+export class KeycloakAdapter extends Keycloak {
+
+
+    private constructor() {
+        const {VITE_KEYCLOAK_REALM, VITE_KEYCLOAK_HOST, VITE_KEYCLOAK_CLIENT_ID} = import.meta.env;
+
+        super({
+            url: VITE_KEYCLOAK_HOST,
+            realm: VITE_KEYCLOAK_REALM,
+            clientId: VITE_KEYCLOAK_CLIENT_ID
+        })
+
+    }
+
+    private async initialize() {
+        try {
+            const authenticated = await this.init(
+                {
+                    onLoad: 'login-required'
+                }
+            );
+            if (authenticated) {
+                console.log('User is authenticated');
+            }
+            console.log('User is not authenticated');
+
+        } catch (error) {
+            console.error('Failed to initialize adapter:', error);
+        }
+    }
+
+
+    static async init(): Promise<KeycloakAdapter> {
+        const instance = new KeycloakAdapter();
+
+        await instance.initialize();
+        return instance;
+    }
+
+
+    get userInfo() {
+        return this.idTokenParsed
+    }
+
+    updateToken() {
+        return this.updateToken(30)
+    }
+
+    get isAuthenticated() {
+        return this.authenticated ?? false;
+    }
+}

package/src/request.store.ts

@@ -0,0 +1,126 @@
+import { defineStore } from 'pinia';
+
+import { useAuthenticationStore } from './authentication.store';
+
+const AUTH_STORE_NAME = 'GHENT_CDH_HTTP_REQUEST';
+
+// TODO add white list of request
+type RequestOptions = {
+  skipAuth?: boolean;
+  queryParams?: Record<string, any>;
+  contentType?: string;
+};
+
+type Error = {
+  status: number;
+  content: any;
+};
+
+export const useHttpStore = defineStore(AUTH_STORE_NAME, () => {
+  const authStore = useAuthenticationStore();
+
+  const makeRequest = async (
+    url: string,
+    requestInit: RequestInit,
+    options: RequestOptions = { contentType: 'application/json' },
+  ) => {
+    const headers: Record<string, string> = {
+      accept: 'application/json',
+      ...(requestInit.headers ?? {}),
+    } as Record<string, string>;
+
+    if (options.contentType) {
+      headers['Content-Type'] = options.contentType;
+    }
+
+    if (!options?.skipAuth) {
+      await authStore.updateToken();
+      headers['Authorization'] = `Bearer ${authStore.token()}`;
+    }
+
+    const _url = new URL(url, window.location.href);
+
+    if (options?.queryParams) {
+      for (const [key, value] of Object.entries(options.queryParams)) {
+        _url.searchParams.set(key, value);
+      }
+    }
+
+    const response = await fetch(_url.toString(), {
+      ...requestInit,
+      headers,
+    });
+
+    if (!response.ok) {
+      if (!options?.skipAuth) {
+        // TODO if response return 400 then redirect to login page
+      }
+
+      return Promise.reject({
+        content: response.body,
+        status: response.status,
+      } as any);
+    }
+
+    return response.json();
+  };
+
+  return {
+    get: <T>(url: string, options?: RequestOptions): Promise<T> =>
+      makeRequest(url, { method: 'GET' }, options),
+    postFile: <T>(
+      url: string,
+      file: File,
+      data: any = {},
+      options?: RequestOptions,
+    ): Promise<T> => {
+      const formData = new FormData();
+
+      for (const name in data) {
+        formData.append(name, data[name]);
+      }
+
+      formData.append('file', file);
+
+      return makeRequest(
+        url,
+        {
+          method: 'POST',
+          body: formData,
+        },
+        { ...options, contentType: undefined },
+      );
+    },
+    post: <T>(url: string, data: any, options?: RequestOptions): Promise<T> =>
+      makeRequest(
+        url,
+        {
+          method: 'POST',
+          body: JSON.stringify(data),
+        },
+        options,
+      ),
+    patch: <T>(url: string, data: any, options?: RequestOptions): Promise<T> =>
+      makeRequest(
+        url,
+        {
+          method: 'PATCH',
+          body: JSON.stringify(data),
+        },
+        options,
+      ),
+    delete: <T>(
+      url: string,
+      data?: any,
+      options?: RequestOptions,
+    ): Promise<T> =>
+      makeRequest(
+        url,
+        {
+          method: 'DELETE',
+          body: JSON.stringify(data),
+        },
+        options,
+      ),
+  };
+});

package/src/vue-shims.d.ts

@@ -0,0 +1,7 @@
+declare module '*.vue' {
+  import type { defineComponent } from 'vue';
+
+
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "moduleResolution": "node",
+    "resolveJsonModule": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,31 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["vite/client"]
+  },
+  "exclude": [
+    "src/**/__tests__/*",
+    "src/**/*.spec.vue",
+    "src/**/*.test.vue",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,61 @@
+/// <reference types='vitest' />
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+import * as path from 'path';
+
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/authentication/vue',
+  plugins: [
+    vue(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../../dist/libs/authentication/vue',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'authentication-vue',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [],
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../../coverage/libs/authentication/vue',
+      provider: 'v8',
+    },
+  },
+});