nuxt-auth-pkce

Auth PKCE

My new Nuxt module for doing amazing things.

Setup

1. Add the nuxt-auth-pkce dependency to your Nuxt.js project:

npm install nuxt-auth-pkce
# or
yarn add nuxt-auth-pkce
# or
pnpm i nuxt-auth-pkce

2. Add nuxt-auth-pkce to the modules section of nuxt.config.js:

{
  modules: [
    'nuxt-auth-pkce',
  ],
  authPkce: {
    // Options
  }
}

3. Register your application in Azure AD and configure it as a SPA. Make sure to add the redirect URI http://localhost:3000/auth/callback to the app registration - as well as the URL you will be using in production.

4. Create a .env file in the root of your project and add the following:

NUXT_PUBLIC_AUTH_PKCE_CLIENT_ID="your-client-id"
NUXT_PUBLIC_AUTH_PKCE_TENANT_ID="your-tenant-id"

5. Use the AuthGate component in your application

<template>
  <AuthGate auto-login>
    <div>
      <h1>My secret content</h1>
    </div>
  </AuthGate>
</template>

• ✨  Release Notes

Features

• Builtin MSAL Authentication using PKCE flow
• fetchAuth helper for authenticated requests
• $fetchAuth method for authenticated requests

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-auth-pkce

That's it! You can now use My Module in your Nuxt app ✨

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release