try fix captcha

.env.example

@@ -2,6 +2,9 @@
 REACT_APP_SUPABASE_URL=https://oupgudlkspsmzkmeovlh.supabase.co
 REACT_APP_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im91cGd1ZGxrc3BzbXprbWVvdmxoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTM0NTIwNzQsImV4cCI6MjAyOTAyODA3NH0.KAbKFBChJHtxTmOZM2pdeppIyNbcnQkEgSi6RA7OQdo
 
+# hcaptcha
+REACT_APP_HCAPTCHA_SITE_KEY="b0a493f2-49df-486b-bdee-b8459f7b1c21"
+
 
 # radi4000 api
 REACT_APP_RADIO4000_API_URL=https://api.radio4000.com

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hcaptcha/react-hcaptcha": "^1.10.1",
     "@supabase/supabase-js": "^1.35.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",

src/components/auth-form.js

@@ -1,13 +1,15 @@
 import {useState} from 'react'
 import {useNavigate} from 'react-router-dom'
+import HCaptcha from "@hcaptcha/react-hcaptcha"
+import config from 'config'
+
 
 export default function Auth({onSubmit, submitLabel, redirectTo}) {
 	const navigate = useNavigate()
 	const [loading, setLoading] = useState(false)
 	const [message, setMessage] = useState(false)
 	const [errorMessage, setErrorMessage] = useState(false)
-	const [data, setData] = useState({email: '', password: ''})
-	const {email, password} = data
+	const [data, setData] = useState({email: '', password: '', token: ''})
 
 	const handleChange = ({target}) => {
 		const {name, value} = target
@@ -16,6 +18,12 @@ export default function Auth({onSubmit, submitLabel, redirectTo}) {
 			[name]: value,
 		})
 	}
+	const handleVerificationSuccess = (newToken) => {
+		setData({
+			...data,
+			token: newToken
+		})
+	}
 
 	const handleSubmit = (e) => {
 		e.preventDefault()
@@ -32,7 +40,7 @@ export default function Auth({onSubmit, submitLabel, redirectTo}) {
 			} else {
 				setErrorMessage(false)
 			}
-			if (!password) {
+			if (!data.password) {
 				setMessage('Check your email for the login link!')
 			} else if (redirectTo) {
 				navigate(redirectTo, {replace: true})
@@ -53,7 +61,7 @@ export default function Auth({onSubmit, submitLabel, redirectTo}) {
 						type="email"
 						placeholder="Your email"
 						autoFocus={true}
-						value={email}
+						value={data.email}
 						disabled={loading}
 						onChange={handleChange}
 						required
@@ -64,11 +72,17 @@ export default function Auth({onSubmit, submitLabel, redirectTo}) {
 						name="password"
 						type="password"
 						placeholder="Your password"
-						value={password}
+						value={data.password}
 						disabled={loading}
 						onChange={handleChange}
 					/>
 				</label>
+				<label>Captcha
+					<HCaptcha
+						sitekey={config.HCAPTCHA_SITE_KEY}
+						onVerify={handleVerificationSuccess}
+					/>
+				</label>
 				<button disabled={loading} type="submit">
 					{loading ? <span>Loading</span> : <span>{submitLabel || 'Send magic link'}</span>}
 				</button>

src/components/db-session.js

@@ -40,11 +40,13 @@ export default function DbSession({children}) {
 		userChannel,
 		setUserChannel /* usisng the state setter to set active channel as userChannel */,
 		signOut: () => database.auth.signOut(),
-		signIn: ({email, password}) => {
+		signIn: ({email, password, token}) => {
+			const options = {captchaToken: token}
 			if (password) {
-				return database.auth.signIn({email, password})
+				debugger
+				return database.auth.signIn({email, password, options})
 			} else {
-				return database.auth.signIn({email})
+				return database.auth.signIn({email, options})
 			}
 		},
 		signUp: async ({email, password}) => {

src/config.js

@@ -6,6 +6,9 @@ const config = {
 	/* if having the r4-api deployed */
 	RADIO4000_API_URL: process.env.REACT_APP_RADIO4000_API_URL|| 'https://api.radio4000.com',
 
+	/* Hcpatch */
+	HCAPTCHA_SITE_KEY: process.env.REACT_APP_HCAPTCHA_SITE_KEY,
+
 	/* if connecting to supabase db/auth */
 	SUPABASE_URL: process.env.REACT_APP_SUPABASE_URL,
 	SUPABASE_ANON_KEY: process.env.REACT_APP_SUPABASE_ANON_KEY,