auth
auth copied to clipboard
nuxt-alt
I get a TypeError (TypeError: this.options.stores is undefined) after upgrade from v2.7.6 to v3.1.7
Environment
- Operating System: Linux
- Node Version: v18.18.0
- Nuxt Version: 3.12.3
- CLI Version: 3.12.0
- Nitro Version: 2.9.7
- Package Manager: [email protected]
- Builder: -
- User Config: modules, ssr, pwa, vuetify, css, build, imports, i18n, runtimeConfig, http, auth, compatibilityDate
- Runtime Modules: @vite-pwa/[email protected], @nuxt-alt/[email protected], @nuxt-alt/[email protected], @pinia/[email protected], @invictus.codes/[email protected], @nuxtjs/[email protected], @nuxt/[email protected]
- Build Modules: -
Nuxt Config
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: ["@vite-pwa/nuxt", "@nuxt-alt/auth", "@nuxt-alt/http", [
"@pinia/nuxt",
{
autoImports: ["defineStore", "acceptHMRUpdate"],
},
], "@invictus.codes/nuxt-vuetify", "@nuxtjs/i18n", "@nuxt/eslint"],
ssr: false,
pwa: {
registerType: 'autoUpdate',
manifest: {
name: 'Cables & avifaune',
short_name: 'ocb',
theme_color: '#0277bd',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable',
},
],
},
workbox: {
navigateFallback: "/",
globPatterns: ["**/*.{js,css,html,json,ico,png,svg}"],
},
client: {
installPrompt: true,
// you don't need to include this: only for testing purposes
// if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
periodicSyncForUpdates: 20,
},
devOptions: {
enabled: true,
suppressWarnings: true,
navigateFallbackAllowlist: [/^\/$/],
type: 'module',
},
},
vuetify: {
/* vuetify options */
vuetifyOptions: {
// @TODO: list all vuetify options
},
moduleOptions: {
/* nuxt-vuetify module options */
treeshaking: true,
useIconCDN: true,
/* vite-plugin-vuetify options */
styles: true,
autoImport: true,
},
},
css: [
"vuetify/lib/styles/main.css",
"@mdi/font/css/materialdesignicons.min.css",
"leaflet/dist/leaflet.css",
"@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css",
],
build: {
transpile: ["vuetify", "leaflet-geoman"],
},
imports: {
// Auto-import pinia stores defined in `~/stores`
dirs: ["store"],
},
i18n: {
locales: [
{ code: "en", iso: "en-US", file: "en.json" },
{ code: "fr", iso: "fr-FR", file: "fr.json" },
],
defaultLocale: "fr",
langDir: "locales",
},
// devtools: {
// // Enable devtools (default: true)
// enabled: true,
// // VS Code Server options
// vscode: {},
// // ...other options
// },
// routeRules: {
// '/api/v1/**': { cors: true, headers: { 'access-control-allow-methods': 'GET' }, proxy: 'http://localhost:8000' }
// },
runtimeConfig: {
public: {
apiBase: process.env.NUXT_PUBLIC_API_BASE || "http://localhost:8000",
},
},
http: {},
auth: {
// cookie: false,
redirect: {
login: "/account/login",
logout: "/",
callback: "/account/login",
home: "/",
},
// globalMiddleware: true,
strategies: {
local: {
scheme: "refresh",
cookie: false,
token: {
property: "access", // property name of access token get from Back-end
// global: true,
// required: true,
maxAge: 1800,
type: "JWT",
},
refreshToken: {
// it sends request automatically when the access token expires, and its expire time has set on the Back-end
property: "refresh", // property name of refresh token get from Back-end
data: "refresh", // data can be used to set the name of the property you want to send in the request.
maxAge: 60 * 60 * 24 * 30,
},
user: {
property: false,
autoFetch: true,
},
endpoints: {
login: {
url: "/api/v1/auth/jwt/create/",
method: "post",
},
refresh: { url: "/api/v1/auth/jwt/refresh", method: "post" },
logout: false, // there is no endpoint for logout in API. Just remove the token from localstorage
user: {
url: "/api/v1/auth/users/me/",
method: "get",
property: true,
},
reset: {
url: "/api/v1/auth/reset_password/",
method: "post",
}
},
},
},
},
compatibilityDate: "2024-07-15",
});
Reproduction
Source repository is there https://github.com/lpoaura/overheadCablesAndBirdlife/
Describe the bug
TypeError: this.options.stores is undefined
NuxtJS 8
isCookiesEnabled
getCookie
sourceOrder
getUniversal
setStrategy
loginWith
userLogin
cacheKey
login.vue:82:13
NuxtJS 35
userLogin
cacheKey
callWithErrorHandling
callWithAsyncErrorHandling
invoker
(Asynchrone : EventListener.handleEvent)
addEventListener
patchEvent
patchProp
mountElement
processElement
patch
componentUpdateFn
run
update
setupRenderEffect
mountComponent
processComponent
patch
mountChildren
mountElement
processElement
patch
componentUpdateFn
run
update
setupRenderEffect
mountComponent
processComponent
patch
componentUpdateFn
run
update
setupRenderEffect
mountComponent
processComponent
Additional context
Error occur when using auth.loginWith(...) function. error message is raised in the try ... cath ...
This error is raised by using this code:
<template>
<v-sheet width="100%" max-width="600" class="mx-auto">
<v-form ref="loginForm" v-model="formValid" @keyup.enter="userLogin">
<v-card class="mx-auto pa-12 pb-8" elevation="0" rounded="lg">
<div class="text-subtitle-1 text-medium-emphasis">Account</div>
<v-text-field v-model="login.username" density="compact" placeholder="Usename"
prepend-inner-icon="mdi-account-outline" variant="outlined" :rules="nameRules" autofocus
@keyup.enter="userLogin" />
<div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
Password
<a class="text-caption text-decoration-none text-blue" :href="'/account/reset'" rel="noopener noreferrer">
Forgot login password?</a>
</div>
<v-text-field v-model="login.password" :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
:type="visible ? 'text' : 'password'" density="compact" placeholder="Enter your password"
prepend-inner-icon="mdi-lock-outline" variant="outlined" :rules="pwdRules"
@click:append-inner="visible = !visible" />
<v-btn block class="mb-8" color="blue" size="large" variant="flat" :loading="loading" :disabled="!valid"
@click="userLogin()">
{{ $t('login.sign-in') }}
</v-btn>
<!-- <v-card-text class="text-center">
<a class="text-blue text-decoration-none" href="#" rel="noopener noreferrer" target="_blank">
Sign up now <v-icon icon="mdi-chevron-right"></v-icon>
</a>
</v-card-text> -->
</v-card>
</v-form>
</v-sheet>
</template>
<script setup type="ts">
const { t } = useI18n()
const router = useRouter()
const auth = useAuth()
const loginForm = ref(null)
const formValid = ref(false)
const loading = ref(false)
const login = reactive({
username: '',
password: ''
})
const nameRules = reactive([v => !!v || t('login.required_username_msg')])
const pwdRules = reactive([v => !!v || t('login.required_pwd_msg')])
const visible = ref(false)
const nomenclaturesStore = useNomenclaturesStore()
const userLogin = async () => {
try {
if (formValid.value) {
await auth.loginWith('local', {
body: login
})
nomenclaturesStore.loadNomenclatures()
router.push('/search')
}
} catch (err) {
console.error(err)
}
}
</script>
Logs
TypeError: this.options.stores is undefined
NuxtJS 8
isCookiesEnabled
getCookie
sourceOrder
getUniversal
setStrategy
loginWith
userLogin
cacheKey
login.vue:82:13
NuxtJS 35
userLogin
cacheKey
callWithErrorHandling
callWithAsyncErrorHandling
invoker
(Asynchrone : EventListener.handleEvent)
addEventListener
patchEvent
patchProp
mountElement
processElement
patch
componentUpdateFn
run
update
setupRenderEffect
mountComponent
processComponent
patch
mountChildren
mountElement
processElement
patch
componentUpdateFn
run
update
setupRenderEffect
mountComponent
processComponent
patch
componentUpdateFn
run
update
setupRenderEffect
mountComponent
processComponent
