Nuxt, Supabase, Pinia + target="_blank" link = missing data in components
I'm very new to this FE stack, but I've had a problem for days now. I just can't seem to fix it. In a component I have a link like this: <a href="some-other-site" target="_blank">Some xternal site</a>. When I click on the link and then go back to my site's tab, and click on an internal link, some components has stopped working. This is only the case with links that opens a new tab, if I leave _blank out, it's no problem to hit the back button in the browser, it all renders fine. When I get back to my tab I see this in my console:
// Always verify that the profile data exists and is fresh if (!profile.value profile.value.id !== verifiedUser.id) { await fetchProfile(verifiedUser.id) } } else if (event === 'SIGNED_OUT') { user.value = null user.value = null profile.value = null isInitialized.value = false } }) However, it seems like the data is missing just before the state change or something. I can't figure this out, any ideas? 🫶
Auth state changed: SIGNED_IN
That comes from my useAuthStore.js:
// Auth state change listener
auth.onAuthStateChange(async (event, session) => {
console.debug('Auth state changed:', event, 'Session exists:', !!session)
if (event === 'SIGNED_IN' event === 'TOKEN_REFRESHED') {
const { data: { user: verifiedUser }, error } = await auth.getUser()
if (error) {
console.error('User verification failed:', error)
user.value = null
profile.value = null
return
}
user.value = verifiedUser
// Always verify that the profile data exists and is fresh if (!profile.value profile.value.id !== verifiedUser.id) { await fetchProfile(verifiedUser.id) } } else if (event === 'SIGNED_OUT') { user.value = null user.value = null profile.value = null isInitialized.value = false } }) However, it seems like the data is missing just before the state change or something. I can't figure this out, any ideas? 🫶
6 Replies
Hi @heyado. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have enough specific details to fully address your issue with Nuxt, Supabase, Pinia, and the
target="_blank" link behavior. However, I can provide some insights and suggestions based on related concepts in Nuxt:
1. State Management: The issue you're experiencing seems to be related to state management, particularly with Pinia and Supabase authentication. When you return to your tab after opening an external link, the auth state is changing, but some components are not updating properly.
2. SSR and Client-Side Navigation: Nuxt uses server-side rendering (SSR) and client-side navigation. When you open a new tab and return, it's possible that the state is not being properly rehydrated or synchronized between the server and client.
3. External Links: The Nuxt documentation on <NuxtLink> mentions that external links are handled differently from internal links. While your issue is with a regular <a> tag, this concept might be relevant.
4. State Reset: There's a known behavior in Nuxt where state can be reset during SSR redirects, as mentioned in this GitHub issue. While not exactly your scenario, it highlights that state management during navigation can be tricky.
To troubleshoot this issue, you might want to consider:
1. Using <NuxtLink> instead of <a> tags, even for external links. This gives you more control over the navigation behavior.
2. Implementing a more robust state rehydration mechanism in your Pinia store, ensuring that the state is properly restored when returning to your tab.
3. Investigating if there's any race condition between the auth state change and the component rendering. You might need to implement a loading state or use nextTick to ensure components re-render after the state has been updated.
4. Checking if the issue persists when using different browsers or incognito mode, to rule out any caching issues.
If the problem persists, you might want to create a minimal reproduction of the issue and seek help on the Nuxt GitHub issues page or the Nuxt Discord community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1184869490073284739> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai How to set target _blank with NuxtLink?
Let me check the knowledge base for you again. One moment! :books:
----------------------
To set
target="_blank" with <NuxtLink>, you can use the target prop directly on the component. Here's how you can do it:
This approach is documented in the Nuxt documentation for <NuxtLink>. The target prop is one of the supported attributes that can be passed to <NuxtLink>, along with other properties from the NuxtLink component.
When using target="_blank", Nuxt automatically adds rel="noopener noreferrer" to the link for security reasons. This behavior is explained in the Nuxt documentation on rel and noRel attributes.
If you need to customize the rel attribute or remove it entirely, you can use the rel or noRel props:
Remember that using target="_blank" opens the link in a new tab or window, which is useful for external links but should be used judiciously for internal navigation within your Nuxt application.
Nuxt documentation for <NuxtLink>
Nuxt documentation on rel and noRel attributes
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1184869490073284739> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I tried with <NuxtLink> but get the same issue.
I solved it! Had just messed up other parts of my code