How do I use fetch for authentication in JavaScript?

How do I use fetch for authentication in JavaScript?

You can use the Fetch API to make requests to your authentication endpoint. Here's a basic example:

fetch('https://yourapi.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'yourUsername', password: 'yourPassword' })
})
.then(response => response.json())
.then(data => {
  if (data.token) {
    // Save the token for future requests
    localStorage.setItem('authToken', data.token);
  }
})
.catch(error => console.error('Error:', error));

What should I do with the token after I get it?

After receiving the token, you should store it securely, typically in localStorage or sessionStorage. Use it in the Authorization header for subsequent requests to protected routes.

How do I include the token in my fetch requests?

You can include the token in the headers of your fetch requests like this:

fetch('https://yourapi.com/protected', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('authToken')
  }
})
.then(response => response.json())
.then(data => console.log(data));