Nuxt-auth-utils refresh tokens with keycloak? and where to store access tokens
i have a basic set up right now with nuxt-auth-utils and an external API that authenticates with keycloak. i have two questions. first: where is the best place to store the auth token? in the session? or something else?
second question: how are folks handling refresh tokens in nuxt-auth-utils? i have a basic refresh. post.ts endpoint and a refresh middleware that seems to work for now but I'm wondering if anyone has done this and wouldn't mind sharing their process? thanks!
2 Replies
Hi @0x4d6165. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
For your questions about using nuxt-auth-utils with Keycloak in Nuxt:
1. Where to store the auth token?
The recommended approach in Nuxt (and with nuxt-auth-utils) is to store authentication tokens in cookies, specifically using the useCookie composable. This method works both on the client and server side, and is more secure than localStorage, especially for SSR and API requests. The nuxt-auth-utils module itself uses sealed (encrypted) cookies to store session data, including tokens, by default. This is considered best practice for session and token management in Nuxt apps, as it avoids exposing tokens to client-side JavaScript and enables secure, HTTP-only storage that works seamlessly with SSR and API routes. You can see examples of this approach in the Nuxt documentation and related PRs, which show how to set and clear tokens using useCookie (Sessions and Authentication Recipe, docs PR for useCookie example). 2. How to handle refresh tokens with nuxt-auth-utils?
The official documentation for nuxt-auth-utils does not provide a detailed, built-in refresh token flow for external providers like Keycloak. However, the common pattern is to create a custom API endpoint (e.g., /api/refresh) that handles the refresh logic: when an access token expires, the client (or middleware) calls this endpoint, which uses the refresh token (stored securely in a cookie or session) to obtain a new access token from Keycloak, then updates the session or cookie with the new token. You can trigger this refresh in your app using composables or middleware, and update the cookie value accordingly. The Nuxt docs show how to use useCookie to update tokens, and you can use refreshCookie to manually refresh the cookie value in the client after a token refresh (refreshCookie utility). In summary: - Store tokens in cookies using useCookie (not localStorage or plain sessionStorage). - Handle refresh tokens by creating a custom API route that exchanges the refresh token for a new access token, and updates the session/cookie. Use refreshCookie on the client if you need to sync the new value. If you want a more robust, ready-made solution, you might also look at the nuxt-auth-utils documentation and the atidone example repo for inspiration. If you need a code example or more details, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
The recommended approach in Nuxt (and with nuxt-auth-utils) is to store authentication tokens in cookies, specifically using the useCookie composable. This method works both on the client and server side, and is more secure than localStorage, especially for SSR and API requests. The nuxt-auth-utils module itself uses sealed (encrypted) cookies to store session data, including tokens, by default. This is considered best practice for session and token management in Nuxt apps, as it avoids exposing tokens to client-side JavaScript and enables secure, HTTP-only storage that works seamlessly with SSR and API routes. You can see examples of this approach in the Nuxt documentation and related PRs, which show how to set and clear tokens using useCookie (Sessions and Authentication Recipe, docs PR for useCookie example). 2. How to handle refresh tokens with nuxt-auth-utils?
The official documentation for nuxt-auth-utils does not provide a detailed, built-in refresh token flow for external providers like Keycloak. However, the common pattern is to create a custom API endpoint (e.g., /api/refresh) that handles the refresh logic: when an access token expires, the client (or middleware) calls this endpoint, which uses the refresh token (stored securely in a cookie or session) to obtain a new access token from Keycloak, then updates the session or cookie with the new token. You can trigger this refresh in your app using composables or middleware, and update the cookie value accordingly. The Nuxt docs show how to use useCookie to update tokens, and you can use refreshCookie to manually refresh the cookie value in the client after a token refresh (refreshCookie utility). In summary: - Store tokens in cookies using useCookie (not localStorage or plain sessionStorage). - Handle refresh tokens by creating a custom API route that exchanges the refresh token for a new access token, and updates the session/cookie. Use refreshCookie on the client if you need to sync the new value. If you want a more robust, ready-made solution, you might also look at the nuxt-auth-utils documentation and the atidone example repo for inspiration. If you need a code example or more details, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@278717080952504322> Kapa.ai is still learning and improving, please let me know how I did by reacting below.