OpenID-Connect(OIDC) integration module for nuxt 3.0. (V0.4.0+ support nuxt 3.0.0-stable.)
- 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.
- 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.
- Clone repository
- Install dependencies using
yarn install
- Run
yarn dev:prepare
to generate type stubs. - Use
yarn run
to start playground in development mode.
MIT - Made with 💚