From 761c5d60801f6d443ff18d6af74109d8d8b73d90 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 15 Apr 2024 23:38:54 +0800
Subject: [PATCH] Update UI elements and enhance security measures

Changes are introduced primarily to the site header buttons and styles, as well as some content corrections. Also, the SUPABASE_SERVICE_ROLE_KEY environment variable is now sanitized before use to prevent potential security vulnerabilities. The function 'taintUniqueValue' from React is used to ensure this process. These changes align with good practices for both UI/UX and security.
---
 .../_components/site-header-account-section.tsx  |  7 ++++++-
 .../app/(marketing)/_components/site-header.tsx  |  2 +-
 apps/web/app/(marketing)/page.tsx                | 15 +++++++++------
 apps/web/next.config.mjs                         |  1 +
 packages/supabase/src/get-service-role-key.ts    | 16 ++++++++++++----
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index 8b40a0fd9..ef6f2f089 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -68,7 +68,12 @@ function AuthButtons() {
       </div>
 
       <Link href={pathsConfig.auth.signUp}>
-        <Button variant={'ghost'} className={'border border-primary'}>
+        <Button
+          variant={'ghost'}
+          className={
+            'rounded-full border border-primary hover:bg-primary hover:text-primary-foreground'
+          }
+        >
           <Trans i18nKey={'auth:getStarted'} />
           <ChevronRight className={'h-4'} />
         </Button>
diff --git a/apps/web/app/(marketing)/_components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
index 124e14013..33f08d6cb 100644
--- a/apps/web/app/(marketing)/_components/site-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-header.tsx
@@ -6,7 +6,7 @@ import { AppLogo } from '~/components/app-logo';
 
 export function SiteHeader(props: { user?: User | null }) {
   return (
-    <div className={'border-b'}>
+    <div>
       <div className={'container mx-auto'}>
         <div className="flex h-16 items-center justify-between">
           <div className={'flex w-6/12 items-center space-x-8'}>
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 241392cad..ae0664a92 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -282,7 +282,7 @@ function HeroTitle({ children }: React.PropsWithChildren) {
 
 function Pill(props: React.PropsWithChildren) {
   return (
-    <h2 className={'rounded-full border px-4 py-2 text-sm'}>
+    <h2 className={'rounded-full border px-4 py-2 text-center text-sm'}>
       <Sparkle className={'inline-block h-4'} />
       {props.children}
     </h2>
@@ -321,20 +321,23 @@ function RightFeatureContainer(props: React.PropsWithChildren) {
 function MainCallToActionButton() {
   return (
     <div className={'flex space-x-2'}>
-      <Button size={'lg'}>
-        <Link href={'/auth/sign-up'}>
+      <Link href={'/auth/sign-up'}>
+        <Button
+          size={'lg'}
+          className={'rounded-full py-6 text-base font-medium'}
+        >
           <span className={'flex items-center space-x-0.5'}>
             <span>Get Started</span>
 
             <ChevronRight
               className={
                 'h-5 animate-in fade-in slide-in-from-left-8' +
-                ' delay-1000 duration-1000 zoom-in fill-mode-both'
+                ' delay-800 duration-1000 zoom-in fill-mode-both'
               }
             />
           </span>
-        </Link>
-      </Button>
+        </Button>
+      </Link>
     </div>
   );
 }
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
index fa81dfbc3..bfd5b58de 100644
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -32,6 +32,7 @@ const config = {
   },
   experimental: {
     mdxRs: true,
+    taint: true,
     instrumentationHook: true,
     optimizePackageImports: [
       'recharts',
diff --git a/packages/supabase/src/get-service-role-key.ts b/packages/supabase/src/get-service-role-key.ts
index 84d4585e2..47edcc41a 100644
--- a/packages/supabase/src/get-service-role-key.ts
+++ b/packages/supabase/src/get-service-role-key.ts
@@ -1,5 +1,7 @@
 import 'server-only';
 
+import { experimental_taintUniqueValue as taintUniqueValue } from 'react';
+
 import { z } from 'zod';
 
 const message =
@@ -11,16 +13,22 @@ const message =
  * ONLY USE IN SERVER-SIDE CODE. DO NOT EXPOSE THIS TO CLIENT-SIDE CODE.
  */
 export function getServiceRoleKey() {
-  const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
-
-  return z
+  const serviceRoleKey = z
     .string({
       required_error: message,
     })
     .min(1, {
       message: message,
     })
-    .parse(serviceRoleKey);
+    .parse(process.env.SUPABASE_SERVICE_ROLE_KEY);
+
+  taintUniqueValue(
+    'Do not pass the service role key to the client',
+    process,
+    serviceRoleKey,
+  );
+
+  return serviceRoleKey;
 }
 
 /**