From 83bb1521f7e2e7c94d0a9a706e3838c51ed2a1f2 Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Sun, 9 Jun 2024 15:42:49 +0800
Subject: [PATCH] Update host setting in auth-callback and add className prop
 to UI page

Included a conditional to check and update host settings in the 'auth-callback.service.ts' file to avoid incorrect host setting outside of Vercel. Additionally, added a className prop to the Page component in the UI package to enhance customization capabilities.
---
 packages/supabase/src/auth-callback.service.ts | 7 +++++++
 packages/ui/src/makerkit/page.tsx              | 9 ++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/supabase/src/auth-callback.service.ts b/packages/supabase/src/auth-callback.service.ts
index 2bf125d86..d76cf8c88 100644
--- a/packages/supabase/src/auth-callback.service.ts
+++ b/packages/supabase/src/auth-callback.service.ts
@@ -36,6 +36,13 @@ class AuthCallbackService {
     const url = new URL(request.url);
     const searchParams = url.searchParams;
 
+    // set the host to the request host
+    // since outside of Vercel it gets set as "localhost"
+    if (url.host.includes('localhost:')) {
+      url.host = request.headers.get('host') ?? params.host;
+      url.port = '';
+    }
+
     const token_hash = searchParams.get('token_hash');
     const type = searchParams.get('type') as EmailOtpType | null;
     const next = searchParams.get('next') ?? params.redirectPath;
diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx
index 50c3a7e2b..52db7850e 100644
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -141,12 +141,19 @@ export function PageHeader({
   children,
   title,
   description,
+  className,
 }: React.PropsWithChildren<{
+  className?: string;
   title?: string | React.ReactNode;
   description?: string | React.ReactNode;
 }>) {
   return (
-    <div className={'flex h-20 items-center justify-between lg:px-4'}>
+    <div
+      className={cn(
+        'flex h-20 items-center justify-between lg:px-4',
+        className,
+      )}
+    >
       {title ? (
         <div className={'flex flex-col space-y-1.5'}>
           <PageTitle>{title}</PageTitle>