Setup cloudflare turnstile support

.env.development

@@ -2,4 +2,5 @@ NEXT_PUBLIC_RUN_ENV=dev
 NEXT_PUBLIC_TICKETING_BASE_URL='https://xclhkh0duc.execute-api.us-east-1.amazonaws.com/default'
 NEXT_PUBLIC_MEMBERSHIP_BASE_URL='https://infra-membership-api.aws.qa.acmuiuc.org'
 NEXT_PUBLIC_MERCH_API_BASE_URL='https://merchapi.acm.illinois.edu'
-NEXT_PUBLIC_EVENTS_API_BASE_URL='https://core.aws.qa.acmuiuc.org'
+NEXT_PUBLIC_CORE_API_BASE_URL='https://core.aws.qa.acmuiuc.org'
+NEXT_PUBLIC_TURNSTILE_SITE_KEY='1x00000000000000000000AA'

.env.production → .env.prod

@@ -2,4 +2,5 @@ NEXT_PUBLIC_RUN_ENV=prod
 NEXT_PUBLIC_TICKETING_BASE_URL='https://ticketing.aws.acmuiuc.org'
 NEXT_PUBLIC_MEMBERSHIP_BASE_URL='https://infra-membership-api.aws.acmuiuc.org'
 NEXT_PUBLIC_MERCH_API_BASE_URL='https://merchapi.acm.illinois.edu'
-NEXT_PUBLIC_EVENTS_API_BASE_URL='https://core.acm.illinois.edu'
+NEXT_PUBLIC_CORE_API_BASE_URL='https://core.acm.illinois.edu'
+NEXT_PUBLIC_TURNSTILE_SITE_KEY='0x4AAAAAACLtNvWF7VjCKZfe'

.env.staging

@@ -2,4 +2,5 @@ NEXT_PUBLIC_RUN_ENV=dev
 NEXT_PUBLIC_TICKETING_BASE_URL='https://xclhkh0duc.execute-api.us-east-1.amazonaws.com/default'
 NEXT_PUBLIC_MEMBERSHIP_BASE_URL='https://infra-membership-api.aws.qa.acmuiuc.org'
 NEXT_PUBLIC_MERCH_API_BASE_URL='https://merchapi.acm.illinois.edu'
-NEXT_PUBLIC_EVENTS_API_BASE_URL='https://core.acm.illinois.edu'
+NEXT_PUBLIC_CORE_API_BASE_URL='https://core.acm.illinois.edu'
+NEXT_PUBLIC_TURNSTILE_SITE_KEY='1x00000000000000000000AA'

.github/workflows/deploy.yml

@@ -37,7 +37,12 @@ jobs:
         run: yarn -D
 
       - name: Build website
-        run: yarn build
+        run: |
+          if [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            yarn build:prod
+          else
+            yarn build:staging
+          fi
 
       - name: Deploy to Cloudflare
         id: deploy

package.json

@@ -6,8 +6,10 @@
   "scripts": {
     "dev": "next dev",
     "start": "yarn dev",
-    "dev:events": "cross-env NEXT_PUBLIC_EVENTS_API_BASE_URL=https://infra-events-api.aws.qa.acmuiuc.org && next dev",
-    "build": "next build && cp src/_redirects build/_redirects",
+    "build:dev": "env-cmd -f .env.development next build && yarn postbuild",
+    "build:prod": "env-cmd -f .env.prod next build && yarn postbuild",
+    "build:staging": "env-cmd -f .env.staging next build && yarn postbuild",
+    "postbuild": "cp src/_redirects build/_redirects",
     "serve": "serve build",
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
@@ -19,6 +21,7 @@
     "@azure/msal-browser": "^4.15.0",
     "@azure/msal-react": "^3.0.15",
     "@heroui/react": "2.7.6",
+    "@marsidev/react-turnstile": "^1.4.1",
     "axios": "^0.28.0",
     "framer-motion": "^10.17.9",
     "lottie-react": "^2.3.1",
@@ -47,6 +50,7 @@
     "@types/react-dom": "^18",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
+    "env-cmd": "^11.0.0",
     "eslint": "^8",
     "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^10.1.2",
@@ -63,4 +67,4 @@
     "jackspeak": "2.1.1"
   },
   "packageManager": "yarn@1.22.19"
-}
+}

src/app/(main)/calendar/page.tsx

