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 to protected routes.

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);
    return response.data;
  } catch (error) {
    console.error('Login failed:', error);
  }
};

This function sends a POST request to your login endpoint with the user's credentials.

What should I do with the token after logging in?

After logging in, you should store the token securely (e.g., in local storage) and include it in the headers of your Axios requests to access protected routes. You can do this by setting the default headers in Axios like this:

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