Tutorials > Protected API Calls

Go into the /app/api folder – any file named route.js is your API endpoint! ✨ For an extra dash of simplicity, reach for the /libs/api.ts helper (it's like an axios wizard with interceptors).

1. Auto error messaging for the general cases such as Please Login , Paid Plan Required to use this feature etc.

2. Redirect to login page upon error 401

3. Add /api as a base URL: converts /api/leads → /leads

🍪 Supabase has your back with authentication using cookies – it's automatic! 🚀 Just fire off a regular API call on the front-end, like a breeze:

/app/components/user-details.tsx

    "use client"

    import { useState } from "react";
    import apiClient from "@/libs/api";
    
    const UserDetails = () => {
        const [isLoading, setIsLoading] = useState(false);
        const supabase = createServerComponentClient({ cookies });

        const {
          data: { session },
        } = await supabase.auth.getSession();
    
        const saveUser = async () => {
        setIsLoading(true);
    
        try {
            const { data } = await apiClient.post("/user", {
            email: session.user.email,
            });
    
            console.log(data);
        } catch (e) {
            console.error(e?.message);
        } finally {
            setIsLoading(false);
        }
        };
    
        return (
        <button className="btn btn-primary" onClick={() => saveUser()}>
            {isLoading && (
            <span className="loading loading-spinner loading-sm"></span>
            )}
            Save User
        </button>
        );
    };
    
    export default UserProfile;
    

🔙 On the backend, we grab the session magic and use it to fetch the user from the database. But first things first – configure that database! 🛠️ Your API file is the secret sauce and should have a vibe like this:

/app/api/user/route.ts

    import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
    import { NextResponse } from "next/server";
    import { cookies } from "next/headers";

    export const dynamic = "force-dynamic";

    export async function POST(req) {
      const supabase = createRouteHandlerClient({ cookies });
      const { data } = await supabase.auth.getSession();
      const { session } = data;

      // Check authentication by the object returned by Supabase
      if (session) {
          const body = await req.json();

          if (!body.email) {
              return NextResponse.json({ error: "Email is required" }, { status: 400 });
          }

          try {
              // For this call, you need to create a table named "users" in your database
              const { data } = await supabase
                  .from("users")
                  .insert({ email: body.email })
                  .select();

              return NextResponse.json({ data }, { status: 200 });
          } catch (e) {
              console.error(e);
              return NextResponse.json(
                  { error: "Something went wrong" },
                  { status: 500 }
              );
          }
      } else {
          // Unauthenticated
          NextResponse.json({ error: "Not signed in" }, { status: 401 });
      }
    }
    