API Calls

Any file named route.js in the /app/api folder is an API endpoint.

Protected API calls Supabase automatically handles the authentification with cookies. Just make a normal API call on the front-end like this:

demo.tsx

'use client';
 
import Card from '@/components/card/Card';
import DashboardLayout from '@/components/layout';
import { Database } from '@/types_db';
import { postData } from '@/utils/helpers';
import { Session, User } from '@supabase/supabase-js';
import { redirect, useRouter } from 'next/navigation';
import { MdChevronRight } from 'react-icons/md'; 
 
interface Props {
  ................................
}
 
export default function Settings(props: Props) {
  const router = useRouter();
 
  const redirectToCustomerPortal = async () => {
    try {
      const { url } = await postData({
        url: '/api/create-portal-link',
      });
      router.push(url);
    } catch (error) {
      if (error) return alert((error as Error).message);
    }
  };
 
  const user = props.session?.user;
 
// This can be removed if the page does not require a user authenticated
  if (!props.session) {
    return redirect('/dashboard/signin');
  }
 
  return ( 
      <DashboardLayout
        session={props.session}
        userDetails={props.userDetails}
        user={props.session?.user}
        products={props.products}
        subscription={props.subscription}
        title="Subscription Page"
        description="Manage your subscriptions"
      >
        <div className="relative mt-[70px] w-full flex-col md:mt-0 xl:mt-0">
          ........................
        </div>
      </DashboardLayout> 
  );
}

The props here are passed in the page inside /app folder :

app/demo/page.tsx

import {
  getSession,
  getUserDetails,
  getSubscription,
  getActiveProductsWithPrices,
} from '@/app/supabase-server';
import Subscription from '@/components/dashboard/subscription';
import { redirect } from 'next/navigation';
 
export default async function Account() {
  const [session, userDetails, products, subscription] = await Promise.all([
    getSession(),
    getUserDetails(),
    getActiveProductsWithPrices(),
    getSubscription(),
  ]);
 
  if (!session) {
    return redirect('/dashboard/signin');
  }
  return ( 
    <Subscription
      session={session}
      userDetails={userDetails}
      user={session?.user}
      products={products}
      subscription={subscription}
    />
  );
}

Introduction Authentication