Repository files navigation

Authentication built for Nuxt 3! Easily add authentication via OAuth providers, credentials or Email Magic URLs!

npx nuxi@latest module add sidebase-auth

npm i -D @sidebase/nuxt-authpnpm i -D @sidebase/nuxt-authyarn add --dev @sidebase/nuxt-auth

exportdefaultdefineNuxtConfig({modules:['@sidebase/nuxt-auth']})

Then visit theQuick Start documentation to continue the configuration of your app!

@sidebase/nuxt-auth is a library with the goal of supporting authentication for any universal Nuxt 3 application. At the moment three providers are supported:

• authjs: for non-static apps that want to useAuth.js / NextAuth.js to offer the reliability & convenience of a 23k star library to the Nuxt 3 ecosystem with a native developer experience (DX)
• local: for static pages that rely on an external backend with a credential flow for authentication. The Local Provider also supports refresh tokens sincev0.9.0. Read morehere.

You can find a full list of our features, as well as which provider supports each featureon our docs.

• OAuth (e.g., Github, Google, Twitter, Azure, ...)
• Custom OAuth (write it yourself)
• Credentials (password + username)
• Email Magic URLs

• Session fetching withstatus,data andlastRefreshedAt
• Methods togetSession,getCsrfToken,getProviders,signIn andsignOut
• Full TypeScript support for all methods and properties

• Application-side middleware protection for thefull application orspecific pages
• Server-sidemiddleware andendpoint protection

• Pre-built andcustomizable refresh behaviour
  • Refresh the session periodically
  • Refresh the session on tab-refocus
  • One time session fetch on page load, afterwards for specific actions (e.g., on navigation)
• Completly configure the Refresh behaviour of your application using theRefreshHandler

• Session access usinggetServerSession
• JWT Token access usinggetToken
• Server-sidemiddleware andendpoint protection

Want to get a preview of what@sidebase/nuxt-auth has to offer? Visit thenuxt-auth demo page here. Peak into thedemo source-code here.

This project usespnpm for development.

• Runpnpm dev:prepare to generate type stubs.
• Usepnpm dev inside amodule playground directory to start a playground in development mode.
• Runpnpm lint to run eslint
• Runpnpm typecheck to run typescheck via tsc
• Runpnpm publish --access public to publish
• Runpnpm publish --access public --tag next to publish a pre-release

This module also has it's own playground:

> git clone https://github.com/sidebase/nuxt-auth>cd nuxt-auth>cd playground-[PROVIDER]> pnpm i> pnpm dev:prepare> pnpm dev

• Runpnpm dev:prepare to generate type stubs.
• Runpnpm dev to start the playground.
• Runpnpm test:e2e to run the end-to-end tests.
• Runpnpm lint to run eslint
• Runpnpm typecheck to run typescheck via tsc

We have one playground per provider:

• authjs
• local

To test static Nuxt 3 apps we want to run a static frontend and a separate backend that will take over authentication:

1. playground-local/nuxt.config.ts: AddbaseURL: 'http://localhost:3001' to theauth-config
2. Start the static frontend:

   cd playground-localpnpm generatepnpm start

3. Start the authentication backend (we use a second instance of the same nuxt3 app):

   cd playground-localpnpm dev# A second Nuxt app should now be running on http://localhost:3001.# We use this purely for authentication

4. Visithttp://localhost:3000 -> this should open the static application. Performing any auth-related actions, the app should send requests to the backend running on port3001

Thank you to everyone who has contributed to this project by writing issues or opening pull requests. Your efforts help us improve and grow. If you are interested in contributing, please take a moment to review ourContributing Guidelines. We appreciate your support and look forward to your contributions!

@sidebase/nuxt-auth is supported by all of our amazing contributors and theNuxt 3 team!