GPT

Authentication Component

import React, { useState } from 'react'; import { useAuth } from '../hooks/useAuth'; import { useNavigate } from 'react-router-dom'; export function AuthComponent() { const { user, loading, error, login, register, logo

Prompt text

Original English text. Replace placeholders with your own details.

import React, { useState } from 'react';
import { useAuth } from '../hooks/useAuth';
import { useNavigate } from 'react-router-dom';

export function AuthComponent() {
 const { user, loading, error, login, register, logout } = useAuth();
 const navigate = useNavigate();
 const [isLogin, setIsLogin] = useState(true);
 const [form, setForm] = useState({
 email: '',
 password: ''
 });

 const handleSubmit = async (e: React.FormEvent) => {
 e.preventDefault();
 
 try {
 if (isLogin) {
 await login(form.email, form.password);
 } else {
 await register(form.email, form.password);
 }
 navigate('/dashboard');
 } catch (err) {
 console.error('Authentication failed:', err);
 }
 };

 if (loading) return <div>Loading...</div>;

 return (
 <div>
 {user ? (
 <div>
 <p>Welcome, {user.email}</p>
 <button onClick={logout}>Logout</button>
 </div>
 ) : (
 <div>
 <h2>{isLogin ? 'Login' : 'Register'}</h2>
 <form onSubmit={handleSubmit}>
 <input
 type="email"
 placeholder="Email"
 value={form.email}
 onChange={(e) => setForm({ ...form, email: e.target.value })}
 required
 />
 <input
 type="password"
 placeholder="Password"
 value={form.password}
 onChange={(e) => setForm({ ...form, password: e.target.value })}
 required
 />
 <button type="submit">
 {isLogin ? 'Login' : 'Register'}
 </button>
 {error && <p className="error">{error}</p>}
 </form>
 <p>
 {isLogin ? "Don't have an account?" : "Already have an account?"}
 <button onClick={() => setIsLogin(!isLogin)}>
 {isLogin ? 'Register' : 'Login'}
 </button>
 </p>
 </div>
 )}
 </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 →