Installation
Quick Start
You can start a fresh new project with:
pnpm add @fixers/nuxt-lucia-auth
Add @fixers/nuxt-lucia-auth
as a module in your nuxt.config
file:
export default defineNuxtConfig({
modules: [
'@fixers/nuxt-lucia-auth'
]
})
And that's it! You can now use the auth
module in your Nuxt app.
By default, the module comes with a global middleware that will redirect users to the login page if they are not authenticated.
The login page is /login
by default, but you can change it in the auth.pages
configuration.
The module also come with built in helpers to login with Google and GitHub or even email and password.
Environment variables
Environment variables for OAuth providers are prefixed with NUXT_OAUTH_
.
To add the Google OAuth keys, you can add the following to your .env
file:
NUXT_OAUTH_GOOGLE_CLIENT_ID=""
NUXT_OAUTH_GOOGLE_CLIENT_SECRET=""
You can find your Google OAuth keys in the Google Cloud Console.
For other OAuth providers, you can add the keys in the same way:
NUXT_OAUTH_GITHUB_CLIENT_ID=""
NUXT_OAUTH_GITHUB_CLIENT_SECRET=""
Note, you are not required to use this configuration, in the advanced usage section we'll cover how to setup pretty much everything manually.
Configuration
You can configure the module in your nuxt.config
file:
export default defineNuxtConfig({
auth: {
pages: {
login: '/login',
},
middleware: {
enabled: true,
global: true,
allow404WithoutAuth: false,
},
},
})
The configuration is quite simple.
The pages
object allows you to configure the login page.
This is the page your user will be redirected to by default if they are not authenticated. You are free to skip this setting if you are not using the built in middleware.
The middleware
object allows you to configure the middleware.
The global
option will install the auth middleware globally thus protecting all your routes.
You need to manually disable the middleware for routes you want to be public.
<script setup>
definePageMeta({
auth: false
})
</script>
To fully turn off the middleware, set enabled
to false
.