@plenexy/nuxt-sanctum v2.3.0
Nuxt Sanctum
So far, only the token authorization scheme is available. Please note that in this scheme, only the backend itself sets a cookie with the main token and a refresh token.
Installation
yarn add @plenexy/nuxt-sanctum @nuxtjs-alt/axios axios @pinia/nuxt pinia
export default defineNuxtConfig({
modules: [
"@plenexy/nuxt-sanctum",
"@nuxtjs-alt/axios",
"@pinia/nuxt"
],
axios: {
credentials: true,
baseURL: process.env.API_BASE_URL,
},
sanctum: {
baseURL: process.env.AUTH_BASE_URL, // optional
globalMiddleware: false,
redirects: {
afterLogin: "/",
afterLogout: "/auth/login",
toLogin: "/auth/login",
home: "/",
},
tokenScheme: {
endpoints: {
login: {
url: "/api/auth/users/login",
method: "post",
},
logout: {
url: "/api/auth/logout",
method: "post",
},
user: {
url: "/api/auth/me",
method: "post",
},
refresh: {
url: "/api/auth/refresh-tokens",
method: "post",
},
},
user: {
property: false,
},
token: {
property: "access_token",
headerName: "Authorization",
expiredAtProperty: "expired_at",
},
refreshToken: {
property: "refresh_token",
},
},
},
});
interface ModuleOptions {
baseURL?: string;
globalMiddleware?: boolean;
pinia?: {
namespace?: string;
};
redirects: {
home: string;
toLogin: string;
afterLogin: string;
afterLogout: string;
},
tokenScheme?: {
endpoints: {
login: AxiosRequestConfig;
user: AxiosRequestConfig;
refresh?: AxiosRequestConfig | false;
logout?: AxiosRequestConfig | false;
},
user: {
property?: string | false;
},
token: {
prefix?: string | false;
property: string;
headerName?: string;
expiredAtProperty?: string | false;
},
refreshToken?: {
property: string | false;
}
}
}
{
globalMiddleware: true,
fingerprint: {
enabled: true,
property: 'fingerprint'
},
pinia: {
namespace: 'auth'
},
redirects: {
home: '/',
toLogin: '/auth/login',
afterLogin: '/',
afterLogout: '/'
}
}
Example
<template>
<div v-if="!$auth.loggedIn">
<form @submit.prevent="onLogin">
<input v-model="form.email" placeholder="Type your email">
<input v-model="form.password" placeholder="Type your password" type="password">
<button>Login</button>
</form>
</div>
<div v-else>
<p>Hello, {{ $auth.user.full_name }}</p>
<p>Maybe you want <a @click.prevent="onLogout" href="/logout">logout</a>?</p>
</div>
</template>
<script setup>
const auth = useAuth();
const form = ref({ email: '', password: '' });
// The user will then be redirected to the page specified in the redirects.afterLogin parameter in module configuration
const onLogin = async () => await auth.login(form.value);
// The user will then be redirected to the page specified in the redirects.afterLogout parameter in module configuration
const onLogout = async () => await auth.logout();
</script>
Middleware
Example of a page accessible only to an unauthorized user if you have global middleware enabled:
<script setup>
definePageMeta({
auth: "guest" // or auth: false
});
</script>
Example of a page accessible only to an authorized user if you have global middleware disabled:
<script setup>
definePageMeta({
middleware: "auth"
});
</script>
Fingerprint
Nuxt-sanctum generates a unique client ID based on its IP address and user-agent. It can be used to implement multiple authorization sessions and cancel them at the user's choice (for example, to view active sessions).
You can disable the generation and sending of the parameter to your endpoints or change the name of the parameter using the appropriate configuration (fingerprint.enabled and fingerprint.property).
Module Dependencies
- @nuxtjs-alt/axios
- @pinia/nuxt
Development
- Run
yarn dev:prepare
to generate type stubs. - Use
yarn dev
to start playground in development mode.
License
MIT License - Copyright (c) SKYROSES & Plenexy
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago