How do I implement authentication in a Next.js app using Axios?

How do I implement authentication in a Next.js app using Axios?

To implement authentication in a Next.js app using Axios, you can follow these steps: 1. Set up your API for authentication. 2. Use Axios to send login requests to your API. 3. Store the authentication token in local storage or cookies. 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 (email, password) => {
  try {
    const response = await axios.post('/api/login', { email, password });
    localStorage.setItem('token', response.data.token);
  } catch (error) {
    console.error('Login failed:', error);
  }
};

This function sends a POST request to your login API and stores the token.

What about protecting routes in Next.js?

To protect routes, you can create a higher-order component (HOC) that checks for the authentication token before rendering the page. If the token is not present, redirect the user to the login page.

How can I log out the user?

You can log out the user by removing the token from local storage and redirecting them to the login page. Here's a simple function:

const logout = () => {
  localStorage.removeItem('token');
  window.location.href = '/login';
};