Nuxt•2w ago

How to save the state of user's authentication

Hello everone, I want to ask about how to save the state of user and token in the browser to tracking it whether the user is still valid or not.

2 Replies

kapa.ai•2w ago

Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To save the state of user authentication in Nuxt 3, you can use the useCookie composable. This allows you to persist small amounts of data, such as authentication tokens, that both the client and server can use. Here's how you can implement this: 1. Use useCookie to store the user's authentication state:

export const useUser = () => useCookie<User | null>('user', {
  default: () => null,
  watch: true,
})

export const useUser = () => useCookie<User | null>('user', {
  default: () => null,
  watch: true,
})

This creates a cookie named 'user' that will store the user's information Stack Overflow - Persist State Between Reloads in Nuxt v3 (https://stackoverflow.com/questions/77882887). 2. When the user logs in, you can set the cookie with the user's information and token:

const user = useUser()
user.value = {
  email: '[email protected]',
  token: 'your-auth-token',
  expires: new Date(/* expiration date */)
}

const user = useUser()
user.value = {
  email: '[email protected]',
  token: 'your-auth-token',
  expires: new Date(/* expiration date */)
}

3. To check if the user is still valid, you can create a composable or a middleware that checks the expiration of the token:

export default defineNuxtRouteMiddleware((to, from) => {
  const user = useUser()
  
  if (!user.value || new Date(user.value.expires) < new Date()) {
    // User is not logged in or token has expired
    return navigateTo('/login')
  }
})

export default defineNuxtRouteMiddleware((to, from) => {
  const user = useUser()
  
  if (!user.value || new Date(user.value.expires) < new Date()) {
    // User is not logged in or token has expired
    return navigateTo('/login')
  }
})

This middleware checks if the user exists and if the token has expired. If either condition is true, it redirects to the login page. 4. To refresh the cookie value when it changes, you can use the refreshCookie utility:

const tokenCookie = useCookie('token')

const login = async (username, password) => {
  const token = await $fetch('/api/token', { ... }) // Sets `token` cookie on response
  refreshCookie('token')
}

const tokenCookie = useCookie('token')

const login = async (username, password) => {
  const token = await $fetch('/api/token', { ... }) // Sets `token` cookie on response
  refreshCookie('token')
}

This ensures that the useCookie ref is updated when the cookie changes Nuxt - refreshCookie (https://nuxt.com/docs/api/utils/refresh-cookie). By using these methods, you can effectively save and track the state of user authentication in your Nuxt 3 application. The cookie will persist between page reloads, allowing you to maintain the user's logged-in state. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How to save the state of user's authentication