feat(app): add Cloudflare Turnstile widget for OpenBuild OAuth

Author: ourai

.env.example

@@ -10,3 +10,6 @@ NEXT_PUBLIC_ASPECTA_ID=
 
 NEXT_PUBLIC_GA_ID=
 NEXT_PUBLIC_GA_KEY=
+
+NEXT_PUBLIC_WEB3BIO=
+NEXT_PUBLIC_TURNSTILE_SITEKEY=

src/app/oauth/page.js

@@ -23,6 +23,7 @@ import Logo from 'public/images/svg/logo-black.svg';
 import { useEffect, useState } from 'react';
 
 import { Button } from '@/components/Button';
+import CloudflareTurnstile from '@/components/control/cf-turnstile';
 import { SvgIcon } from '@/components/Image';
 import Loader from '@/components/Loader';
 import useMounted from '@/hooks/useMounted';
@@ -43,7 +44,7 @@ export default function Page() {
 
   const { status } = useSession();
 
-  const [disabled, setDisabled] = useState(false);
+  const [disabled, setDisabled] = useState(true);
   const [loading, setLoading] = useState(true);
   const [clientInfo, setClientInfo] = useState(null);
 
@@ -92,14 +93,22 @@ export default function Page() {
     }
   }, [status]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const handleVerify = token => {
+    if (!token)  {
+      return;
+    }
+
+    setDisabled(false);
+  };
+
   return (
     loading ? <Loader /> : (
       <div className="flex min-h-screen flex-col items-center pt-9 md:pt-[60px] p-4 font-['Nunito_Sans'] relative">
         <div className="relative w-[192px] md:w-[320px]">
           <div className="absolute top-1/2 left-0 w-full border-b-2 border-dashed border-[#d1d9e0]" />
           <div className="flex items-center justify-between py-9">
             <div className="relative bg-white rounded-full size-[60px] md:size-[100px]">
-              <img src={clientInfo?.icon} alt="Logo" className="!size-full" />
+              <Image src={clientInfo?.icon} alt="Logo" className="!size-full" fill />
             </div>
             <div className="flex items-center gap-2 relative">
               <SvgIcon name="circle-check" size={20} />
@@ -123,13 +132,16 @@ export default function Page() {
             <NoteItem icon="personal" title="Personal user data" description="Email addresses (read-only), profile information (read-only)" />
             <NoteItem icon="international" title="Public data only" description="Limited access to your public data" />
           </div>
-          <div className="flex gap-3 border-y border-gray-600 p-6 mx-[-24px]">
-            <Button variant="outlined" className="flex-1" onClick={handleCancel}>
-              Cancel
-            </Button>
-            <Button variant="contained" className="flex-1" onClick={authorize} disabled={disabled}>
-            Authorize
-            </Button>
+          <div className="mx-[-24px] p-6 border-y border-gray-600">
+            <CloudflareTurnstile className="mb-2" onVerify={handleVerify} />
+            <div className="flex gap-3">
+              <Button variant="outlined" className="flex-1" onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button variant="contained" className="flex-1" onClick={authorize} disabled={disabled}>
+                Authorize
+              </Button>
+            </div>
           </div>
           <div className="pt-6 flex items-center gap-3">
             <SvgIcon name="lock" size={16} />

src/shared/components/control/cf-turnstile/CloudflareTurnstile.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright 2024 OpenBuild
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Script from 'next/script';
+
+import { isFunction } from '../../../utils';
+
+const sitekey = process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY;
+
+function CloudflareTurnstile({ className, onVerify }) {
+  const handleScriptLoad = () => {
+    window.turnstile.render('#cfTurnstile', {
+      sitekey,
+      callback: token => isFunction(onVerify) && onVerify(token),
+    });
+  };
+
+  return sitekey && (
+    <>
+      <Script
+        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+        strategy="afterInteractive"
+        onLoad={handleScriptLoad}
+      />
+      <div id="cfTurnstile" className={className} />
+    </>
+  );
+};
+
+export default CloudflareTurnstile;

src/shared/components/control/cf-turnstile/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2024 OpenBuild
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default } from './CloudflareTurnstile';