I am beginner in Strapi and I don't know how to handle jwt and user object returned by oauth on my frontend

Is there any blog article or video which explains how to handle JWT token and user objects on the front end? I also need a solution on how to create a function to log out a user. My authentication is working properly just I don’t know how to handle it on the front end. Also, need to log out the user.

Hey, I’ll try to walk you through it using my postman examples you will need to make the format of the same request using express or Axios. the one I’ll show you uses Axios.

  • After you sign in using the /auth/local endpoint. you will receive the JSON with the JWT.

  • This JWT will be used to make requests to endpoints that are authenticated. In this example, I’ll make a get request to the /color-page endpoint and send it in the header as a bearer token.

var axios = require('axios');

var config = {
  method: 'get',
  url: 'http://localhost:1337/color-page',
  headers: { 
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjUsImlhdCI6MTYzMjA0MTY4NiwiZXhwIjoxNjM0NjMzNjg2fQ.UVD2r7DED9OH0NbGbhFSUBr0OW3M4d7_cuq7WChK8tc'
  }
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

Make sure you add the JWT in the header as shown above.

Hope this helps :slight_smile:

1 Like

Thank you so much for your response. This made my work easy. Can you also help me to know where to store the JWT token and how to retrieve it on the front end of my application?

This thread talks about it in detail.

I recommend you read the article above but short answer is :point_down:
JWTs are stored in localStorage, but according to this article (Randall Degges - Please Stop Using Local Storage ), this is subject to XSS attacks so instead they should be stored in cookies.

instead they should be stored in cookies.

1 Like

Or session storage, local storage certainly isn’t a requirement

1 Like