GPT

Example Components

// app/components/Auth.tsx 'use client'; import { useState } from 'react'; import { useAuth } from '@/lib/hooks/useAuth'; export default function Auth() { const { signIn, signUp, signInWithGoogle, loading } = useAuth(

Prompt text

Original English text. Replace placeholders with your own details.

// app/components/Auth.tsx
'use client';

import { useState } from 'react';
import { useAuth } from '@/lib/hooks/useAuth';

export default function Auth() {
 const { signIn, signUp, signInWithGoogle, loading } = useAuth();
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');
 const [isSignUp, setIsSignUp] = useState(false);

 const handleSubmit = async (e: React.FormEvent) => {
 e.preventDefault();
 try {
 if (isSignUp) {
 await signUp(email, password);
 } else {
 await signIn(email, password);
 }
 } catch (error: any) {
 console.error('Authentication error:', error.message);
 }
 };

 return (
 <div className="max-w-md mx-auto mt-8">
 <form onSubmit={handleSubmit} className="space-y-4">
 <input
 type="email"
 value={email}
 onChange={(e) => setEmail(e.target.value)}
 placeholder="Email"
 required
 className="w-full p-2 border rounded"
 />
 <input
 type="password"
 value={password}
 onChange={(e) => setPassword(e.target.value)}
 placeholder="Password"
 required
 className="w-full p-2 border rounded"
 />
 <button
 type="submit"
 disabled={loading}
 className="w-full p-2 bg-blue-500 text-white rounded"
 >
 {isSignUp ? 'Sign Up' : 'Sign In'}
 </button>
 <button
 type="button"
 onClick={signInWithGoogle}
 disabled={loading}
 className="w-full p-2 bg-red-500 text-white rounded"
 >
 Sign in with Google
 </button>
 <button
 type="button"
 onClick={() => setIsSignUp(!isSignUp)}
 className="w-full p-2 text-blue-500"
 >
 {isSignUp ? 'Already have an account?' : 'Need an account?'}
 </button>
 </form>
 </div>
 );
}

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 →