Managing the storage of refresh and authorization tokens on the client side: where should they be kept?

My backend is powered by Laravel and the frontend uses Vue.

Users authenticate by calling my Laravel API to get an Auth token and a refresh token. The Auth token expires after 2 minutes, while the refresh token lasts longer. Storing the refresh token in local storage poses a security risk, but saving the Auth token there is less concerning as it has a short lifespan.

The challenge lies in maintaining user login sessions without requiring them to input their credentials every time they access the application.

With this in mind, where should I securely store the refresh token? And where should I save the Auth token?

Answer №1

When using a refresh token, it is important to store it separately from the access token for security reasons. Storing both tokens in the same location can lead to increased vulnerability in the event of a compromise.

One way to enhance security is by storing the refresh token in an httponly cookie, especially if the cookie is associated with a different domain (such as the idp). However, storing the refresh token on the same domain can also provide some level of protection. The key is to ensure that even if the access token is exposed through an attack like xss, the refresh token remains secure and inaccessible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using VueJS3 in conjunction with leaflet results in an issue

Looking to integrate interactive maps into my VueJS3 application. Successfully implemented the following code: <template> <div id="mapContainer"></div> </template> <script> import 'leaflet/dist/leaflet.css&a ...

vue.js leaflet vuejs3

Guide on removing the loading percentage spinner from a Nuxt.js application

When visiting my website chateg with a slow internet connection, you may notice a rounded spinner with a percentage counter near the "Enter chat" button. Is there a way to remove this feature? ...

vue.js nuxt.js

Upon reinstalling the node_modules in my Nuxt.js project, I encountered the error message "Must use import to load ES Module:~"

After reinstalling node_modules, I encountered an issue where ufo and node-fetch were missing. Upon adding them back in, running npm run dev resulted in an error when opening localhost in a browser. This same error persisted when cloning the project onto ...

node.js vue.js npm webpack nuxt.js

How can I enable a constant condition in eslint?

I have encountered an issue with my package.json configuration. Here is the current eslintConfig generated: "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/standard" ...

vue.js eslint

Vue.js is like the modern version of jquery-cron

Is there a similar tool to jquery-cron with an easy-to-use text/select interface that anyone knows of? I've come across vue-cron and point-vue-cron, but they seem too complicated for my needs. ...

javascript vue.js vuejs2

Vue - Additional loading may be required to manage the output of these loaders

Currently working with Vue and babel. I have a function that's been exported // Inside file a.js export async function get() { ... } I am trying to link this exported function to a static method of MyClass // Inside file b.js import myInterface fr ...

javascript vue.js babeljs

vue v-if="canEdit" @click.prevent

I have a Vue component called 'test' with specific template and methods. The goal is to make the div clickable only if helper.isEditable is true, otherwise it should be notClickable or touchable. However, I can only retrieve the value of helper. ...

javascript vue.js

I'm curious about the reason behind the error message stating "Navbar is defined but never used" popping up while working with Vue

After importing the Navbar component from Navbar.vue, I attempted to include it in my app.vue. However, upon doing so, I encountered an error stating 'Navbar' is defined but never used. As a newcomer to Vue, I am unsure of why this issue is occur ...

javascript vue.js vuejs2 vue-component vue-router

Utilizing default values with props in Vue.js for customization

There are very few instances where I need to modify the value of props during initialization, for example: props : { columnName : String, setValue: { validator: function (value) { //handle specific cases let _value ...

vue.js

Skip using bootstrap-vue icons by utilizing the Webpack IgnorePlugin

After analyzing with Webpack bundle analyzer, I discovered that the icons from the bootstrap-vue package are a whopping 535kb in size. Knowing this, I've decided not to utilize them in my project. I attempted to exclude the entire package using a web ...

vue.js webpack bootstrap-vue

The table is not visible when using Bootstrap Vue

Can anyone help me with displaying a table of flowers? I am having trouble making it show up on my page. Not quite sure how to use my data to get the flowers to display properly. Any guidance or advice would be greatly appreciated. <b-table> ...

javascript twitter-bootstrap vue.js bootstrap-4 bootstrap-vue

vue-spa breadcrumbs component

I am currently working on enhancing the navigation of my vue-spa project by implementing breadcrumbs. These breadcrumbs should be capable of displaying properties as breadcrumb-items, and each part of a route must be correctly identified as a breadcrumb-it ...

vue.js single-page-application breadcrumbs

What is the reason for the Vue effect not being executed through the scheduler upon initialization of the effect?

What is the reason for the vue effect not going through the scheduler upon initialization? effect( () => { console.log('effect'); }, { scheduler: (job) => { console.log('run by scheduler'); job(); }, ...

vue.js vue-reactivity

Implementing a click event binding to a button upon mounting a Vue.js component

I am currently utilizing a third-party application (vue slick carousel) and I find myself in need of binding a click event to the button below: <button type="button" data-role="none" class="slick-arrow slick-next" style=&qu ...

vue.js addeventlistener eventtrigger

What is the best way to incorporate a vanilla javascript function into a vue.js application?

Consider a vanilla JavaScript function like this: if (window.devicePixelRatio >= 2) { document.querySelectorAll('img.retina').forEach(function (e) { let parts = e.src.split('.'); let ext = parts.pop(); i ...

javascript vue.js

How can you implement a bootstrap navigation bar in a vue.js project?

I have encountered a problem with using html in my vue project. Despite following the documentation, it seems that the html is not working properly. I am unsure if this issue could be related to the import of popper.js. I have checked my code and I believe ...

javascript vue.js bootstrap-5 popper.js

Here is a unique rewrite: "Strategies for effectively passing the data variable in the geturldata function within Vue.js on the HTML side vary

How can I properly pass a variable in the getdataurl function in Vue.js? I need help with passing a variable in getdataurl function in Vue.js. Please provide a clear explanation and include as much detail as possible. I have tried doing some background r ...

javascript php jquery ajax vue.js

Leveraging Vue.js to direct users to the edit.blade.php file within resource controllers, allowing them to use the GET

Exploring the possibility of transforming an anchor tag button into a component housing the /profile/{{$user->id}}/edit path within a Laravel application for user profile editing. Is it feasible to use Vue.js in dynamically altering the URL path? We h ...

laravel vue.js

"Utilize Vue i18n to properly display currency amounts in USD

Whenever I present my currency as USD, it always shows up like this: USD$500.00. I am attempting to eliminate the USD prefix from the beginning. Below is my numberFormats configuration: numberFormats: { 'en': { currency: { ...

javascript vue.js vuejs2 vue-i18n

When initializing a Vue application using the command 'vue create hello-world', the './fs' module is not found

After spending the last 3-4 hours trying to work with Vue, I'm finding it incredibly challenging just to get it up and running. I've been following the documentation provided here: https://cli.vuejs.org/guide/creating-a-project.html#vue-create ...

node.js vue.js npm macos-mojave

Newtab Q&A