Quick Start

After following the installation-steps, add @sidebase/nuxt-auth to your nuxt.config.ts and specify the provider-type you want to use:

export default defineNuxtConfig({    modules: ['@sidebase/nuxt-auth'],    auth: {        provider: {            type: 'authjs'        }    }})

export default defineNuxtConfig({    modules: ['@sidebase/nuxt-auth'],    auth: {        provider: {            type: 'local'        }    }})

Then continue with the provider-specific steps below.

Provider-specific Steps

Provider: authjs

After the nuxt.config.ts setup from above you have to create the authentication handler (NuxtAuthHandler) that will setup the backend and expose the API endpoints for handling all authentication-related requests and add at least one authentication provider:

// file: ~/server/api/auth/[...].tsimport { NuxtAuthHandler } from '#auth'import GithubProvider from 'next-auth/providers/github'export default NuxtAuthHandler({    providers: [        // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point        GithubProvider.default({           clientId: 'enter-your-client-id-here',           clientSecret: 'enter-your-client-secret-here'        })    ]})

Provider: local

The local provider does not require any additional steps, as it relies on an already existing backend. By default, the local provider will try to reach this backend using the following default-configuration:

{    baseURL: '/api/auth',    endpoints: {        signIn: { path: '/login', method: 'post' },        signOut: { path: '/logout', method: 'post' },        signUp: { path: '/register', method: 'post' },        getSession: { path: '/session', method: 'get' }    }}

So when you call the signIn method, the endpoint /api/auth/login will be hit with the username and password you pass as a body-payload. You likely have to modify these parameters to fit to your backend - you can adjust these parameters in your nuxt.config.ts using the options specified here.

Note: The backend can also be in the same Nuxt 3 application, e.g., have a look at this example in the nuxt-auth repository:

• full nuxt app
  • its backend
  • its nuxt.config.ts

The backend musst accept a request with a body like:

{    username: 'bernd@sidebase.io',    password: 'hunter2'}

and return a token that can be used to authenticate future requests in the response body, e.g., like:

{    tokens: {        accessToken: 'eyBlaBlub'    }}

Finishing up

That's it! You can now use all user-related functionality, for example:

// file: e.g ~/pages/login.vueconst { status, data, signIn, signOut } = useAuth()status.value // Session status: `unauthenticated`, `loading`, `authenticated`data.value // Session data, e.g., expiration, user.email, ...await signIn() // Sign in the userawait signOut() // Sign out the user

// file: e.g: ~/server/api/session.get.tsimport { getServerSession } from '#auth'export default eventHandler(async (event) => {   const session = await getServerSession(event)   if (!session) {      return { status: 'unauthenticated!' }   }   return { status: 'authenticated!', text: 'im protected by an in-endpoint check', session }})

To learn how to protect pages read about the application-side usage, to learn how to protect server-routes and API endpoints read about the server-side usage. You can also find more provider-specific information on these pages.