merge: Merge pull request #113 from arunaengine/feat/iam4nfdi

IAM4NFDI & OIDC support improvements

Author: St4NNi

components/custom-ui/dialog/LoginDialog.vue

@@ -29,17 +29,17 @@ const local = computed(() => window.location.hostname.includes('localhost'))
       <Button v-if='local'
               variant="outline"
               class="px-4 border-aruna-text/50 text-lg hover:bg-aruna-fg">
-        <a href="/auth/login?provider=local" class="flex">
+        <a href="/auth/login?provider=local" class="flex items-center">
           <img src="/imgs/keycloak.webp"
                alt="Local Test Login"
-               class="h-6 mr-2"/>
-          Local Test Login
+               class="flex h-6 mr-3"/>
+          <p class="flex">Local Test Login</p>
         </a>
       </Button>
 
       <Button variant="outline"
               class="px-4 border-aruna-text/50 text-lg hover:bg-aruna-fg">
-        <a href="/auth/login?provider=lifescience" class="flex">
+        <a href="/auth/login?provider=lifescience" class="flex items-center">
           <img src="/imgs/ls-ri.webp"
                alt="LifeScience Login"
                class="h-6 mr-2"/>
@@ -48,14 +48,24 @@ const local = computed(() => window.location.hostname.includes('localhost'))
       </Button>
 
       <Button variant="outline"
-              class="px-4 border-aruna-text/50 text-lg  hover:bg-aruna-fg">
-        <a href="/auth/login?provider=gfbio" class="flex">
+              class="px-4 border-aruna-text/50 text-lg hover:bg-aruna-fg">
+        <a href="/auth/login?provider=gfbio" class="flex items-center">
           <img src="/imgs/gfbio.webp"
                alt="GFBio Logo"
                class="h-6 mr-2"/>
           GFBio SSO
         </a>
       </Button>
+
+      <Button variant="outline"
+              class="px-4 border-aruna-text/50 text-lg hover:bg-aruna-fg">
+        <a href="/auth/login?provider=iam4nfdi" class="flex items-center">
+          <img src="/imgs/iam4nfdi.webp"
+               alt="IAM4NFDI Logo"
+               class="h-6 mr-2"/>
+          NFDI AAI
+        </a>
+      </Button>
     </DialogContent>
   </Dialog>
 </template>

nuxt.config.ts

