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

@@ -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;

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>