How can I store an access token received from the backend (in JSON format) in local storage and use it to log in?

Question

How can I store an access token received from the backend (in JSON format) in local storage and use it to log in?

My goal is to create a login interface using Plain Javascript. I have obtained a Token from the backend and now need assistance in utilizing this Token for the login process and storing it in LocalStorage.

Although I have successfully made the API call, I am encountering a 502 (Bad Gateway) error. It seems like the issue might be related to not properly setting the token.

function postData() {
    var result = fetch('https://example.api.com/login', {
        method: "POST", 
        mode: "cors",
        cache: "no-cache",

        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json'    
        },

        redirect: "follow",
        referrer: "no-referrer",

        body: JSON.stringify({
            isArray: false,
            data: {
                    email: document.getElementById("email").value,
                    password: document.getElementById("passwordNew").value
                }
        })

    }).then(response => response.json()); 
    console.log("result :" + result);
    return result;
}

This code snippet shows the API call being made, which returns the token as part of the response.

The received response includes the following details:

"data": {
    "token": "sdfsdgsfgsgsgssb497e7764f4df8cb504a122cc18b2eed8",
    "startTime": 1558417495078,
    "endTime": 1558503895078
}

Upon successful utilization of the token provided by the backend, I expect to achieve a successful login by entering my email and password.

javascript json authentication token

Answer 1

Answer №1

Upon receiving the token from your login request, it is crucial to securely store it for future use. Storing the token in localStorage seems like a step in the right direction. I would also recommend implementing the async/await syntax for better readability and usability. By leveraging promises, this syntax simplifies the code structure by replacing resolve/reject functions with try/catch blocks.

async function handleLogin(username, password) {
  try {
    let response = await fetch('https://example.api.com/login', {
        method: "POST",
        mode: "cors",
        cache: "no-cache",
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json'    
        },
        redirect: "follow",
        referrer: "no-referrer",
        body: JSON.stringify({
            isArray: false,
            data: {
                    email: document.getElementById("email").value,
                    password: document.getElementById("passwordNew").value
                }
        })
    })
    response = response.json();
    window.localStorage.setItem('token', response.data.token)
  } catch(error) {
    console.log('error while logging in', error)
  }
}

When using the stored token for subsequent requests, retrieve it from localStorage as shown below:

async function editProfile(updatedProfileInfo) {
  const token = localStorage.getItem('token');
  try{
    let response = await fetch('https://someurl.com/edit', {
      method: "POST",
      ...
      'x-access-token': token,
      ...
    })
  //handle response
  } catch(error) {}
}

Here are some key points to keep in mind:

Ensure that you understand how your API requires tokens to be included in requests. In the example provided, the token is placed in the x-access-token section of the request header. Different APIs may have different requirements such as using cookies. Always verify the correct method for passing the token.
Prior to sending a request, it is advisable to validate the token's expiration status. It might be beneficial to store the entire login response, including expiration details, so you can check its validity before making the call. If the token is invalid, log the user out and remove the token from localStorage accordingly.

Answer 2

Upon receiving the token from your login request, it is crucial to securely store it for future use. Storing the token in localStorage seems like a step in the right direction. I would also recommend implementing the async/await syntax for better readability and usability. By leveraging promises, this syntax simplifies the code structure by replacing resolve/reject functions with try/catch blocks.

async function handleLogin(username, password) {
  try {
    let response = await fetch('https://example.api.com/login', {
        method: "POST",
        mode: "cors",
        cache: "no-cache",
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json'    
        },
        redirect: "follow",
        referrer: "no-referrer",
        body: JSON.stringify({
            isArray: false,
            data: {
                    email: document.getElementById("email").value,
                    password: document.getElementById("passwordNew").value
                }
        })
    })
    response = response.json();
    window.localStorage.setItem('token', response.data.token)
  } catch(error) {
    console.log('error while logging in', error)
  }
}

When using the stored token for subsequent requests, retrieve it from localStorage as shown below:

async function editProfile(updatedProfileInfo) {
  const token = localStorage.getItem('token');
  try{
    let response = await fetch('https://someurl.com/edit', {
      method: "POST",
      ...
      'x-access-token': token,
      ...
    })
  //handle response
  } catch(error) {}
}

Here are some key points to keep in mind:

Ensure that you understand how your API requires tokens to be included in requests. In the example provided, the token is placed in the x-access-token section of the request header. Different APIs may have different requirements such as using cookies. Always verify the correct method for passing the token.
Prior to sending a request, it is advisable to validate the token's expiration status. It might be beneficial to store the entire login response, including expiration details, so you can check its validity before making the call. If the token is invalid, log the user out and remove the token from localStorage accordingly.

How can I store an access token received from the backend (in JSON format) in local storage and use it to log in?

Answer №1

Similar questions

Implementing advanced checkbox filtering feature in React

Non-responsive Click Event on Dynamically Created Div Class

Can you please explain the distinction between angular.equals and _.isEqual?

Finding the latitude and longitude coordinates of a point at a specific distance from another using Node.js or JavaScript

Is it possible for a mobile web application to continue running even when the screen is

Error encountered with AngularJS code when attempting to load content from another page using ajax

Utilize or Bring in an external JavaScript file within Ionic 2

Step-by-step guide on concealing elements and subsequently displaying them upon clicking the containing DIV

Verify and generate a notification if the value is null

Tips for resolving import errors encountered after running npm start

What is the timing for when the SignalR connection is terminated from the browser?

Having trouble with res.render() when making an axios request?

Scheduling tasks for jQuery/Javascript like a Cronjob

What are the steps to leverage an Azure function for extracting JSON data from a URL that points to either a JSON file or a text file containing JSON data

Is Selenium suitable for testing single page JavaScript applications?

Python: Transforming Json Timestamp to Datetime

Can you explain how to break down secured routes, users, and posts all within a single .create() function in Mongoose/JavaScript

best practice for parsing JSON strings in Java

NextJS: encountered an error with fallback enabled

Tips on using CSS to hide elements on a webpage with display:none