Nuxt OpenID

This is a fork from nuxt-openid-connect developed by aborn.

OpenID-Connect (OIDC) integration module for Nuxt

📋 Features

• A Nuxt 3 module (Note: Nuxt 2 is 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.

⚙️ Configuration

Add to project

npx nuxi module add nuxt-openid

Or manually

pnpm add nuxt-openid
# Or
npm install --save nuxt-openid

Edit nuxt.config.ts

export default defineNuxtConfig({
  // [...]
  modules: [
    // [...]
    'nuxt-openid',
  ],
  // [...]
  openidConnect: {
    op: {
      issuer: '',
      clientId: '',
      clientSecret: '',
      callbackUrl: '',
      scope: [],
    },
    config: {
      debug: false,
      response_type: 'code',
      secret: 'oidc._sessionid',
      isCookieUserInfo: false,
      cookie: { loginName: '' },
      cookiePrefix: 'oidc._',
      cookieEncrypt: true,
      cookieEncryptKey: 'bfnuxt9c2470cb477d907b1e0917oidc',
      cookieEncryptIV: 'ab83667c72eec9e4',
      cookieEncryptALGO: 'aes-256-cbc',
      cookieMaxAge: 24 * 60 * 60,
      cookieFlags: {
        access_token: {
          httpOnly: true,
          secure: true,
          sameSite: 'Lax',
        },
        refresh_token: {
          httpOnly: true,
          secure: true,
          sameSite: 'Lax',
        },
      },
    }
  }
  // [...]
});

👩‍💻 Usage

const oidc = useOidc();

// Invoke login page then redirect to "/profile", override 'redirectUrl' | 'NUXT_OPENID_CONNECT_OP_REDIRECT_URL'
oidc.login('/profile');

// End session and redirect to "/homepage", override 'redirectLogoutUrl' | 'NUXT_OPENID_CONNECT_OP_REDIRECT_LOGOUT_URL'
oidc.logout('/homepage');

// Refresh user informations
oidc.fetchUser();

// Return user information
oidc.user

// Return boolean of session status
oidc.isLoggedIn

📚 Documentation

Name	type	Default	Description
Op
issuer	string	''	Domain base URL including realm name
clientId	string	''	Client identifier registered with the identity provider, might be different from realm name
clientSecret	string	''	Client secret
callbackUrl	string	''	Optional, for custom callback after login
redirectUrl	string	'/'	For custom redirection after login
redirectLogoutUrl	string	'/'	For custom redirection after logout
scope	string[]	[]	Used during authentication to authorize access to a user's details
Config
debug	boolean	false	Display verbose log on console
secret	string	'oidc._sessionid'	Cookie's name for sessionid
isCookieUserInfo	boolean	false	For saving user info into cookie
cookie	object	{}	Add custom info in user info cookie
cookiePrefix	string	'oidc._'	Cookies and LocalStorage prefix
cookieEncrypt	boolean	true	Enable cookie encryption for user info cookie
cookieEncryptKey	string	'bfnuxt9c2470cb477d907b1e0917oidc'	32-bits
cookieEncryptIV	string	'ab83667c72eec9e4'	16-bits
cookieEncryptALGO	string	'aes-256-cbc'	Algorithm encryption
cookieMaxAge	number	24 * 60 * 60	By default, set to one day
response_type	string	'id_token'	Response mode settings, more info here
cookieFlags	object	{}	Settings attributes for access_token and refresh_token, example below 👇

🍪 Cookie Flags

cookieFlags: {
  access_token: {
    httpOnly: true | false,
    secure: true | false,
    sameSite: 'None' | 'Lax' | 'Strict',
  },
  refresh_token: {
    httpOnly: true | false,
    secure: true | false,
    sameSite: 'None' | 'Lax' | 'Strict',
  },
},

🔗 httpOnly 🔗 secure 🔗 sameSite

💾 .env vars

It's preferable to use environment variables for runtime config with Nuxt because it overrides nuxt.config.ts. For production, nuxt is generally already built with Nuxt config, and it's not possible to change value. Using runtime config with .env vars allow this

NUXT_OPENID_CONNECT_OP_ISSUER=https://issuer.example.com/realms/master
NUXT_OPENID_CONNECT_OP_CLIENT_ID=admin
NUXT_OPENID_CONNECT_OP_CLIENT_SECRET=1dOuDoUdIdAdAdA2

NUXT_OPENID_CONNECT_OP_CALLBACK_URL=https://nuxt.example.com/oidc/callback

NUXT_OPENID_CONNECT_OP_REDIRECT_URL=https://nuxt.example.com/profile
NUXT_OPENID_CONNECT_OP_REDIRECT_LOGOUT_URL=https://nuxt.example.com/homepage

NUXT_OPENID_CONNECT_CONFIG_DEBUG=true

🔗 Nuxt runtime-config

💻 Development

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

©️ License

MIT - Made with 💚