@@ -39,37 +39,40 @@ export default defineNuxtConfig({
     },
     provider: {
       local: {
+        wellKnownUrl: "http://localhost:1998/realms/test/.well-known/openid-configuration",
         clientId: "test",
         clientSecret: "QgBl9I2CD3eVhL7LFvkHrYUK7oKL3LE2",
-        issuer: "http://localhost:1998/realms/test",
         redirectUrl: "http://localhost:3000/callback",
-        authUrl: 'http://localhost:1998/realms/test/protocol/openid-connect/auth',
-        tokenUrl: 'http://localhost:1998/realms/test/protocol/openid-connect/token',
-        revokeUrl: 'http://localhost:1998/realms/test/protocol/openid-connect/revoke',
         scope: ["openid"],
-        code_challenge: false
+        code_challenge: false,
+        post_auth: false
       },
       gfbio: {
+        wellKnownUrl: "",
         clientId: '',
         clientSecret: '',
-        issuer: '',
         redirectUrl: '',
-        authUrl: '',
-        tokenUrl: '',
-        revokeUrl: '',
         scope: [''],
-        code_challenge: false
+        code_challenge: false,
+        post_auth: false
       },
       lifescience: {
+        wellKnownUrl: "",
         clientId: '',
         clientSecret: '',
-        issuer: '',
         redirectUrl: '',
-        authUrl: '',
-        tokenUrl: '',
-        revokeUrl: '',
         scope: [''],
-        code_challenge: false
+        code_challenge: false,
+        post_auth: false
+      },
+      iam4nfdi: {
+        wellKnownUrl: "",
+        clientId: '',
+        clientSecret: '',
+        redirectUrl: '',
+        scope: [''],
+        code_challenge: false,
+        post_auth: false
       }
     },
     markdownCss: {

public/imgs/iam4nfdi.webp

@@ -1,5 +1,6 @@
 import {withQuery} from 'ufo'
 import crypto from 'crypto'
+import {AuthQuery, IdpMetadata, errorToPOJO, fetchCachedOidcMetadata} from "~/server/utils/oidc";
 
 export default defineEventHandler(async event => {
   const provider = getQuery(event)['provider']
@@ -20,50 +21,48 @@ export default defineEventHandler(async event => {
   // Delete older cookie with login meta info
   deleteCookie(event, 'login_meta')
 
+  // Fetch idp metadata from well-known url
+  const response = await fetchCachedOidcMetadata(config.wellKnownUrl)
+  if (Array.isArray(response)) {
+    return createError({
+      statusCode: response[0],
+      message: `Login failed: '${response[1]}'. Please try again later or contact the website administrator`,
+    });
+  }
+  console.log(`[Login Server] Idp meta fetch ${response}`)
+
+  // Start authentication flow
+  let auth_query: AuthQuery = {
+    client_id: config.clientId,
+    redirect_uri: config.redirectUrl,
+    scope: config.scope.join(' '),
+    response_type: 'code',
+  }
+
+  let code_verifier
   if (config?.code_challenge) {
     //const state = crypto.randomUUID() // Optional
-    const code_verifier = crypto.randomUUID()
-    const code_challenge = crypto.createHash('sha256').update(code_verifier).digest().toString('base64')
+    code_verifier = crypto.randomUUID()
+    const code_challenge = crypto.createHash('sha256').update(code_verifier).digest().toString('base64url')
         .replace(/\+/g, '-')
         .replace(/\//g, '_')
         .replace(/=+$/, '')
 
-    // Cache login meta information in cookie for callback
-    setCookie(event, 'login_meta', JSON.stringify( {
-      provider: provider,
-      code_verifier: code_verifier,
-      add_idp: add_idp ? add_idp : false
-    }))
+    // Add PKCE relevant fields
+    auth_query['code_challenge_method'] = 'S256'
+    auth_query['code_challenge'] = code_challenge
+  }
 
-    // Redirect to idp authorization
-    return sendRedirect(
-        event,
-        withQuery(config.authUrl, {
-          response_type: 'code',
-          client_id: config.clientId,
-          redirect_uri: config.redirectUrl,
-          scope: config.scope.join(' '),
-          code_challenge_method: 'S256',
-          code_challenge: code_challenge
-        })
-    )
-  } else {
-    // Cache login meta information in cookie for callback
-    setCookie(event, 'login_meta', JSON.stringify( {
-      provider: provider,
-      code_verifier: undefined,
-      add_idp: add_idp ? add_idp : false
-    }))
+  // Cache login meta information in cookie for callback
+  setCookie(event, 'login_meta', JSON.stringify({
+    provider: provider,
+    code_verifier: code_verifier,
+    add_idp: add_idp ? add_idp : false
+  }))
 
-    // Redirect to idp authorization without code challenge
-    return sendRedirect(
-        event,
-        withQuery(config.authUrl, {
-          client_id: config.clientId,
-          redirect_uri: config.redirectUrl,
-          scope: config.scope.join(' '),
-          response_type: 'code',
-        })
-    )
-  }
+  // Redirect to idp authorization endpoint
+  return sendRedirect(
+      event,
+      withQuery(response.authorization_endpoint, auth_query)
+  )
 })

server/routes/auth/login.get.ts

@@ -1,4 +1,21 @@
 import type {v2AddOidcProviderResponse} from "~/composables/aruna_api_json";
+import {errorToPOJO, fetchCachedOidcMetadata} from "~/server/utils/oidc";
+
+type AuthCodeRequest = {
+  grant_type: 'authorization_code',
+  redirect_uri: string,
+  code: string,
+  code_verifier?: string, // Only with PKCE
+  client_id?: string,     // Only with client_secret_post (config.post_auth: true)
+  client_secret?: string, // Only with client_secret_post (config.post_auth: true)
+}
+
+type AuthCodeResponse = {
+  access_token: string,
+  refresh_token: string,
+  expires_in: number | undefined,
+  refresh_expires_in: number | undefined,
+}
 
 export default defineEventHandler(async event => {
   const query = getQuery(event)
@@ -16,7 +33,7 @@ export default defineEventHandler(async event => {
   deleteCookie(event, 'login_meta')
 
   if (!login_meta)
-      throw new Error('Missing login meta information')
+    throw new Error('Missing login meta information')
   const {provider, code_verifier, add_idp} = JSON.parse(login_meta)
 
   // Fetch provider specific config
@@ -26,43 +43,49 @@ export default defineEventHandler(async event => {
     throw new Error(`Unknown/Unsupported identity provider: ${provider}`)
   }
 
-  // Fetch access/refresh tokens from provider
-  let tokens: any = undefined
+  const response = await fetchCachedOidcMetadata(config.wellKnownUrl)
+  if (Array.isArray(response)) {
+    return createError({
+      statusCode: response[0],
+      message: `Failed to fetch openid configuration of identity provider: '${response[1]}'. 
+      Please try again later or contact the website administrator`,
+    });
+  }
+
+  // Build request and fetch access/refresh token from provider
+  let request: AuthCodeRequest = {
+    grant_type: 'authorization_code',
+    redirect_uri: config.redirectUrl,
+    code: code as string,
+  }
   if (code_verifier) {
-    // Fetch access and refresh token
-    tokens = await $fetch(config.tokenUrl, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        client_id: config.clientId,
-        client_secret: config.clientSecret,
-        grant_type: 'authorization_code',
-        redirect_uri: config.redirectUrl,
-        code: code as string,
-        code_verifier: code_verifier,
-      }).toString(),
-    }).catch((error) => {
-      return {error}
-    })
-  } else {
-    // Fetch access and refresh token
-    tokens = await $fetch(config.tokenUrl, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        client_id: config.clientId,
-        client_secret: config.clientSecret,
-        grant_type: 'authorization_code',
-        redirect_uri: config.redirectUrl,
-        code: code as string,
-      }).toString(),
-    }).catch((error) => {
-      return {error}
-    })
+    request.code_verifier = code_verifier
+  }
+  if (config.post_auth) {
+    request.client_id = config.clientId
+    request.client_secret = config.clientSecret
+  }
+  let headers: Record<string, string> = {
+    'Content-Type': 'application/x-www-form-urlencoded',
+  }
+  if (!config.post_auth) {
+    headers['Authorization'] = 'Basic ' + btoa(config.clientId + ":" + config.clientSecret)
+  }
+
+  let tokens = await $fetch<AuthCodeResponse>(response.token_endpoint, {
+    method: 'POST',
+    headers: headers,
+    body: new URLSearchParams(request).toString(),
+  }).catch(error => {
+    console.debug(errorToPOJO(error))
+    return [error.code, error.data.error_description]
+  })
+
+  if (Array.isArray(tokens)) {
+    return createError({
+      statusCode: tokens[0],
+      message: `Login failed: '${tokens[1]}'. Please try again later or contact the website administrator`,
+    });
   }
 
   if (add_idp) {

server/routes/callback.get.ts

@@ -0,0 +1,40 @@
+export type IdpMetadata = {
+  issuer: string,
+  authorization_endpoint: string,
+  token_endpoint: string,
+  revocation_endpoint: string,
+  introspection_endpoint: string,
+  userinfo_endpoint: string,
+  jwks_uri: string
+}
+
+export type AuthQuery = {
+  response_type: 'code',
+  client_id: string,
+  redirect_uri: string,
+  scope: string,
+  code_challenge_method?: 'S256',
+  code_challenge?: string
+}
+
+export function errorToPOJO(error: any) {
+  const ret: any = {};
+  for (const propertyName of Object.getOwnPropertyNames(error)) {
+    ret[propertyName] = error[propertyName];
+  }
+  return ret;
+}
+
+export const fetchCachedOidcMetadata = defineCachedFunction(async (wellKnowUrl: string): Promise<IdpMetadata | [number, string]> => {
+  return await $fetch<IdpMetadata>(wellKnowUrl)
+      .catch(error => {
+        console.error(error)
+        return [error.code, error.data.error_description]
+      })
+}, {
+  group: 'idp-configs',
+  name: 'idp-metadata',
+  maxAge: useRuntimeConfig().cacheMaxAge || 60 * 60, // Defaults to 1 hour
+  swr: false,
+  getKey: (identityProvider: string) => identityProvider,
+})