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

Copyright © 2024