Refactored Supabase Clients using the new recommended approach by Supabase by centralizing all clients around one single implementation. (#51)

The previous clients have been marked as deprecated and will be removed at some point.

apps/web/app/(marketing)/layout.tsx

@@ -1,11 +1,11 @@
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 import { SiteFooter } from '~/(marketing)/_components/site-footer';
 import { SiteHeader } from '~/(marketing)/_components/site-header';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 async function SiteLayout(props: React.PropsWithChildren) {
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
 
   const {
     data: { user },

apps/web/app/admin/accounts/[id]/page.tsx

@@ -2,7 +2,7 @@ import { cache } from 'react';
 
 import { AdminAccountPage } from '@kit/admin/components/admin-account-page';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
 import { PageBody } from '@kit/ui/page';
 
 interface Params {
@@ -34,9 +34,7 @@ export default AdminGuard(AccountPage);
 const loadAccount = cache(accountLoader);
 
 async function accountLoader(id: string) {
-  const client = getSupabaseServerComponentClient({
-    admin: true,
-  });
+  const client = getSupabaseServerAdminClient();
 
   const { data, error } = await client
     .from('accounts')

apps/web/app/admin/accounts/page.tsx

@@ -2,7 +2,7 @@ import { ServerDataLoader } from '@makerkit/data-loader-supabase-nextjs';
 
 import { AdminAccountsTable } from '@kit/admin/components/admin-accounts-table';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
 import { PageBody, PageHeader } from '@kit/ui/page';
 
 interface SearchParams {
@@ -16,9 +16,7 @@ export const metadata = {
 };
 
 function AccountsPage({ searchParams }: { searchParams: SearchParams }) {
-  const client = getSupabaseServerComponentClient({
-    admin: true,
-  });
+  const client = getSupabaseServerAdminClient();
 
   const page = searchParams.page ? parseInt(searchParams.page) : 1;
   const filters = getFilters(searchParams);

apps/web/app/api/billing/webhook/route.ts

@@ -1,7 +1,7 @@
 import { getBillingEventHandlerService } from '@kit/billing-gateway';
 import { enhanceRouteHandler } from '@kit/next/routes';
 import { getLogger } from '@kit/shared/logger';
-import { getSupabaseRouteHandlerClient } from '@kit/supabase/route-handler-client';
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
 
 import billingConfig from '~/config/billing.config';
 
@@ -20,8 +20,7 @@ export const POST = enhanceRouteHandler(
 
     logger.info(ctx, `Received billing webhook. Processing...`);
 
-    const supabaseClientProvider = () =>
-      getSupabaseRouteHandlerClient({ admin: true });
+    const supabaseClientProvider = () => getSupabaseServerAdminClient();
 
     const service = await getBillingEventHandlerService(
       supabaseClientProvider,

apps/web/app/auth/callback/route.ts

@@ -2,12 +2,12 @@ import { redirect } from 'next/navigation';
 import type { NextRequest } from 'next/server';
 
 import { createAuthCallbackService } from '@kit/supabase/auth';
-import { getSupabaseRouteHandlerClient } from '@kit/supabase/route-handler-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 import pathsConfig from '~/config/paths.config';
 
 export async function GET(request: NextRequest) {
-  const service = createAuthCallbackService(getSupabaseRouteHandlerClient());
+  const service = createAuthCallbackService(getSupabaseServerClient());
 
   const { nextPath } = await service.exchangeCodeForSession(request, {
     joinTeamPath: pathsConfig.app.joinTeam,

apps/web/app/auth/confirm/route.ts

@@ -1,12 +1,12 @@
 import { NextRequest, NextResponse } from 'next/server';
 
 import { createAuthCallbackService } from '@kit/supabase/auth';
-import { getSupabaseRouteHandlerClient } from '@kit/supabase/route-handler-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 import pathsConfig from '~/config/paths.config';
 
 export async function GET(request: NextRequest) {
-  const service = createAuthCallbackService(getSupabaseRouteHandlerClient());
+  const service = createAuthCallbackService(getSupabaseServerClient());
 
   const url = await service.verifyTokenHash(request, {
     joinTeamPath: pathsConfig.app.joinTeam,

apps/web/app/auth/verify/page.tsx

@@ -2,7 +2,7 @@ import { redirect } from 'next/navigation';
 
 import { MultiFactorChallengeContainer } from '@kit/auth/mfa';
 import { checkRequiresMultiFactorAuthentication } from '@kit/supabase/check-requires-mfa';
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 import pathsConfig from '~/config/paths.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
@@ -23,7 +23,7 @@ export const generateMetadata = async () => {
 };
 
 async function VerifyPage(props: Props) {
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
 
   const {
     data: { user },

apps/web/app/home/(user)/_lib/server/load-user-workspace.ts

@@ -1,7 +1,7 @@
 import { cache } from 'react';
 
 import { createAccountsApi } from '@kit/accounts/api';
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
 import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
@@ -19,7 +19,7 @@ export type UserWorkspace = Awaited<ReturnType<typeof loadUserWorkspace>>;
 export const loadUserWorkspace = cache(workspaceLoader);
 
 async function workspaceLoader() {
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
   const api = createAccountsApi(client);
 
   const accountsPromise = shouldLoadAccounts

apps/web/app/home/(user)/billing/_lib/server/personal-account-billing-page.loader.ts

@@ -5,7 +5,7 @@ import { cache } from 'react';
 import { z } from 'zod';
 
 import { createAccountsApi } from '@kit/accounts/api';
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 /**
  * The variable BILLING_MODE represents the billing mode for a service. It can
@@ -33,7 +33,7 @@ export const loadPersonalAccountBillingPageData = cache(
 );
 
 function personalAccountBillingPageDataLoader(userId: string) {
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
   const api = createAccountsApi(client);
 
   const data =

apps/web/app/home/(user)/billing/_lib/server/server-actions.ts

@@ -3,7 +3,7 @@
 import { redirect } from 'next/navigation';
 
 import { enhanceAction } from '@kit/next/actions';
-import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
 
@@ -26,7 +26,7 @@ export const createPersonalAccountCheckoutSession = enhanceAction(
       throw new Error('Personal account billing is not enabled');
     }
 
-    const client = getSupabaseServerActionClient();
+    const client = getSupabaseServerClient();
     const service = createUserBillingService(client);
 
     return await service.createCheckoutSession(data);
@@ -46,7 +46,7 @@ export const createPersonalAccountBillingPortalSession = enhanceAction(
       throw new Error('Personal account billing is not enabled');
     }
 
-    const client = getSupabaseServerActionClient();
+    const client = getSupabaseServerClient();
     const service = createUserBillingService(client);
 
     // get url to billing portal

apps/web/app/home/[account]/_lib/server/team-account-billing-page.loader.ts

@@ -4,7 +4,7 @@ import { cache } from 'react';
 
 import { z } from 'zod';
 
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createTeamAccountsApi } from '@kit/team-accounts/api';
 
 /**
@@ -29,7 +29,7 @@ const BILLING_MODE = z
 export const loadTeamAccountBillingPage = cache(teamAccountBillingPageLoader);
 
 function teamAccountBillingPageLoader(accountId: string) {
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
   const api = createTeamAccountsApi(client);
 
   const data =

apps/web/app/home/[account]/_lib/server/team-account-workspace.loader.ts

@@ -4,7 +4,7 @@ import { cache } from 'react';
 
 import { redirect } from 'next/navigation';
 
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createTeamAccountsApi } from '@kit/team-accounts/api';
 
 import pathsConfig from '~/config/paths.config';
@@ -26,7 +26,7 @@ export type TeamAccountWorkspace = Awaited<
 export const loadTeamWorkspace = cache(workspaceLoader);
 
 async function workspaceLoader(accountSlug: string) {
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
   const api = createTeamAccountsApi(client);
 
   const [workspace, user] = await Promise.all([

apps/web/app/home/[account]/billing/_lib/server/server-actions.ts

@@ -3,7 +3,7 @@
 import { redirect } from 'next/navigation';
 
 import { enhanceAction } from '@kit/next/actions';
-import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
 
@@ -30,7 +30,7 @@ export const createTeamAccountCheckoutSession = enhanceAction(
       throw new Error('Team account billing is not enabled');
     }
 
-    const client = getSupabaseServerActionClient();
+    const client = getSupabaseServerClient();
     const service = createTeamBillingService(client);
 
     return service.createCheckout(data);
@@ -53,7 +53,7 @@ export const createBillingPortalSession = enhanceAction(
 
     const params = TeamBillingPortalSchema.parse(Object.fromEntries(formData));
 
-    const client = getSupabaseServerActionClient();
+    const client = getSupabaseServerClient();
     const service = createTeamBillingService(client);
 
     // get url to billing portal

apps/web/app/home/[account]/billing/_lib/server/team-billing.service.ts

@@ -8,7 +8,7 @@ import { LineItemSchema } from '@kit/billing';
 import { getBillingGatewayProvider } from '@kit/billing-gateway';
 import { getLogger } from '@kit/shared/logger';
 import { requireUser } from '@kit/supabase/require-user';
-import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createTeamAccountsApi } from '@kit/team-accounts/api';
 
 import appConfig from '~/config/app.config';
@@ -150,7 +150,7 @@ class TeamBillingService {
     accountId: string;
     slug: string;
   }) {
-    const client = getSupabaseServerActionClient();
+    const client = getSupabaseServerClient();
     const logger = await getLogger();
 
     logger.info(

apps/web/app/home/[account]/billing/return/page.tsx

@@ -4,7 +4,7 @@ import { notFound, redirect } from 'next/navigation';
 
 import { getBillingGatewayProvider } from '@kit/billing-gateway';
 import { BillingSessionStatus } from '@kit/billing-gateway/components';
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 import billingConfig from '~/config/billing.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
@@ -75,7 +75,7 @@ function BlurryBackdrop() {
 async function loadCheckoutSession(sessionId: string) {
   await requireUserInServerComponent();
 
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
   const gateway = await getBillingGatewayProvider(client);
 
   const session = await gateway.retrieveCheckoutSession({

apps/web/app/home/[account]/members/page.tsx

@@ -1,6 +1,6 @@
 import { PlusCircle } from 'lucide-react';
 
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import {
   AccountInvitationsTable,
   AccountMembersTable,
@@ -42,7 +42,7 @@ export const generateMetadata = async () => {
 };
 
 async function TeamAccountMembersPage({ params }: Params) {
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
 
   const [members, invitations, canAddMember, { user, account }] =
     await loadMembersPageData(client, params.account);

apps/web/app/home/[account]/settings/page.tsx

@@ -1,4 +1,4 @@
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createTeamAccountsApi } from '@kit/team-accounts/api';
 import { TeamAccountSettingsContainer } from '@kit/team-accounts/components';
 import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
@@ -32,7 +32,7 @@ const paths = {
 };
 
 async function TeamAccountSettingsPage(props: Props) {
-  const api = createTeamAccountsApi(getSupabaseServerComponentClient());
+  const api = createTeamAccountsApi(getSupabaseServerClient());
   const data = await api.getTeamAccount(props.params.account);
 
   const account = {

apps/web/app/join/page.tsx

@@ -5,7 +5,8 @@ import { ArrowLeft } from 'lucide-react';
 
 import { AuthLayoutShell } from '@kit/auth/shared';
 import { requireUser } from '@kit/supabase/require-user';
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
 import { createTeamAccountsApi } from '@kit/team-accounts/api';
 import { AcceptInvitationContainer } from '@kit/team-accounts/components';
 import { Button } from '@kit/ui/button';
@@ -40,7 +41,7 @@ async function JoinTeamAccountPage({ searchParams }: Context) {
     notFound();
   }
 
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
   const auth = await requireUser(client);
 
   // if the user is not logged in or there is an error
@@ -59,7 +60,7 @@ async function JoinTeamAccountPage({ searchParams }: Context) {
   }
 
   // get api to interact with team accounts
-  const adminClient = getSupabaseServerComponentClient({ admin: true });
+  const adminClient = getSupabaseServerAdminClient();
   const api = createTeamAccountsApi(client);
 
   // the user is logged in, we can now check if the token is valid

apps/web/app/not-found.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 import { ArrowLeft } from 'lucide-react';
 
-import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
@@ -21,7 +21,7 @@ export const generateMetadata = async () => {
 };
 
 const NotFoundPage = async () => {
-  const client = getSupabaseServerComponentClient();
+  const client = getSupabaseServerClient();
 
   const {
     data: { user },