GPT

CORRECT CLIENT COMPONENT

// components/AuthForm.tsx 'use client'; import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; export default functi

Prompt text

Original English text. Replace placeholders with your own details.

// components/AuthForm.tsx
'use client';

import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

export default function AuthForm() {
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');
 const [error, setError] = useState<string | null>(null);
 const [loading, setLoading] = useState(false);
 
 const router = useRouter();
 const supabase = createClientComponentClient();

 const handleSignIn = async (e: React.FormEvent) => {
 e.preventDefault();
 setLoading(true);
 setError(null);

 try {
 const { error } = await supabase.auth.signInWithPassword({
 email,
 password,
 });

 if (error) {
 throw error;
 }

 router.refresh();
 router.push('/protected');
 } catch (error: any) {
 setError(error.message);
 } finally {
 setLoading(false);
 }
 };

 return (
 <form onSubmit={handleSignIn}>
 {error && (
 <div className="error">
 {error}
 </div>
 )}
 
 <div>
 <label htmlFor="email">Email</label>
 <input
 id="email"
 type="email"
 value={email}
 onChange={(e) => setEmail(e.target.value)}
 required
 />
 </div>

 <div>
 <label htmlFor="password">Password</label>
 <input
 id="password"
 type="password"
 value={password}
 onChange={(e) => setPassword(e.target.value)}
 required
 />
 </div>

 <button type="submit" disabled={loading}>
 {loading ? 'Loading...' : 'Sign In'}
 </button>
 </form>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →