Quick Start
After installing the package, add the package to your nuxt.config.ts
:
export default defineNuxtConfig({ modules: ['@sidebase/nuxt-auth'],})
Then create the authentication handler (NuxtAuthHandler
) that will 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' }) ]})
That's it! You can now use all user-related functionality, for example:
Prior to v0.5.0
useAuth()
was called useSession()
.Application side
// 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
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.