https://github.com/aborn/nuxt-openid-connect

OpenID-Connect(OIDC) integration module for nuxt 3.0.
https://github.com/aborn/nuxt-openid-connect

module nuxt nuxt3 oidc

Last synced: 19 days ago
JSON representation

OpenID-Connect(OIDC) integration module for nuxt 3.0.

• Host: GitHub
• URL: https://github.com/aborn/nuxt-openid-connect
• Owner: aborn
• Created: 2022-06-08T13:15:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-28T12:04:49.000Z (7 months ago)
• Last Synced: 2024-12-23T11:18:04.182Z (26 days ago)
• Topics: module, nuxt, nuxt3, oidc
• Language: TypeScript
• Homepage:
• Size: 958 KB
• Stars: 36
• Watchers: 3
• Forks: 16
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nuxt OpenID-Connect

[![npm version](https://img.shields.io/npm/v/nuxt-openid-connect.svg?style=flat)](https://www.npmjs.com/package/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**](https://v3.nuxtjs.org) module (Note: nuxt 2.x not supported).

- OIDC integration ( implemetation based on [openid-client](https://github.com/panva/node-openid-client) ).

- [State Management](https://v3.nuxtjs.org/guide/features/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](https://stackoverflow.com/questions/68174642/how-to-keep-user-authenticated-after-refreshing-the-page-in-nuxtjs).

## Why use this module 

- The official [auth](https://github.com/nuxt-community/auth-module/issues/1719) module doesn't support Nuxt 3.0 yet.

- [nuxt-oidc](https://github.com/deko2369/nuxt-oidc) also not support Nuxt 3.0.

## How to use this module

- Add to a project

```bash

npx nuxi@latest module add nuxt-openid-connect

```

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

```ts

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](https://github.com/aborn/nuxt-openid-connect/blob/main/playground/pages/index.vue).

## 💻 Development

- Clone repository

- Install dependencies using `yarn install`

- Run `yarn dev:prepare` to generate type stubs.

- Use `yarn run` to start [playground](./playground) in development mode.

## License

[MIT](./LICENSE) - Made with 💚