@lucasroll62/nuxt3-auth NPM

Alternative Auth module for Nuxt

Info

This module is meant as an alternative to @nuxtjs/auth, except this is for nuxt3 only with no backwards compatibility support. This will only work with pinia, I had originally had it work with vuex, but since that is in maintenece mode, I decided to switch to pinia. If you find any bugs please do tell me, I'm still working on this.

Setup

Add @nuxt-alt/auth @pinia/nuxt pinia and @nuxt-alt/http dependency to your project

yarn add @nuxt-alt/auth @nuxt-alt/http @pinia/nuxt pinia

Add @nuxt-alt/auth and @pinia/nuxt to the modules section of nuxt.config.ts

Note: you dont need to specify @nuxt-alt/http, it will automatically be added but if you want to manually add it, make sure it is below the auth module (and above the proxy module if you are using it)

export default defineNuxtConfig({
    modules: [
        '@nuxt-alt/auth',
        '@pinia/nuxt'
    ],
    auth: {
        /* module options */
    }
});

Changes

The module now uses '@nuxt-alt/http' to function, that module extends ohmyfetch. Please note that if you were using data to post data, you now need to use body since this is what ohmyfetch uses. If you intend to use ssr, please consider using the @nuxt-alt/proxy module.

Composable

A useAuth() composable is availale to use to access the auth methods.

Options

Most of the options are taken directly from the @nuxtjs/auth module. In addition there are some extra options available.

`globalMiddleware`

Type: Boolean
Default: false

Enables/disables the middleware to be used globally.

`enableMiddleware`

Type: Boolean
Default: true

Enables/disables the built-in middleware.

`pinia.namespace`

Type: String
Default: auth

Changed from vuex to pinia, this is the namespace to use for the pinia store.

`sessionStorage`

Type: String | False
Default: auth.

Similar to the localstorage option, there is a session storage options available for you to use.

`redirectStrategy`

Type: query | storage
Default: storage

The type of redirection strategy you want to use, storage utilizng localStorage for redirects, query utilizing the route query parameters.

Tokens (Types)

In addition to Auth Tokens;

By default the $auth.strategy getter uses the Scheme type which does not have token or refreshToken property types. To help with this, a $auth.refreshStrategy and a $auth.tokenStrategy getter have been added for typing. They all do the same thing, this is just meant for type hinting.

Cookie-based auth

The cookie scheme has been decoupled from the local scheme as it does not utitlize tokens, rather it it uses cookies.

There is a new cookie.server property, this indicates that the cookie we will be looking for will be set upon login otherwise we will be looking at a client/browser cookie. There has also been 2 user properties one for the client/browser and one for the server. An example config looks like this:

auth: {
    strategies: {
        localStorage: false,
        cookie: {
            cookie: {
                server: true
            },
            endpoints: {
                login: { 
                    url: '/api/user/login', 
                    method: 'post' 
                },
                user: { 
                    url: '/api/user/me', 
                    method: 'get' 
                }
            },
            user: {
                property: {
                    client: false,
                    server: false
                }
            }
        },
    }
}