Getting Started

Installation

Get started with Nuxt Auth

Quick Start

You can start a fresh new project with:

pnpm
pnpm add @fixers/nuxt-lucia-auth

Add @fixers/nuxt-lucia-auth as a module in your nuxt.config file:

nuxt.config.ts
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:

.env
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:

.env
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:

nuxt.config.ts
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.

pages/index.vue
<script setup>
definePageMeta({
  auth: false
})
</script>

To fully turn off the middleware, set enabled to false.


Copyright © 2024