When refresh browser on prerender env(SSG), Authentication status is lost. #551
Comments
artisthong
changed the title
|
Same issue |
|
Hi @artisthong, so this only happens when running the frontend statically, but not when you build it and run it through the Nuxt Server (AKA only happens when you run SSG and not SSR)? Also, does the cookie get cleared on the reload of the page or is it kept? Could you also provide a replication of your current setup? Otherwise it may take a bit longer for me to create a setup on which I can test this! |
|
For me it cleared the cookie one we reloaded the page. |
|
@zoey-kaiser Make sure you can make nuxt.config.ts ssr: true,Or leave it as by default. |
|
@TouchSek If you tab in and out of your site does the authentication state fix itself? Like this:
I might have the same issue, I just wanna know if it's the same thing or not, so I can make my own issue. |
|
If either of you are having the problem I stated above, it's because Nuxt Auth is incorrectly passes down the authentication info when pages are being cached/prerendered. In dev tools run: As a cheap solution you can do this: onMounted(() => {
getSession()
})Since const authLoading = ref(true);
onMounted(() => {
getSession().then(() => loading.value = false)
})Or as a better solution, you can probably create a composable (if you do, please share). I was trying to slowly build a PR to fix (as I need this for a personal project). But I'm spending a lot of my personal time on work-related projects. A permanent solution might be to:
|
|
I'm also facing this issue using Here's the reproduction: https://stackblitz.com/edit/nuxt-starter-k4cqjg
|
|
@gretchelin Your reproduction works fine when preview is opened in new tab. |
|
thanks for mentioning that @simkuns . I only recently remembered to check on this issue, and after testing the repro in new tab, yeah, it weirdly works. Will play around with the repro to see if it's something implementation-wise (as I use mock data in it, so that might be why it behave weirdly). |
|
I tried to check this with As I see,
So, I not sure if this a good solution or not but I disable SSR and force set token again with useCookie and it work for me. nuxt.config.ts app.vue I hope we find out the better solution soon. Edit: but I did see any error/access logs in the API server with this request |
Hi, I've got the same problem as you stated above. After doing refresh or new tab etc auth state is gone (cookie is gone). Did you find out what was causing this? |
|
try this code |
|
I'm facing the same issue here. When running the frontend statically Here are two minimal examples:
|
zoey-kaiser
added
p3
Thanks to you I regained my sanity. Having an authenticating flash before loading the content on first load is an ugly solution but at least it's working now. Thank you. Did you ever got the time to come up with a better solution? |
I created a pull request (#610) to fix that issue. They're currently reviewing it. On the project I was having the issue, I just installed the fork I created, instead of using |
|
#712 This PR fixes the data getting lost issue, but you still need to set the |
|
I am working on a new nuxt project. I am seeing the same issue with
|
|
For anyone also facing this, KyleSmith fix did not fully work for me. The hack I came up with is to manually pull the auth token from the cookie before calling getSession(): |
|
For anyone who's only using the local provider of nuxt-auth I highly recommend implementing authentication without a package. It's simple yet effective. This package is just not good at simple authentication flow with just the local provider. I've lost days trying to work around annoying bugs and over-engineered solutions for a simple Auth flow. In the end I just build my own solution through a simple global middleware checking for the token in a Pinia store, a Pinia store saving and retrieving the token from a cookie with the useCookie composable and in the app.vue a simple setup script that retrieves whatever user data is necessary. And a login form of course. However, if you need to implement multiple providers this package is of course amazing and my respect to the maintainers of it! |
|
While we wait for a proper fix, I have created a Nuxt 3 plugin based on @RMFogarty's suggestion. For static site generation (SSG), the authentication process, especially the handling of cookies, should primarily occur on the client side because cookies are not accessible at build time and are typically bound to the user's session. This plugin should work for provider type "refresh" and "local". // plugins/nuxt-auth-ssg.js
import { defineNuxtPlugin } from '#app';
import { useState } from '#imports';
export default defineNuxtPlugin(nuxtApp => {
const authLoading = useState('authLoading', () => ref(true)); // Initialize and provide globally
nuxtApp.hook('app:mounted', async () => {
const { getSession, refresh } = useAuth();
const { rawToken, rawRefreshToken } = useAuthState();
if (process.client) {
const authToken = useCookie('auth.token');
const authRefreshToken = useCookie('auth.refresh-token');
// Only proceed if there is at least an authToken
if (authToken.value) {
rawToken.value = authToken.value;
if (authRefreshToken.value && rawRefreshToken) {
rawRefreshToken.value = authRefreshToken.value;
}
try {
const authMethod = refresh && authRefreshToken.value ? refresh : getSession;
await authMethod({ force: true });
} catch (error) {
console.error('Failed to initialize session:', error);
// Optionally update state or notify users that an error occurred
} finally {
authLoading.value = false; // Ensure loading is set to false when done
}
} else {
authLoading.value = false; // Set loading false if no auth token
}
}
});
});Now, you can inject "authLoading" in any component where you need it. <script setup>
const { status } = useAuth();
const authLoading = useState('authLoading');
</script>
<template>
<div v-if="authLoading">
Loading...
</div>
<div v-else>
<!-- Your authenticated or unauthenticated UI here -->
<div> {{ status }} </div>
</div>
</template>
|
|
@ralphcrisostomo tried your solution but |
Could you share your code so I can understand your issue clearly. |
I checked it in this reproduction and it still logout |
|
My pull request #712 still hasn't been reviewed yet, meanwhile if anyone is facing the problem you can install my version @vijayabhaskar96/nuxt-auth |
I had the same issue and wasn't able to fix it, I had to switch to a completely different auth module. You could try out this auth module instead @workmate/nuxt-auth. This works for me |
|
Is this issue still unresolved?!!! Any one has a solution?? @artisthong |
|
After long and painstaking research, I found this: this will set cookies from the client side to the request you want in the Nuxt server side |
Environment
client : npm run generate > npx serve [output static directory] -l 3001
node server : npm run build(port 3000) > node index.mjs
Reproduction
Describe the bug
I guess this is probably a problem that occurs when pre-rendering is performed on the client-driven server side.
Is there a solution to this?
Additional context
"nuxt.config.ts" part the below.
Logs
No response
The text was updated successfully, but these errors were encountered: