TutorialsAPI call

Any file named route.js in the /app/api folder is an API endpoint. Use the helper /libs/api.js (axios instance with interceptors) to simplify API calls:

Automatically display error messages
Redirect to login page upon error 401
Add /api as a base URL: /api/user/posts → /user/posts

Protected API calls

NextAuth automatically handles the authentication with cookies. Just make a normal API call on the front-end like this:

/app/user-profile/page.js

1"use client"
2
3import { useState } from "react";
4import apiClient from "@/libs/api";
5
6const UserProfile = () => {
7  const [isLoading, setIsLoading] = useState(false);
8
9  const saveUser = async () => {
10    setIsLoading(true);
11
12    try {
13      const { data } = await apiClient.post("/user", {
14        email: "new@gmail.com",
15      });
16
17      console.log(data);
18    } catch (e) {
19      console.error(e?.message);
20    } finally {
21      setIsLoading(false);
22    }
23  };
24
25  return (
26    <button className="btn btn-primary" onClick={() => saveUser()}>
27      {isLoading && (
28        <span className="loading loading-spinner loading-sm"></span>
29      )}
30      Save
31    </button>
32  );
33};
34
35export default UserProfile;
36

In the backend, we get the session and we can use it to retrieve the user from the database. You have to configure the database first. The API file should look like this:

/app/api/user/route.js

1import { NextResponse } from "next/server";
2import { getServerSession } from "next-auth/next";
3import { authOptions } from "@/libs/next-auth";
4import connectMongo from "@/libs/mongoose";
5import User from "@/models/User";
6
7export async function POST(req) {
8  const session = await getServerSession(authOptions);
9
10  if (session) {
11    const { id } = session.user;
12
13    const body = await req.json();
14
15    if (!body.email) {
16      return NextResponse.json({ error: "Email is required" }, { status: 400 });
17    }
18
19    try {
20      await connectMongo();
21
22      const user = await User.findById(id);
23
24      if (!user) {
25        return NextResponse.json({ error: "User not found" }, { status: 404 });
26      }
27
28      user.email = body.email;
29      await user.save();
30
31      return NextResponse.json({ data: user }, { status: 200 });
32    } catch (e) {
33      console.error(e);
34      return NextResponse.json(
35        { error: "Something went wrong" },
36        { status: 500 }
37      );
38    }
39  } else {
40    // Not Signed in
41    return NextResponse.json({ error: "Not signed in" }, { status: 401 });
42  }
43}
44