@@ -33,7 +33,7 @@ const Calendar = () => {
   const [validOrganizations, setValidOrganizations] =
     useState<string[]>(OrganizationList);
   useEffect(() => {
-    const baseurl = process.env.NEXT_PUBLIC_EVENTS_API_BASE_URL;
+    const baseurl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL;
     if (!baseurl) {
       return setAllEvents([]);
     }

src/app/(membership)/admin/sync/page.tsx

@@ -30,7 +30,7 @@ interface ErrorCode {
   message: string;
 }
 
-const baseUrl = process.env.NEXT_PUBLIC_EVENTS_API_BASE_URL;
+const baseUrl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL;
 const WrappedSync = () => {
   return (
     <Suspense>

src/app/(membership)/check-membership/page.tsx

@@ -37,8 +37,8 @@ enum InputStatus {
   VALID,
 }
 
-const baseUrl = process.env.NEXT_PUBLIC_EVENTS_API_BASE_URL;
-const walletApiBaseUrl = process.env.NEXT_PUBLIC_EVENTS_API_BASE_URL;
+const baseUrl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL;
+const walletApiBaseUrl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL;
 
 const Payment = () => {
   const [netId, setNetId] = useState('');

src/app/(membership)/membership/page.tsx

@@ -38,7 +38,7 @@ enum InputStatus {
   VALID,
 }
 
-const baseUrl = process.env.NEXT_PUBLIC_EVENTS_API_BASE_URL;
+const baseUrl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL;
 const WrappedPayment = () => {
   return (
     <Suspense>

src/app/(membership)/merch/page.tsx

@@ -25,6 +25,7 @@ import Layout from '../MembershipLayout';
 import { IPublicClientApplication, AccountInfo } from '@azure/msal-browser';
 import { getUserAccessToken, initMsalClient } from '@/utils/msal';
 import { syncIdentity } from '@/utils/api';
+import { Turnstile } from '@marsidev/react-turnstile';
 
 const decimalHelper = (num: number) => {
   if (Number.isInteger(num)) {
@@ -47,7 +48,11 @@ enum InputStatus {
 }
 
 const baseUrl = process.env.NEXT_PUBLIC_MERCH_API_BASE_URL;
-const coreBaseUrl = process.env.NEXT_PUBLIC_EVENTS_API_BASE_URL;
+const coreBaseUrl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL;
+const turnstileSiteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY;
+if (!turnstileSiteKey) {
+  throw new Error("Turnstile site key missing.")
+}
 
 const WrappedMerchItem = () => {
   return (
@@ -61,6 +66,7 @@ const MerchItem = () => {
   const itemid = useSearchParams().get('id') || '';
   const [merchList, setMerchList] = useState<Record<string, any>>({});
   const [pca, setPca] = useState<IPublicClientApplication | null>(null);
+  const [token, setToken] = React.useState<string>()
 
   // Form State
   const [email, setEmail] = useState('');
@@ -79,6 +85,7 @@ const MerchItem = () => {
 
   const modalErrorMessage = useDisclosure();
   const [errorMessage, setErrorMessage] = useState<ErrorCode | null>(null);
+  const turnstileWidget = (id: string) => <Turnstile id={id} siteKey={turnstileSiteKey} onSuccess={setToken} />;
 
   useEffect(() => {
     (async () => {
@@ -243,27 +250,48 @@ const MerchItem = () => {
     if (!pca) {
       setErrorMessage({ code: 403, message: 'Authentication service is not initialized.' });
       modalErrorMessage.onOpen();
+      setIsLoading(false);
+      return;
+    }
+
+    if (!token) {
+      setErrorMessage({ code: 400, message: 'Please complete the security verification.' });
+      modalErrorMessage.onOpen();
+      setIsLoading(false);
       return;
     }
 
     const accessToken = await getUserAccessToken(pca);
     if (!accessToken) {
       setErrorMessage({ code: 403, message: 'Failed to retrieve authentication token.' });
       modalErrorMessage.onOpen();
+      setIsLoading(false);
       return;
     }
 
     await syncIdentity(accessToken);
 
     const url = `${baseUrl}/api/v1/checkout/session?itemid=${itemid}&size=${size}&quantity=${quantity}`;
-    axios.get(url, { headers: { 'x-uiuc-token': accessToken } })
+    axios.get(url, {
+      headers: {
+        'x-uiuc-token': accessToken,
+        'x-turnstile-token': token,
+      }
+    })
       .then(response => window.location.replace(response.data))
       .catch(handleApiError);
   };
 
   const purchaseHandler = async () => {
     setIsLoading(true);
 
+    if (!token) {
+      setErrorMessage({ code: 400, message: 'Please complete the security verification.' });
+      modalErrorMessage.onOpen();
+      setIsLoading(false);
+      return;
+    }
+
     if (selectedTab === 'illinois') {
       if (!pca || !user) {
         setErrorMessage({ code: 403, message: 'You must be logged in to purchase with Illinois Checkout.' });
@@ -275,7 +303,11 @@ const MerchItem = () => {
     } else { // Guest flow
       // Non-Illinois email, use guest checkout
       const url = `${baseUrl}/api/v1/checkout/session?itemid=${itemid}&size=${size}&quantity=${quantity}&email=${email}`;
-      axios.get(url) // No auth token needed
+      axios.get(url, {
+        headers: {
+          'x-turnstile-token': token,
+        }
+      })
         .then(response => window.location.replace(response.data))
         .catch(handleApiError);
     }
@@ -431,6 +463,7 @@ const MerchItem = () => {
                           color={inputQuantityStatus === InputStatus.INVALID ? 'danger' : 'default'}
                           errorMessage={inputQuantityStatus === InputStatus.INVALID && 'Invalid Quantity'}
                         />
+                        {turnstileWidget('wid1')}
                         <Button
                           color="primary" size="lg"
                           isDisabled={!isFormValidated || isLoading || totalCapacity() === 0}
@@ -479,6 +512,7 @@ const MerchItem = () => {
                       color={inputQuantityStatus === InputStatus.INVALID ? 'danger' : 'default'}
                       errorMessage={inputQuantityStatus === InputStatus.INVALID && 'Invalid Quantity'}
                     />
+                    {turnstileWidget('wid2')}
                     <Button
                       color="primary" size="lg"
                       isDisabled={!isFormValidated || isLoading || totalCapacity() === 0}

src/utils/api.ts

@@ -2,7 +2,7 @@ import { IEvent } from '@/components/Events/events';
 import { transformApiDates } from '@/utils/dateutils';
 import axios from 'axios';
 
-const baseUrl = process.env.NEXT_PUBLIC_EVENTS_API_BASE_URL || '';
+const baseUrl = process.env.NEXT_PUBLIC_CORE_API_BASE_URL || '';
 
 export async function fetchUpcomingEvents() {
   try {

yarn.lock

@@ -1009,6 +1009,11 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@commander-js/extra-typings@^13.1.0":
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/@commander-js/extra-typings/-/extra-typings-13.1.0.tgz#026e29b04401c92fc4307223fbaadf1ff3e5551e"
+  integrity sha512-q5P52BYb1hwVWE6dtID7VvuJWrlfbCv4klj7BjUUOqMz4jbSZD4C9fJ9lRjL2jnBGTg+gDDlaXN51rkWcLk4fg==
+
 "@cspotcode/source-map-support@0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
@@ -2724,6 +2729,11 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@marsidev/react-turnstile@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@marsidev/react-turnstile/-/react-turnstile-1.4.1.tgz#63d67063f2618f212b17f61c2ec2ebf967463894"
+  integrity sha512-1jE0IjvB8z+q1NFRs3149gXzXwIzXQWqQjn9fmAr13BiE3RYLWck5Me6flHYE90shW5L12Jkm6R1peS1OnA9oQ==
+
 "@mdx-js/react@^2.1.5":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-2.3.0.tgz#4208bd6d70f0d0831def28ef28c26149b03180b3"
@@ -7266,9 +7276,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001702, caniuse-lite@^1.0.30001718:
-  version "1.0.30001721"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001721.tgz#36b90cd96901f8c98dd6698bf5c8af7d4c6872d7"
-  integrity sha512-cOuvmUVtKrtEaoKiO0rSc29jcjwMwX5tOHDy4MgVFEWiUXj4uBMJkwI8MDySkgXidpMiHUcviogAvFi4pA2hDQ==
+  version "1.0.30001766"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz"
+  integrity sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -7513,6 +7523,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-13.1.0.tgz#776167db68c78f38dcce1f9b8d7b8b9a488abf46"
+  integrity sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -8288,6 +8303,15 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+env-cmd@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/env-cmd/-/env-cmd-11.0.0.tgz#5912634c865f294a74745747d852aae07fd0d9a5"
+  integrity sha512-gnG7H1PlwPqsGhFJNTv68lsDGyQdK+U9DwLVitcj1+wGq7LeOBgUzZd2puZ710bHcH9NfNeGWe2sbw7pdvAqDw==
+  dependencies:
+    "@commander-js/extra-typings" "^13.1.0"
+    commander "^13.1.0"
+    cross-spawn "^7.0.6"
+
 envinfo@^7.7.3:
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.14.0.tgz#26dac5db54418f2a4c1159153a0b2ae980838aae"