Remove deprecated supabase auth helpers and update

workflows for creating supabase client

Author: chriscarrollsmith

app/account/page.tsx

@@ -3,10 +3,9 @@ import {
   getSession,
   getUserDetails,
   getSubscription
-} from '@/app/supabase-server';
+} from '@/app/supabase-server-calls';
 import Button from '@/components/ui/Button';
-import { Database } from '@/types_db';
-import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
+import { createClient } from '@/utils/supabase/server';
 import { revalidatePath } from 'next/cache';
 import { cookies } from 'next/headers';
 import Link from 'next/link';
@@ -38,13 +37,15 @@ export default async function Account() {
     'use server';
 
     const newName = formData.get('name') as string;
-    const supabase = createServerActionClient<Database>({ cookies });
+    const cookieStore = cookies();
+    const supabase = createClient(cookieStore);
     const session = await getSession();
-    const user = session?.user;
+    if (!session) return redirect('/signin');
+    const user = session.user;
     const { error } = await supabase
       .from('users')
       .update({ full_name: newName })
-      .eq('id', user?.id);
+      .eq('id', user.id);
     if (error) {
       console.log(error);
     }
@@ -55,7 +56,8 @@ export default async function Account() {
     'use server';
 
     const newEmail = formData.get('email') as string;
-    const supabase = createServerActionClient<Database>({ cookies });
+    const cookieStore = cookies();
+    const supabase = createClient(cookieStore);
     const { error } = await supabase.auth.updateUser({ email: newEmail });
     if (error) {
       console.log(error);

app/api/create-checkout-session/route.ts

@@ -1,9 +1,8 @@
-import { cookies, headers } from 'next/headers';
-import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { createClient } from '@/utils/supabase/server';
 import { stripe } from '@/utils/stripe';
-import { createOrRetrieveCustomer } from '@/utils/supabase-admin';
+import { createOrRetrieveCustomer } from '@/utils/supabase/admin';
 import { getURL } from '@/utils/helpers';
-import { Database } from '@/types_db';
 
 export async function POST(req: Request) {
   if (req.method === 'POST') {
@@ -12,7 +11,8 @@ export async function POST(req: Request) {
 
     try {
       // 2. Get the user from Supabase auth
-      const supabase = createRouteHandlerClient<Database>({cookies});
+      const cookieStore = cookies();
+      const supabase = createClient(cookieStore);
       const {
         data: { user }
       } = await supabase.auth.getUser();

app/api/create-portal-link/route.ts

@@ -1,14 +1,14 @@
 import { cookies } from 'next/headers';
-import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { createClient } from '@/utils/supabase/server';
 import { stripe } from '@/utils/stripe';
-import { createOrRetrieveCustomer } from '@/utils/supabase-admin';
+import { createOrRetrieveCustomer } from '@/utils/supabase/admin';
 import { getURL } from '@/utils/helpers';
-import { Database } from '@/types_db';
 
 export async function POST(req: Request) {
   if (req.method === 'POST') {
     try {
-      const supabase = createRouteHandlerClient<Database>({cookies});
+      const cookieStore = cookies();
+      const supabase = createClient(cookieStore);
       const {
         data: { user }
       } = await supabase.auth.getUser();

app/api/webhooks/route.ts

@@ -4,7 +4,7 @@ import {
   upsertProductRecord,
   upsertPriceRecord,
   manageSubscriptionStatusChange
-} from '@/utils/supabase-admin';
+} from '@/utils/supabase/admin';
 
 const relevantEvents = new Set([
   'product.created',

app/auth/callback/route.ts

@@ -1,16 +1,18 @@
-import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { createClient } from '@/utils/supabase/server'
 import { cookies } from 'next/headers'
 import { NextResponse } from 'next/server'
-
-import type { NextRequest } from 'next/server'
-import type { Database } from '@/types_db'
+import { NextRequest } from 'next/server'
 
 export async function GET(request: NextRequest) {
+  // The `/auth/callback` route is required for the server-side auth flow implemented
+  // by the Auth Helpers package. It exchanges an auth code for the user's session.
+  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
   const requestUrl = new URL(request.url)
   const code = requestUrl.searchParams.get('code')
 
   if (code) {
-    const supabase = createRouteHandlerClient<Database>({ cookies })
+    const cookieStore = cookies()
+    const supabase = createClient(cookieStore)
     await supabase.auth.exchangeCodeForSession(code)
   }
 

app/page.tsx

@@ -3,7 +3,7 @@ import {
   getSession,
   getSubscription,
   getActiveProductsWithPrices
-} from '@/app/supabase-server';
+} from '@/app/supabase-server-calls';
 
 export default async function PricingPage() {
   const [session, products, subscription] = await Promise.all([

app/signin/page.tsx

@@ -1,4 +1,4 @@
-import { getSession } from '@/app/supabase-server';
+import { getSession } from '@/app/supabase-server-calls';
 import AuthUI from './AuthUI';
 
 import { redirect } from 'next/navigation';

app/supabase-provider.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import type { Database } from '@/types_db';
-import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs';
-import type { SupabaseClient } from '@supabase/auth-helpers-nextjs';
+import { createClient } from '@/utils/supabase/client';
+import type { SupabaseClient } from '@supabase/supabase-js';
 import { useRouter } from 'next/navigation';
 import { createContext, useContext, useEffect, useState } from 'react';
 
@@ -17,7 +17,7 @@ export default function SupabaseProvider({
 }: {
   children: React.ReactNode;
 }) {
-  const [supabase] = useState(() => createPagesBrowserClient());
+  const [supabase] = useState(() => createClient());
   const router = useRouter();
 
   useEffect(() => {

app/supabase-server.ts renamed to app/supabase-server-calls.ts

@@ -1,11 +1,11 @@
-import { Database } from '@/types_db';
-import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
+import { createClient } from '@/utils/supabase/server';
 import { cookies } from 'next/headers';
 import { cache } from 'react';
 
-export const createServerSupabaseClient = cache(() =>
-  createServerComponentClient<Database>({ cookies })
-);
+export const createServerSupabaseClient = cache(() => {
+  const cookieStore = cookies();
+  return createClient(cookieStore);
+});
 
 export async function getSession() {
   const supabase = createServerSupabaseClient();

components/ui/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { createServerSupabaseClient } from '@/app/supabase-server';
+import { createServerSupabaseClient } from '@/app/supabase-server-calls';
 
 import Logo from '@/components/icons/Logo';
 import SignOutButton from './SignOutButton';