How to store data to local storage with Nuxt.js - authentication

Question

As you know, nuxtjs is server side rendering and there is no good example how to store data into localstorage which is client side.
My work is need to build login form where user can put username and password into the form the send it to server (via api) to check, if login data is correct, the api will return one token key then I will store this key to verify is user is authen and use it with other api.
I found some example but build with vuejs here https://auth0.com/blog/build-an-app-with-vuejs/ but I don't have an idea how to change it to nuxtjs.
Any I have read https://github.com/robinvdvleuten/vuex-persistedstate which I can plug in to my project but I would like to see other solution.
Regards.

Answer 1

Nuxt provides you with process.client to tell it to execute only on the client side
so use it like this:
methods: {
storeToken(token) {
if(process.client) {
localStorage.setItem("authToken", token)
}
}
}
Check this link for more info.

Answer 2

You can use process.client to check it's on client-side or not.
export default {
created() {
this.storeToken();
},
methods:{
storeToken(token){
if(process.client){
localStorage.setItem("authToken", token);
}
}
}
}
You also call this method in mounted without check process.client.
export default {
mounted() {
this.storeToken();
},
methods:{
storeToken(token){
localStorage.setItem("authToken", token);
}
}
}

Answer 3

A little late to the party, but I was having similar problems.
But first I would recommend you to use cookies for saving a key/token/jwt.
The reason being that localStorage can be hijacked through JS api's and cookies can be safeguarded from that. You will however have to safeguard your token from CSFR.
That can be done by having a look at the Refence and Origin headers server side.
This guy wrote a good post on how to do that: How to protect your HTTP Cookies
As for accessing localStorage from Nuxt, here we go:
If you are running Nuxt and haven't told it to run in spa mode it will run in universal mode. Nuxt defines universal mode as:
Isomorphic application (server-side rendering + client-side navigation)
The result being that localStorage is not defined serverside and thus throws an error.
The give away for me was that console logging from middleware files and Vuex outputted to terminal and not the console in developer tools in the browser.
if you want to read more about my solution you can find it here: localStorage versus Nuxt's modes

Answer 4

If you plan on storing small amounts of data, below 4096 bytes, you can use cookies. I recommend the library cookie-universal-nuxt.
npm install cookie-universal-nuxt --save
nuxt.config.js
modules: [
'cookie-universal-nuxt',
],
Then you can use:
const data = {
anything: 'you want',
}
this.$cookies.set('thing', data, {
path: '/',
maxAge: 60 * 60 * 24 * 7
});
this.$cookies.get('thing');
Read the library docs for more if you need it.
The cookie will be available server-side, so you can get around the issues with localStorage.
Just be aware that cookies can only store up to 4096 bytes per cookie.
For example, I fetch cookie data in the nuxtServerInit function in Vuex, and the data is then available everywhere in the app server-side.

Answer 5

Insofar as client means a web browser, all the options are spelled out in the []HTML Living Standard Web Storage section.
12.2 The API
12.2.1 The Storage interface
12.2.2 The sessionStorage getter
12.2.3 The localStorage getter
12.2.4 The StorageEvent interface

Answer 6

U can work with const page = useState( () => data ) or if u want to use local or session storage u can use VueUse module..
I know its a bit late and it might not be the answer you are looking for...but it could be helpful for someone..what i learned after going through many documentations and other answers is that u just cant use local or session storage. In development it just runs when u change the route but when u refresh the page or the component using session storage it throws error "sessionStorage is not defined"..if u are not planning to store data for long time like u do with session or local...u can work with useState( () => data ) property that nuxt provides..it stores your data until u refresh your webPage...