Pass JWT token in form

Hello !

I’m new in NodeJS and want to develop with AdonisJS because I come from Laravel.

I’m developping a webapp with AdonisJS as an API and NuxtJS as a frontend. So I use the JWT authentification but I need help on some things :slight_smile: !

I have a form that send a post request with axios and I have the line below to get the bearer token stored in the cookie :

const token = localStorage.getItem('auth._token.local')

It works, but when I refresh the page I have a ReferenceError : localStorage is not defined. I think that my way to initiate the token variable and pass it to the API is not good…

Maybe you can give me the solution or an example ?

Waiting for your answers…
(Sorry for my English, I’m French !)

1 Like

Hello @axteure welcome to community!

I’m assuming you are using Nuxt in universal (SSR server-side-rendering) mode
The thing is, that when you do refresh Nuxt first renders whole content in server and sends rendered content to browser. Problem is that localStorage is not defined in server, it exists only in browser.

You should wrap your code into if to check if code is running in browser or not

if (process.client) {
  // In browser - safe to use localStorage
  const token = localStorage.getItem('auth._token.local')
}

Hello McSneaky and thank’s for your answer !

Oh you’re write, it’s why because sometimes we have to use in our code.
But I have always the same error even if I declare my token in the if condition…

Hey @axteure! :wave:

You shouldn’t store any auth token in your localstorage since it can be accessed via JavaScript and is therefore hackable via XSS vulnerability.

You should store your token in a cookie, this will also fix the error you have with Nuxt.

Hello Romain and Thank’s :slight_smile: !

I think that by default, the JWT token is accessible in cookie. But the localstorage was the only way that i found to get it ! Do you have another way to get the jwt token and pass it into the header of the my post request ?

This is my full method :

          const token = localStorage.getItem('auth._token.local')
    
        axios
          .post(
            'http://127.0.0.1:3333/customers/create', {
              name: this.name,
            }, {
              headers: {
                Authorization: token //the token is a variable which holds the token
              }
            }
          )
          .then(response => {
            // fire an event to the event bus
            console.log(response);

          })

But the localstorage was the only way that i found to get it !

You don’t need to get it if it’s in a cookie. The browser handle it when sending a request by default.

Yes I have tried the code below :

        axios
          .post(
            'http://127.0.0.1:3333/customers/create', {
              name: this.name,
            }
          )
          .then(response => {
            // fire an event to the event bus
            console.log(response);

          })

But I have always an E_INVALID_JWT_TOKEN, so it seems that the jwt token is not automatically in the header of my request…

yep, you need insert token when request to server, but if you use cookie => can get it at adonis

Hello truongatv, store token in the cookie is the best solution ?

i think so.
or you can save token to Database