Nuxt OpenID-Connect

OpenID-Connect(OIDC) integration module for nuxt 3.0. (V0.4.0+ support nuxt 3.0.0-stable.)

Features

An Nuxt 3 module (Note: nuxt 2.x not supported).
OIDC integration ( implemetation based on openid-client ).
State Management, shared login user info.
OIDC provider config.
Encrypt userInfo cookie.
Support browser localStorage store userInfo, which keep user auth info after page refresh. Similar like this.

Why use this module

The official auth module doesn't support Nuxt 3.0 yet.
nuxt-oidc also not support Nuxt 3.0.

How to use this module

Add to a project

npx nuxi@latest module add nuxt-openid-connect

Then, add nuxt-openid-connect module to nuxt.config.ts and change to your configs (openidConnect):

export default defineNuxtConfig({
  // runtime config for nuxt-openid-connect example -- you can use env variables see .env.example
  runtimeConfig: {
    openidConnect: {
      op: {
        issuer: '',
        clientId: '',
        clientSecret: '',
        callbackUrl: '',
      },
      config: {
        cookieFlags: {
          access_token: {
            httpOnly: true,
            secure: false,
          }
        }
      }
    },
  },
  
  // add nuxt-openid-connect module here... 
  modules: [
    'nuxt-openid-connect'
  ],

  // configuration for nuxt-openid-connect
  openidConnect: {
    addPlugin: true,
    op: {
      issuer: 'your_issuer_value',
      clientId: 'your_issuer_clientid',
      clientSecret: 'secret',
      callbackUrl: '',   // deprecated from 0.8.0
      scope: [
        'email',
        'profile',
        'address'
      ]
    },
    config: {
      debug: false, // optional, default is false
      response_type: 'id_token', // or 'code'
      secret: 'oidc._sessionid',
      isCookieUserInfo: false, // whether save userinfo into cookie.
      cookie: { loginName: '' },
      cookiePrefix: 'oidc._',
      cookieEncrypt: true,
      cookieEncryptKey: 'bfnuxt9c2470cb477d907b1e0917oidc', // 32
      cookieEncryptIV: 'ab83667c72eec9e4', // 16
      cookieEncryptALGO: 'aes-256-cbc',
      cookieMaxAge: 24 * 60 * 60, //  default one day
      cookieFlags: { // default is empty 
        access_token: { 
          httpOnly: true,
          secure: false,
        }
      }
    }
  }
})

Useage in setup.

const oidc = useOidc()

Here is an usage example.

💻 Development

Clone repository
Install dependencies using yarn install
Run yarn dev:prepare to generate type stubs.
Use yarn run to start playground in development mode.

License

MIT - Made with 💚