Add authentication (#17)

.devcontainer/create_cert

@@ -2,7 +2,8 @@
 
 # create self-signed certificate for testing with the browser
 
-HOST=data.staging.ghga.dev
+BASE_URL=${BASE_URL:-https://data.staging.ghga.dev}
+HOST=${BASE_URL#https://}
 CERTFILE=cert.pem
 KEYFILE=key.pem
 

.devcontainer/data-portal.yaml

@@ -11,5 +11,9 @@ log_level: DEBUG
 
 base_url: http://127.0.0.1:8080
 
+auth_url: /api/auth
 mass_url: /api/mass
 metldata_url: /api/metldata
+
+oidc_client_id: ghga-dev-client
+oidc_authority_url: https://login.aai.lifescience-ri.eu/oidc/

.devcontainer/dev_install

@@ -3,7 +3,7 @@
 
 cd /workspace
 
-corepack prepare pnpm@9.13.2 --activate
+corepack prepare pnpm@9.14.2 --activate
 echo "Updating pnpm..."
 npm install -g pnpm
 

.devcontainer/devcontainer.json

@@ -8,7 +8,10 @@
   // Features to add to the dev container. More info: https://containers.dev/features.
   // "features": {},
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  "forwardPorts": [8080, 443],
+  "forwardPorts": [
+    8080,
+    443
+  ],
   // Create an empty local env file if it does not yet exist
   "initializeCommand": "touch .devcontainer/local.env",
   // Use 'postCreateCommand' to run commands after the container is created.
@@ -29,7 +32,10 @@
         },
         "editor.formatOnSave": true,
         "editor.renderWhitespace": "all",
-        "editor.rulers": [88, 120],
+        "editor.rulers": [
+          88,
+          120
+        ],
         "editor.defaultFormatter": "vscode.typescript-language-features"
       },
       // Add the IDs of extensions you want installed when the container is created.

.prettierrc

@@ -4,5 +4,6 @@
   "useTabs": false,
   "singleQuote": true,
   "printWidth": 88,
-  "proseWrap": "preserve"
+  "proseWrap": "preserve",
+  "endOfLine": "lf"
 }

.vscode/settings.json

@@ -1,8 +1,11 @@
 {
   "window.title": "Data Portal - ${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}",
-  "cSpell.words": ["devcontainer", "devkit", "metldata"],
+  "cSpell.words": ["devcontainer", "devkit", "metldata", "TOTP"],
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -18,5 +21,7 @@
   "eslint.options": {
     "overrideConfigFile": "/workspace/eslint.config.js"
   },
-  "remote.localPortHost": "allInterfaces"
+  "remote.localPortHost": "allInterfaces",
+  "files.insertFinalNewline": true,
+  "files.trimFinalNewlines": true
 }

Dockerfile

@@ -5,7 +5,7 @@ RUN apk upgrade --no-cache --available
 # BUILDER: a container to build the service dist directory
 FROM base AS builder
 # install pnpm
-RUN corepack prepare pnpm@9.13.2 --activate
+RUN corepack prepare pnpm@9.14.2 --activate
 RUN npm install -g pnpm
 # install static web server
 RUN apk add curl sudo which
@@ -28,8 +28,7 @@ COPY --from=builder /service/dist/data-portal/browser ./dist
 COPY --from=builder /usr/local/bin/static-web-server /usr/local/bin
 # make the config file writeable to the appuser
 USER root
-RUN touch ./dist/config.js
-RUN chown appuser ./dist/config.js
+RUN touch ./dist/config.js && chown appuser ./dist/config.js
 USER appuser
 # install run script
 COPY ./run.js ./run.mjs

README.md

