Authentication support for Nuxt 3
nuxt-simple-auth is a feature-rich open source authentication module for Nuxt3 applications.
npm i nuxt-simple-auth pinia @pinia/nuxt
yarn add nuxt-simple-auth pinia @pinia/nuxt
Then, add nuxt-simple-auth to the modules section of nuxt.config.js:
nuxt.config.js
{
modules: [
'nuxt-simple-auth',
'@pinia/nuxt'
],
auth: {
}
},
strategies: {
local: {
redirect: {
logout: "/logout"
},
token: {
property: 'access_token',
},
user: {
property: 'profile',
},
endpoints: {
login: {url: '/oauth/token', method: 'post'},
user: {url: '/api/profile', method: 'get'},
"2fa": {url: '/api/token_2fa', method: 'post'},
logout: false,
},
},
}
prefix - Default token prefix used in constructing a key for token storage.
options - Additional cookie options, passed to
cookie
path - path where the cookie is visible. The default is '/'.
expires - can be used to specify the lifetime of the cookie in Number of Days or Specific Date. The default is
session only.
maxAge - Specifies the number (in seconds) that will be the Max-Age value (preferably expired)
domain - domain (and by extension subdomain(s)) where the cookie is visible. The default is domain and all
subdomains.
secure - defines whether the cookie requires a secure protocol (https). Default is false, should be set to true if
possible.
Note: By default, the prefix on localhost is set to "auth."
__Secure- prefix: Cookies with names starting with __Secure- (dash is part of the prefix) must be set with the
secure flag from a secure page (HTTPS).
__Host- prefix: Cookies with names starting with __Host- must be set with the secure flag, must be from a secure
page (HTTPS), must not have a domain specified (and therefore, are not sent to subdomains), and the path must be /.
cookie: {
options: {
httpOnly: true,
secure: true,
sameSite: 'Lax',
priority: 'high',
//maxAge: 24 * 60 * 60 * 1000,
},
prefix: '__Secure-auth.',
}
Two-factor identification The 2fa token will have all settings already defined in the cookie default: false
"2fa": true,
definePageMeta({
middleware: ['auth', '_2fa']
});
**nuxt.config.js **
secret:{
strategyName:{
grant_type: 'password',
client_id: 0,
client_secret: '',
}
}
public: {
apiBase: '/api',
baseURL: process.env.baseURL,
}
loginWith(strategyName, ...args)
Return: Promise
Set the current strategy as strategyName and attempt to log in. The usage may vary based on the current strategy.
const {$auth} = useNuxtApp()
$auth.loginWith('local', data)
.then(response => {
})
logout(strategyName)
Set the current strategy as strategyName and logout, ensuring the destruction of Pinia's cookies and state.
const {$auth} = useNuxtApp()
$auth.logout(strategyName)
_2fa(strategyName, ...args)
Return: Promise
Set the current strategy as strategyName and attempt to validate the code with a simplified two-factor authentication ( 2FA) and the creation of cookies with HttpOnly. The utilization of these features varies based on the current strategy.
$auth._2fa('local', data).then(response => {
})
const {data, pending, error, refresh} = useFetch(url, {
$fetch: useRequestFetch(),
headers: $auth.$headers,
})
$auth.$headers.set('name', 'value ')
$auth.$headers.get('name', 'value ')