Introduction
0.6-docs if you want to get get started with the local-provider or have a static Nuxt application.nuxt-auth is an open source Nuxt module that provides authentication for non-static Nuxt 3 applications.
The easiest way to get started with nuxt-auth is using the sidebase Merino stack:
npm create sidebase@latestThis will create a Nuxt 3 project with nuxt-auth already setup & working.
nuxt-auth supports three main types of authentication out of the box:
- OAuth: Authentication via third-party OAuth providers like Google, Azure, Github, Discord, ...
- Credentials: Authentication via a username and password that the user supplies and custom logic that you implement yourself
- Emails: Authentication via "Magic URL" emails, like Slack or Notion
nuxt-auth is able to provide the above and more (like database adapters, callback hooks, ...) by wrapping NextAuth.js under the hood. This gives the reliability & convenience of a >12.000 github star library to the Nuxt 3 ecosystem with a native nuxt developer experience (DX). Wrapping NextAuth.js has the second advantage that many OAuth providers, database adapters, callbacks and more are supported out-of-the-box. This means that whenever you want to achieve something within the NuxtAuthHandler you can use all NextAuth guides and documentation to do so - the authentication handlers behave identical.
nuxt-auth also provides Nuxt 3 specific features like a convenient application-side composable to login, logout, access user-authentication data or an authentication middleware and plugin that take care of managing the user authentication lifecycle by fetching authentication data on initial load, refreshing the user authentication on re-focusing the tab and more.
Show me the code!
Authentication providers
- OAuth (e.g., Github, Google, Twitter, Azure, ...)
- Custom OAuth (write it yourself)
- Credentials (password + username)
- Email Magic URLs
Application Side Session Management
useAuth() was called useSession().- composable
const { signIn, signOut, status, data, lastRefreshedAt, ... } = useAuth() - Auto-refresh the session periodically
- Auto-refresh the session on tab-refocus
- Efficient session fetching: One time on page load, afterwards for specific actions (e.g., on navigation)
- Full typescript support for all methods and properties
Application Protection
- Application-side middleware protection either for the full application or specific pages
- Server-side middleware and endpoint protection
REST API
GET /signin,POST /signin/:provider,GET/POST /callback/:provider,GET /signout,POST /signout,GET /session,GET /csrf,GET /providers