API Calls

This document provides an overview of setting up and using API calls in your boilerplate project. We'll cover the creation and usage of API endpoints for user management, including fetching user data and deleting users. Additionally, we'll explain how API routes are protected and the role of middleware in this setup.

API Routes

In this boilerplate, any file named route.js in the /app/api folder is an API endpoint. These endpoints handle various operations such as fetching data, creating records, updating records, and deleting records.

Protected API Routes

API routes in this boilerplate are protected to ensure that only authenticated users can access certain endpoints. Protection is typically achieved using authentication mechanisms provided by NextAuth or Supabase. The authentication status is checked in each API route, and only authorized requests are allowed to proceed.

Middleware

Middleware functions play a crucial role in handling authentication and session management. They intercept requests to ensure that users are authenticated before they reach the API route. This boilerplate includes middleware for managing user sessions and authentication state.

Example API Endpoints

NextAuth with MongoDB

NextAuth with MongoDB

In this setup, we use NextAuth for authentication and MongoDB as the database. API endpoints for managing users are set up in /app/api/users/route.js. These endpoints handle operations like fetching user data with pagination and deleting users by their ID. Middleware ensures that only authenticated requests can access these endpoints.

Supabase

Supabase

In this setup, we use Supabase for both authentication and database management. API endpoints for managing users are set up in /app/api/users/route.js. These endpoints handle operations like fetching user data with pagination and deleting users by their ID. Middleware ensures that only authenticated requests can access these endpoints.

Making API Calls from the Frontend

Both setups use similar methods for making API calls from the frontend. You can use the built-in fetch function in JavaScript to interact with these endpoints. Ensure that the requests include credentials to maintain the user session.

Example of Fetching Users

const fetchUsers = async (page = 1, limit = 10) => {
  try {
    const response = await fetch(`/api/users?page=${page}&limit=${limit}`, {
      method: 'GET',
    });
    const data = await response.json();
    if (data.success) {
      console.log('Users:', data.data);
    } else {
      console.error('Error fetching users:', data.error);
    }
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

Example of Deleting a User

const deleteUser = async (userId) => {
  try {
    const response = await fetch('/api/users', {
      method: 'DELETE',
      body: JSON.stringify({ id: userId })
    });
    const data = await response.json();
    if (data.success) {
      console.log('User deleted:', data);
    } else {
      console.error('Error deleting user:', data.error);
    }
  } catch (error) {
    console.error('Error deleting user:', error);
  }
};

Conclusion

This boilerplate project simplifies setting up and using API endpoints. By leveraging middleware and authentication mechanisms like NextAuth and Supabase, it ensures that API routes are protected and only accessible by authenticated users. For more detailed information, you can refer to the Next.js documentation and the NextAuth.js documentation or the Supabase documentation.