@luigi-project/plugin-auth-oidc-pkce

OpenID Connect with PKCE - Authorization Plugin for Luigi Core

Overview

This authorization plugin contains a library that allows your application to extend the Luigi framework with an OpenID Connect authorization provider. Further configuration details can be found in the main documentation. The plugin supports only Authorization Code flow with PKCE - for Implict flow please check older OIDC plugin.

Installation

Install the plugin in your project using npm:

npm install @luigi-project/plugin-auth-oidc-pkce

Import the plugin in places where you want to use it, depending on the environment of your choice:

var OpenIdConnect = require('@luigi-project/plugin-auth-oidc-pkce');

or

import OpenIdConnect from '@luigi-project/plugin-auth-oidc-pkce';

Then, integrate it as an authorization provider in your Luigi configuration file:

Luigi.setConfig({
  auth: {
    use: 'myProviderConfig',
    myProviderConfig: {
      idpProvider: OpenIdConnect,
      authority: 'http://authority.server',
      post_logout_redirect_uri: 'http://authority.server/connect/endsession',
      scope: 'openid profile email',

      // for PKCE flow
      client_id: 'authorisation-code-pkce-mock-client', // example oidc-mockserver client id
      response_type: "code", // for PKCE
      response_mode: "fragment", // change between `query` and `fragment`

      // ... further configuration data comes here
    }
  }
})

If you want to use the silent token renewal feature, the silent-callback.html needs to be copied to a folder in your Luigi Core installation, which is the return path for the IdP provider, configured through the silent_redirect_uri setting. The default location of silent_redirect_uri is /assets/auth-oidc-pkce/silent-callback.html.

Next, you must install oidc-client-ts in your project as a dev dependency:

npm i -save-dev oidc-client-ts

Then, you need to copy certain auxiliary plugin files and the callback file, as they are needed for the initial setup.

Respectively from oidc-client-ts library you need:

• oidc-client-ts.min.js which normally resides in node_modules/oidc-client-ts/dist/browser

and from our library @luigi-project/plugin-auth-oidc-pkce you need:

• plugin.js
• silent-callback.html which all reside under node_modules/@luigi-project/plugin-auth-oidc-pkce/plugin.js.

The above mentioned files should be copied to assets/auth-oidc-pkce as the default location.

Below we give some alternatives on how to easily copy these files in your project. However, you may choose your own way of copying these files depending on your environment.

For applications involving a webpack configuration, one way to copy files is using packages such as copy-webpack-plugin and then including the following in your webpack configuration file:

const CopyWebpackPlugin = require('copy-webpack-plugin');

{
  plugins: [
    new CopyWebpackPlugin([
     {
         from: 'node_modules/@luigi-project/plugin-auth-oidc-pkce/plugin.js',
         to: 'assets/auth-oidc-pkce'
     },
     {
         from: 'node_modules/@luigi-project/plugin-auth-oidc-pkce/silent-callback.html',
         to: 'assets/auth-oidc-pkce'
     },
     {
         from: 'node_modules/oidc-client-ts/dist/browser/oidc-client-ts.min.js',
         to: 'assets/auth-oidc-pkce'
     }
    ])
  ]
}

If your application does not use webpack or you installed Luigi without a framework, you can use an alternative way of copying the silent-callback.html file. You can use any copy plugin to copy the file and then modify the package.json script to copy the file when building. One package that could be helpful is copyfiles. Below is an example:

"buildConfig": "webpack --entry ./src/luigi-config/luigi-config.es6.js --output-path ./public/assets --output-filename luigi-config.js --mode production",
"build": "npm run buildConfig && npm run copyCallbackOIdc",
"copyCallbackOidc": "copyfiles -f node_modules/@luigi-project/plugin-auth-oidc-pkce/silent-callback.html node_modules/@luigi-project/plugin-auth-oidc-pkce/plugin.js node_modules/oidc-client-ts/dist/browser/oidc-client-ts.min.js public/assets/auth-oidc-pkce"

Running npm run build should then suffice to bundle the config and also copy the callback file.