@@ -30,6 +30,14 @@ If the staging backend requires an additional Basic authentication, you can set
 dev_launcher staging username:password
 ```
 
+In order to make the OIDC and basic authentication work, you also need to add a `.devcontainer/local.env` file like this, with the proper credentials:
+
+```env
+data_portal_base_url=https://data.staging.ghga.dev
+data_portal_basic_auth=USERNAME:PASSWORD
+data_portal_oidc_client_id=OIDC_DEV_CLIENT_ID
+```
+
 ## Code scaffolding
 
 Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

data-portal.default.yaml

@@ -13,5 +13,15 @@ log_level: INFO
 
 base_url: http://127.0.0.1:8080
 
+auth_url: /api/auth
 mass_url: /api/mass
 metldata_url: /api/metldata
+
+oidc_client_id: ghga-client
+oidc_redirect_url: oauth/callback
+oidc_scope: 'openid profile email'
+oidc_authority_url: https://login.aai.lifescience-ri.eu/oidc/
+oidc_authorization_url: authorize
+oidc_token_url: token
+oidc_userinfo_url: userinfo
+oidc_use_discovery: true

eslint.config.js

@@ -131,21 +131,17 @@ export default [
             {
               from: ['config'],
               disallow: ['*'],
-              message: 'Config modules can only import modules with routes',
+              message: 'Config modules can only import routes and auth services',
             },
             {
               from: ['config'],
-              allow: ['routes'],
+              allow: ['routes', ['service', { context: 'auth' }]],
             },
-            // modules for routes may only import feature components
+            // modules for routes may not import ui components
             {
               from: ['routes'],
-              disallow: ['*'],
-              message: 'Modules for routes can only import feature components',
-            },
-            {
-              from: ['routes'],
-              allow: ['features'],
+              disallow: ['ui'],
+              message: 'Modules for routes cannot import ui components',
             },
             // unit tests are currently exempt from all rules
             {
@@ -180,7 +176,7 @@ export default [
             },
             // Auth service may be imported in other contexts
             {
-              from: ['features', 'service'],
+              from: ['features', 'service', 'routes'],
               allow: [['service', { context: 'auth' }]],
             },
             // Auth models may be imported in other contexts

package.json

@@ -20,38 +20,40 @@
   "type": "module",
   "private": true,
   "dependencies": {
-    "@angular-eslint/eslint-plugin": "^18.4.1",
-    "@angular-eslint/template-parser": "^18.4.1",
-    "@angular/animations": "19.0.0-rc.3",
-    "@angular/cdk": "19.0.0-rc.3",
-    "@angular/common": "19.0.0-rc.3",
-    "@angular/compiler": "19.0.0-rc.3",
-    "@angular/core": "19.0.0-rc.3",
-    "@angular/forms": "19.0.0-rc.3",
-    "@angular/material": "19.0.0-rc.3",
-    "@angular/platform-browser": "19.0.0-rc.3",
-    "@angular/platform-browser-dynamic": "19.0.0-rc.3",
-    "@angular/router": "19.0.0-rc.3",
+    "@angular-eslint/eslint-plugin": "^18.4.2",
+    "@angular-eslint/template-parser": "^18.4.2",
+    "@angular/animations": "^19.0.1",
+    "@angular/cdk": "^19.0.1",
+    "@angular/common": "^19.0.1",
+    "@angular/compiler": "^19.0.1",
+    "@angular/core": "^19.0.1",
+    "@angular/forms": "^19.0.1",
+    "@angular/material": "^19.0.1",
+    "@angular/platform-browser": "^19.0.1",
+    "@angular/platform-browser-dynamic": "^19.0.1",
+    "@angular/router": "^19.0.1",
+    "angularx-qrcode": "^19.0.0",
     "js-yaml": "^4.1.0",
+    "oidc-client-ts": "^3.1.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "19.0.0-rc.3",
-    "@angular/cli": "19.0.0-rc.3",
-    "@angular/compiler-cli": "19.0.0-rc.3",
+    "@angular-devkit/build-angular": "^19.0.2",
+    "@angular/cli": "^19.0.2",
+    "@angular/compiler-cli": "^19.0.1",
     "@compodoc/compodoc": "^1.1.26",
     "@eslint/markdown": "^6.2.1",
     "@types/jasmine": "~5.1.4",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
-    "angular-eslint": "^18.4.1",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "angular-eslint": "19.0.0-alpha.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-boundaries": "^5.0.1",
-    "eslint-plugin-jsdoc": "^50.5.0",
+    "eslint-plugin-jsdoc": "^50.6.0",
     "eslint-plugin-prettier": "^5.2.1",
     "husky": "^9.1.7",
     "jasmine-core": "~5.4.0",
@@ -62,9 +64,9 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "postcss": "^8.4.49",
     "prettier": "3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "tailwindcss": "^3.4.15",
     "typescript": "~5.6.3",
-    "typescript-eslint": "^8.15.0"
+    "typescript-eslint": "^8.16.0"
   }
 }