Hello everyone,
When a user goes through a Stripe Checkout and returns via a link like:
<a class="Link NTVCZeIn__BusinessLink Link--primary" href="http://localhost:3000/en/workspace" aria-label="Back to TRANSCRI" title="TRANSCRI" target="_self" data-testid="business-link">
Nuxt doesn't perform a full SSR, the page loads entirely on the client side, and all middlewares are executed client-side only.
This causes two major issues :
My global middleware (middleware.global.js) is only executed on the client, even though it’s supposed to load the user from the server.
Here's the middleware (That's the initialize() function which API request to /api/user):
export default defineNuxtRouteMiddleware(async to => {
const cookieConsentStore = useCookieConsentStore()
cookieConsentStore.initialize()
const userStore = useAuthStore()
await userStore.initialize()
if (userStore.authenticated) {
if (to.name !== undefined && !to.name.startsWith('workspace-choosing-plan') && userStore.user.subscription_plan.code === null) {
return navigateTo('/workspace/choosing-plan')
}
if (userStore.user.subscription_plan.code !== null) {
const creditStore = useCreditStore()
await creditStore.initialize()
}
}
})
My layout (and some conditionally displayed modals) rely on user, so my auth.js middleware redirects the user to /login, and only then comes back to /workspace after making a successfully XHR request to /api/user
How can I avoid this issue? Has anyone experienced a similar behavior?
It seems like this only happens on the current browser tab — if I open a new tab and go to the same URL, it behaves correctly and SSR works as expected.
Thanks a lot in advance