@lucasroll62/nuxt3-auth

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

1. 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

2. 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
                }
            }
        },
    }
}

Oauth2

Oauth2 now has client window authentication thanks to this pull request: https://github.com/nuxt-community/auth-module/pull/1746

Properties have been changed to:

clientWindow

• Type: Boolean
• Default: false

Enable/disable the use of a popup for client authentication.

clientWidth

• Type: Number
• Default: 400

The width of the client window.

clientHieght

• Type: Number
• Default: 600

The width of the client window.

Aliases

Available aliases to use within nuxt

• #auth/runtime
• #auth/utils
• #auth/providers