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.

Setup

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

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

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). It also doesn't need pinia it will use nuxt's useState by default.

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

Documentation

Read Documentation

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.

`stores.state.namespace`

Type: String
Default: auth

This is the namespace to use for nuxt useState.

`stores.pinia.enabled`

Type: Boolean
Default: false

Enable this option to use the pinia store, bey default this is disabled and nuxt's useState is used instead.

`stores.pinia.namespace`

Type: String
Default: auth

This is the namespace to use for the pinia store.

`stores.local.enabled`

Type: Boolean
Default: true

Enable this option to use the localStorage store.

`stores.local.prefix`

Type: String
Default: auth.

This sets the localStorage prefix.

`stores.session.enabled`

Type: Boolean
Default: true

Enable this option to use the sessionStorage store.

`stores.session.prefix`

Type: String
Default: auth.

Similar to the localstorage option, this is the prefix for session storage.

`stores.cookie.enabled`

Type: Boolean
Default: true

Enable this option to use the cookie storage.

`stores.cookie.prefix`

Type: String
Default: auth.

Similar to the localstorage option, this is the prefix for the cookie storage.

`stores.cookie.options`

Type: Object
Default: { path: '/' }

The default cookie storage options.

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

`tokenValidationInterval`

Type: Boolean | Number
Default: false

This is experimental. If set to true, default interval is 1000ms, otherwise set time in milliseconds. This is how often the module with attempt to validate the token for expiry.

`resetOnResponseError`

Type: Boolean | Function
Default: false

When enabled it will reset when there's a 401 error in any of the responses. You are able to turn this into a function to handle this yourself:

auth: {
    //... module options
    resetOnResponseError: (error, auth, scheme) => {
       if (error.response.status === 401) {
           scheme.reset?.()
           auth.redirect('login')
       }
   },
}

TypeScript (2.6.0+)

The user information can be edited like so for TypeScript:

declare module '@nuxt-alt/auth' {
    interface UserInfo {
        email: string
        name: string
    }
}

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.

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