Giter VIP home page Giter VIP logo

nuxt-openid-connect's Introduction

Nuxt OpenID-Connect

npm version

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
yarn 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: '',   // optional
      scope: [
        'email',
        'profile',
        'address'
      ]
    },
    config: {
      debug: false, // optional, default is false
      response_type: 'id_token', // or 'code'
      secret: 'oidc._sessionid',
      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,
        }
      }
    }
  }
})

Here is an using example.

๐Ÿ’ป Development

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

License

MIT - Made with ๐Ÿ’š

nuxt-openid-connect's People

Contributors

aborn avatar khaledalmana avatar

Stargazers

 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.