How do I implement authentication in a React app using Axios?

How do I implement authentication in a React app using Axios?

To implement authentication in a React app using Axios, you can follow these steps: 1. Set up your backend API for authentication. 2. Use Axios to send login requests to your API. 3. Store the received token in local storage or context. 4. Use the token for subsequent requests.

Can you show me a code example for the login request?

Sure! Here's a simple example:

import axios from 'axios';

const login = async (credentials) => {
  try {
    const response = await axios.post('/api/login', credentials);
    localStorage.setItem('token', response.data.token);
  } catch (error) {
    console.error('Login failed:', error);
  }
};

This function sends a POST request with user credentials and stores the token.

What should I do with the token after logging in?

After logging in, you should include the token in the headers of your Axios requests to access protected routes. You can do this by setting the default headers:

axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;