fix: CLARITY_ID and CLARITY_CONSENT variables are baked in on build time

.env.development

@@ -2,14 +2,14 @@
 # Copy this file to .env, .env.local, or .env.production and fill in the values
 
 # Mail credentials for redirecting form inquiries (see app/_utils/sendInquiry.ts)
-SMTP_HOST=mailserver			# Address of your SMTP server
-SMTP_PORT=port					# Port of your SMTP server
-SMTP_USER=username				# Username of your email bot account (usually same, as email address)
-SMTP_PASSWORD=password			# Password of your email bot account
-SMTP_FROM_EMAIL=email			# Email address which will be displayed in "From" field
-SMTP_TO_EMAIL=email				# Email to which emails will be sent
+SMTP_HOST=mailserver		# Address of your SMTP server
+SMTP_PORT=port				# Port of your SMTP server
+SMTP_USER=username			# Username of your email bot account (usually same, as email address)
+SMTP_PASSWORD=password		# Password of your email bot account
+SMTP_FROM_EMAIL=email		# Email address which will be displayed in "From" field
+SMTP_TO_EMAIL=email			# Email to which emails will be sent
 
-DOMAIN_NAME=example.com			# Your domain name
-RESUME_URL=URL					# Location of the resume PDF
-CLARITY_ID=string				# Clarity Analytics ID (optional, remove to disable)
-NEXT_PUBLIC_CLARITY_CONSENT=1	# 1 if you need to request explicit consent from user, 0 if not (requires CLARITY_ID)
+DOMAIN_NAME=example.com		# Your domain name
+RESUME_URL=URL				# Location of the resume PDF
+CLARITY_ID=string			# Clarity Analytics ID (optional, remove to disable)
+CLARITY_CONSENT=1			# 1 if you need to request explicit consent from user, 0 if not (requires CLARITY_ID)

app/_components/CookieBanner.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { acceptCookies, dismissCookies, getCookieChoice, rejectCookies, requireExcplicitConsent } from "@/_utils/analytics/client";
+import { acceptCookies, dismissCookies, getCookieChoice, rejectCookies } from "@/_utils/analytics/client";
 import { Dismiss24Regular } from "@fluentui/react-icons";
 import React, { useCallback, useEffect, useState } from "react";
 import Button from "./Button";
 import cls from "./CookieBanner.module.scss";
 
-const CookieBanner: React.FC = () =>
+const CookieBanner: React.FC<{ askForConsent: boolean; }> = props =>
 {
 	const [visible, setVisible] = useState(false);
 
@@ -56,7 +56,7 @@ const CookieBanner: React.FC = () =>
 				</p>
 			</Button>
 
-			{ requireExcplicitConsent ?
+			{ props.askForConsent ?
 				<div className={ cls.controls }>
 					<Button onClick={ accept }>Accept</Button>
 					<Button onClick={ reject }>Reject</Button>

app/_components/RevokeConsentButton.tsx

@@ -10,7 +10,6 @@ const RevokeConsentButton: React.FC = () =>
 
 	useEffect(() =>
 	{
-		console.log("getCookieChoice", getCookieChoice());
 		setHasConsent(getCookieChoice() === "accepted");
 	}, []);
 

app/_utils/analytics/client.ts

@@ -17,8 +17,6 @@ export const dismissCookies = (): void =>
 	setCookie("CC", "", 1209600);	// 14 days
 };
 
-export const requireExcplicitConsent: boolean = process.env.NEXT_PUBLIC_CLARITY_CONSENT === "1";
-
 export const getCookieChoice = (): "accepted" | "rejected" | "acknowledged" | "none" =>
 {
 	switch (getCookie("CC"))

app/_utils/analytics/server.ts

@@ -1,10 +1,25 @@
+import { unstable_noStore } from "next/cache";
 import { headers } from "next/headers";
 
 /**
  * Check if Clarity is enabled
  * @returns true if Clarity is enabled
  */
-export const analyticsEnabled = (): boolean => !!process.env.CLARITY_ID;
+export const analyticsEnabled = (): boolean =>
+{
+	unstable_noStore();
+	return !!process.env.CLARITY_ID;
+};
+
+/**
+ * Check if Clarity requires explicit consent
+ * @returns true if Clarity requires explicit consent
+ */
+export const requireExcplicitConsent = (): boolean =>
+{
+	unstable_noStore();
+	return process.env.CLARITY_CONSENT === "1";
+};
 
 /**
  * Check if Clarity is enabled and the browser didn't send a DNT signal

app/layout.tsx

@@ -5,7 +5,7 @@ import { PropsWithChildren } from "react";
 import CookieBanner from "./_components/CookieBanner";
 import Footer from "./_components/Footer";
 import Header from "./_components/Header";
-import { canLoadAnalytics } from "./_utils/analytics/server";
+import { canLoadAnalytics, requireExcplicitConsent } from "./_utils/analytics/server";
 import fonts from "./fonts";
 import "./globals.scss";
 
@@ -28,7 +28,7 @@ export default function RootLayout(props: PropsWithChildren)
 				<Script id="ms-clarity" src="/clarity.js" data-id={ process.env.CLARITY_ID } />
 			}
 			<body>
-				{ canLoadAnalytics() && <CookieBanner /> }
+				{ canLoadAnalytics() && <CookieBanner askForConsent={ requireExcplicitConsent() } /> }
 				<Header />
 				{ props.children }
 				<Footer />