pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 06:11:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Integrate Cloudflare Turnstile CAPTCHA

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-28 20:01:44 +00:00
parent 5d799241da
commit c88239fc4c
5 changed files with 206 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.env.example Normal file
View File

@@ -0,0 +1,12 @@
# Supabase Configuration
VITE_SUPABASE_PROJECT_ID=your-project-id
VITE_SUPABASE_PUBLISHABLE_KEY=your-publishable-key
VITE_SUPABASE_URL=https://your-project-id.supabase.co
# Cloudflare Turnstile CAPTCHA (optional)
# Get your site key from: https://dash.cloudflare.com/turnstile
# Use test keys for development:
# - Visible test key (always passes): 1x00000000000000000000AA
# - Invisible test key (always passes): 2x00000000000000000000AB
# - Visible test key (always fails): 3x00000000000000000000FF
VITE_TURNSTILE_SITE_KEY=your-turnstile-site-key

11
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@hookform/resolvers": "^3.10.0",
"@marsidev/react-turnstile": "^1.3.1",
"@radix-ui/react-accordion": "^1.2.11",
"@radix-ui/react-alert-dialog": "^1.1.14",
"@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -914,6 +915,16 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@marsidev/react-turnstile": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-1.3.1.tgz",
"integrity": "sha512-h2THG/75k4Y049hgjSGPIcajxXnh+IZAiXVbryQyVmagkboN7pJtBgR16g8akjwUBSfRrg6jw6KvPDjscQflog==",
"license": "MIT",
"peerDependencies": {
"react": "^17.0.2 || ^18.0.0 || ^19.0",
"react-dom": "^17.0.2 || ^18.0.0 || ^19.0"
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

1
package.json
View File

@@ -12,6 +12,7 @@
},
"dependencies": {
"@hookform/resolvers": "^3.10.0",
"@marsidev/react-turnstile": "^1.3.1",
"@radix-ui/react-accordion": "^1.2.11",
"@radix-ui/react-alert-dialog": "^1.1.14",
"@radix-ui/react-aspect-ratio": "^1.1.7",

138
src/components/auth/TurnstileCaptcha.tsx Normal file
View File

@@ -0,0 +1,138 @@
import { useEffect, useRef, useState } from 'react';
import { Turnstile } from '@marsidev/react-turnstile';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { AlertCircle, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
interface TurnstileCaptchaProps {
onSuccess: (token: string) => void;
onError?: (error: string) => void;
onExpire?: () => void;
siteKey?: string;
theme?: 'light' | 'dark' | 'auto';
size?: 'normal' | 'compact';
className?: string;
}
export function TurnstileCaptcha({
onSuccess,
onError,
onExpire,
siteKey = "0x4AAAAAAAk8oZ8Z8Z8Z8Z8Z", // Default test key - replace in production
theme = 'auto',
size = 'normal',
className = ''
}: TurnstileCaptchaProps) {
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
const [key, setKey] = useState(0);
const turnstileRef = useRef<any>(null);
const handleSuccess = (token: string) => {
setError(null);
setLoading(false);
onSuccess(token);
};
const handleError = (errorCode: string) => {
setLoading(false);
const errorMessage = getErrorMessage(errorCode);
setError(errorMessage);
onError?.(errorMessage);
};
const handleExpire = () => {
setError('CAPTCHA expired. Please try again.');
onExpire?.();
};
const handleLoad = () => {
setLoading(false);
setError(null);
};
const resetCaptcha = () => {
setKey(prev => prev + 1);
setError(null);
setLoading(true);
};
const getErrorMessage = (errorCode: string): string => {
switch (errorCode) {
case 'network-error':
return 'Network error. Please check your connection and try again.';
case 'timeout':
return 'CAPTCHA timed out. Please try again.';
case 'invalid-sitekey':
return 'Invalid site configuration. Please contact support.';
case 'token-already-spent':
return 'CAPTCHA token already used. Please refresh and try again.';
default:
return 'CAPTCHA verification failed. Please try again.';
}
};
// Auto-reset on theme changes
useEffect(() => {
resetCaptcha();
}, [theme]);
if (!siteKey || siteKey === "0x4AAAAAAAk8oZ8Z8Z8Z8Z8Z") {
return (
<Alert className="border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950">
<AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
<AlertDescription className="text-yellow-800 dark:text-yellow-200">
CAPTCHA is using test keys. Configure VITE_TURNSTILE_SITE_KEY for production.
</AlertDescription>
</Alert>
);
}
return (
<div className={`space-y-3 ${className}`}>
<div className="flex flex-col items-center">
{loading && (
<div className="flex items-center justify-center p-4 border border-dashed border-muted-foreground/30 rounded-lg bg-muted/20">
<RefreshCw className="w-4 h-4 animate-spin mr-2 text-muted-foreground" />
<span className="text-sm text-muted-foreground">Loading CAPTCHA...</span>
</div>
)}
<div className={loading ? 'opacity-0 absolute' : 'opacity-100'}>
<Turnstile
key={key}
ref={turnstileRef}
siteKey={siteKey}
onSuccess={handleSuccess}
onError={handleError}
onExpire={handleExpire}
onLoad={handleLoad}
options={{
theme,
size,
tabIndex: 0
}}
/>
</div>
</div>
{error && (
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertDescription className="flex items-center justify-between">
<span>{error}</span>
<Button
variant="outline"
size="sm"
onClick={resetCaptcha}
className="ml-2 h-6 px-2 text-xs"
>
<RefreshCw className="w-3 h-3 mr-1" />
Retry
</Button>
</AlertDescription>
</Alert>
)}
</div>
);
}

45
src/pages/Auth.tsx
View File

@@ -11,6 +11,7 @@ import { Separator } from '@/components/ui/separator';
import { Zap, Mail, Lock, User, AlertCircle, Eye, EyeOff } from 'lucide-react';
import { supabase } from '@/integrations/supabase/client';
import { useToast } from '@/hooks/use-toast';
import { TurnstileCaptcha } from '@/components/auth/TurnstileCaptcha';
export default function Auth() {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
@@ -20,6 +21,8 @@ export default function Auth() {
const [loading, setLoading] = useState(false);
const [magicLinkLoading, setMagicLinkLoading] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
const [captchaKey, setCaptchaKey] = useState(0);
const [formData, setFormData] = useState({
email: '',
password: '',
@@ -65,6 +68,8 @@ export default function Auth() {
const handleSignUp = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
// Validate passwords match
if (formData.password !== formData.confirmPassword) {
toast({
variant: "destructive",
@@ -74,6 +79,8 @@ export default function Auth() {
setLoading(false);
return;
}
// Validate password length
if (formData.password.length < 6) {
toast({
variant: "destructive",
@@ -83,6 +90,18 @@ export default function Auth() {
setLoading(false);
return;
}
// Validate CAPTCHA
if (!captchaToken) {
toast({
variant: "destructive",
title: "CAPTCHA required",
description: "Please complete the CAPTCHA verification."
});
setLoading(false);
return;
}
try {
const {
data,
@@ -91,19 +110,26 @@ export default function Auth() {
email: formData.email,
password: formData.password,
options: {
captchaToken,
data: {
username: formData.username,
display_name: formData.displayName
}
}
});
if (error) throw error;
toast({
title: "Welcome to ThrillWiki!",
description: "Please check your email to verify your account."
});
navigate('/');
} catch (error: any) {
// Reset CAPTCHA on error
setCaptchaToken(null);
setCaptchaKey(prev => prev + 1);
toast({
variant: "destructive",
title: "Sign up failed",
@@ -325,7 +351,24 @@ export default function Auth() {
</div>
</div>
<Button type="submit" className="w-full bg-accent hover:bg-accent/90 text-accent-foreground" disabled={loading}>
<div className="space-y-2">
<Label>Security Verification</Label>
<TurnstileCaptcha
key={captchaKey}
onSuccess={setCaptchaToken}
onError={() => setCaptchaToken(null)}
onExpire={() => setCaptchaToken(null)}
siteKey={import.meta.env.VITE_TURNSTILE_SITE_KEY}
theme="auto"
className="flex justify-center"
/>
</div>
<Button
type="submit"
className="w-full bg-accent hover:bg-accent/90 text-accent-foreground"
disabled={loading || !captchaToken}
>
{loading ? "Creating account..." : "Create Account"}
</Button>
</form>