Getting Started
Installation
Get started with nuxt-oidc-auth
Quick Start
Add nuxt-oidc-auth
dependency to your project
Using nuxi
pnpm dlx nuxi@latest module add nuxt-oidc-auth
Or manually installing
pnpm add nuxt-oidc-auth
Configure provider
Configure the required properties for one of the predefined providers in your nuxt.config.ts under oidc.providers
and save the provider secrets in your .env file
.
Example for GitHub:
nuxt.config.ts
github: {
redirectUri: 'http://localhost:3000/auth/github/callback',
clientId: '',
clientSecret: '',
filterUserInfo: ['login', 'id', 'avatar_url', 'name', 'email'],
},
.env
NUXT_OIDC_PROVIDERS_GITHUB_CLIENT_SECRET=CLIENT_SECRET
NUXT_OIDC_PROVIDERS_GITHUB_CLIENT_ID=CLIENT_ID
You should also consider setting the nuxt-oidc-auth secrets to persist session data across restarts (every code change in local development).
.env
# .env
NUXT_OIDC_TOKEN_KEY=base64_encoded_key
NUXT_OIDC_SESSION_SECRET=48_characters_random_string
NUXT_OIDC_AUTH_SESSION_SECRET=48_characters_random_string
That's it! You can now add authentication with a predifined provider or a custom OIDC provider to your Nuxt app ✨
Play on StackBlitz