N
Nuxt•3mo ago
rafa

Implementing and Persisting UUIDs for User Sessions in Nuxt 3

Hello there, I'm currently developing an application using Nuxt 3 and I need to integrate a specific functionality. I'm unsure about the correct implementation approach and would appreciate some guidance. Functionality Requirements: When a user visits the site, I need to make a call to an external API that returns a unique UUID for that user. This UUID should be stored in the browser's localStorage to prevent the generation of a new UUID on subsequent visits. Additionally, this UUID needs to be included in the headers of all $fetch() calls made to the API. Current Implementation: I have created a server plugin that makes a $fetch call to the API and successfully retrieves a UUID. My challenge now is to store this UUID in localStorage and ensure it's included in the headers of all $fetch() calls within the server/api/items.ts file, where I make additional API requests. Questions: Could anyone assist by explaining how to: Store the UUID in localStorage correctly? Pass this UUID as a header in all $fetch calls made from server-side API routes? Thank you in advance for any help you can provide!
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @rafa. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your requirements for implementing and persisting UUIDs for user sessions in Nuxt 3, I can provide some guidance based on the available knowledge sources. However, it's important to note that some aspects of your specific implementation may require additional considerations. 1. Storing the UUID: Instead of using localStorage directly, which is not accessible on the server-side, you should use the useCookie composable provided by Nuxt 3. This will work both on the client and server side. Here's how you can store the UUID: 
const userUUID = useCookie('userUUID', {
  maxAge: 60 * 60 * 24 * 7, // 7 days
  sameSite: 'strict'
})

if (!userUUID.value) {
  // Make API call to get UUID
  const newUUID = await $fetch('/api/get-uuid')
  userUUID.value = newUUID
}
const userUUID = useCookie('userUUID', {
  maxAge: 60 * 60 * 24 * 7, // 7 days
  sameSite: 'strict'
})

if (!userUUID.value) {
  // Make API call to get UUID
  const newUUID = await $fetch('/api/get-uuid')
  userUUID.value = newUUID
}
This approach is based on the information from Stack Overflow Post > Persist State Between Reloads in Nuxt v3. 2. Passing the UUID in headers for all $fetch calls: To include the UUID in all $fetch calls, you can create a custom fetch instance using useRequestFetch. This will automatically forward headers and cookies, including your UUID cookie. Here's an example of how to set this up: 
// composables/useApi.ts
export const useApi = () => {
  const requestFetch = useRequestFetch()
  return (url: string, options: any = {}) => {
    return requestFetch(url, {
      ...options,
      headers: {
        ...options.headers,
        'X-User-UUID': useCookie('userUUID').value
      }
    })
  }
}

// In your server/api/items.ts
const api = useApi()
const items = await api('/external-api/items')
// composables/useApi.ts
export const useApi = () => {
  const requestFetch = useRequestFetch()
  return (url: string, options: any = {}) => {
    return requestFetch(url, {
      ...options,
      headers: {
        ...options.headers,
        'X-User-UUID': useCookie('userUUID').value
      }
    })
  }
}

// In your server/api/items.ts
const api = useApi()
const items = await api('/external-api/items')
This approach is based on the information from Docs > Api > Composables > useRequestFetch and YouTube [Nuxt 3]: Passing Cookies with event.$fetch and useRequestFetch in Nuxt. By using useRequestFetch, you ensure that the necessary headers and cookies are forwarded in your server-side API routes. Remember to handle cases where the UUID might not be available yet, especially during the initial server-side render. You may need to implement additional checks or fallback behavior in such cases. Lastly, ensure that your external API is set up to accept and process the UUID header correctly. Nuxt 3 Data Fetching provides more information on data fetching in Nuxt 3, which might be helpful for your implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@1220373962454990948> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?