Integrating with Nuxt.js

This guide explains how to integrate OAuth2 authentication into a Nuxt.js 3 application using AuthAction with @sidebase/nuxt-auth.

Example Repository: For a complete working example, check out our example repository.

Overview

This application showcases how to configure and handle authentication using AuthAction’s OAuth2 service. The setup includes:

• OAuth2 login flow using @sidebase/nuxt-auth with AuthAction as the OIDC provider
• Secure JWT-based session management
• Protected pages using Nuxt route middleware
• Logout with AuthAction’s OIDC logout flow

Prerequisites

Before using this application, ensure you have:

1. Node.js 18+: Download from nodejs.org
2. AuthAction OAuth2 credentials: You will need the tenantDomain, clientId, clientSecret, and configured redirect URIs from your AuthAction setup.

Installation

1. Clone the repository:

   git clone git@github.com:authaction/authaction-nuxtjs-example.git
   cd authaction-nuxtjs-example

2. Install dependencies:

   npm install

3. Configure your AuthAction credentials:

   Create a .env file in the root of your project:

   AUTHACTION_TENANT_DOMAIN=your-authaction-tenant-domain
   AUTHACTION_CLIENT_ID=your-authaction-client-id
   AUTHACTION_CLIENT_SECRET=your-authaction-client-secret
   NUXT_SECRET=your-secure-random-string
   NUXT_AUTH_ORIGIN=http://localhost:3000

4. Configure redirect URIs in the AuthAction dashboard:

   • Login redirect URI: http://localhost:3000/api/auth/callback/authaction
   • Logout redirect URI: http://localhost:3000

Usage

1. Start the development server:

   npm run dev

   This will start the application on http://localhost:3000.

2. Testing Authentication:

   • Navigate to http://localhost:3000 and click Login with AuthAction.
   • After login you are redirected back with your name and email shown.
   • Navigate to /dashboard — unauthenticated users are redirected to login.
   • Click Logout to end the session.

Code Explanation

Auth Handler

server/api/auth/[...].ts — Configures @sidebase/nuxt-auth with AuthAction as an OIDC provider using the wellKnown discovery endpoint. The jwt callback stores the access token and the session callback exposes it to the client.

Route Middleware

middleware/auth.ts — Redirects unauthenticated users to /login. Applied per-page with definePageMeta({ middleware: 'auth' }).

Home Page

pages/index.vue — Uses the useAuth() composable to access session state and call signIn('authaction') / signOut().

Protected Page

pages/dashboard.vue — Declares middleware: 'auth' so only authenticated users can access it.

Common Issues

• Redirects not working: Verify the callback URL in AuthAction matches exactly: http://localhost:3000/api/auth/callback/authaction
• Session issues: Ensure NUXT_SECRET is set to a long, random string
• Network errors: Verify your app can reach https://{AUTHACTION_TENANT_DOMAIN}/.well-known/openid-configuration