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.

```ts
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 💚