Mr. Mandani
Web Developer
Firebase
Next.js
Vercel
Computer Software
create-next-app
npm run dev# oryarn dev# orpnpm dev# orbun dev
app/page.js
next/font
{/* Login Form */} <div className="bg-black p-8 rounded-lg shadow-[5px_5px_0px_#000,10px_10px_0px_#4a90e2] w-full max-w-md mt-12 border-4 border-white"> <h1 className="text-2xl font-bold mb-6 text-center text-white"> Login </h1> {error && <p className="text-red-500 mb-4 text-center">{error}</p>} {/* Email/Password Login */} <div className="mb-4"> <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full p-3 border border-white rounded-lg bg-transparent text-white focus:outline-none focus:ring-2 focus:ring-blue-500" /> </div> <div className="mb-6"> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full p-3 border border-white rounded-lg bg-transparent text-white focus:outline-none focus:ring-2 focus:ring-blue-500" /> </div> <button onClick={handleEmailLogin} className="w-full bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition duration-300" > Login with Email </button> {/* Google and GitHub Login */} <div className="mt-4 flex gap-4 justify-center"> <button onClick={handleGoogleLogin} className="bg-red-500 text-white p-3 rounded-lg hover:bg-red-600 transition duration-300" > Login with Google </button> <button onClick={handleGithubLogin} className="bg-gray-800 text-white p-3 rounded-lg hover:bg-gray-900 transition duration-300" > Login with GitHub </button> </div> {/* Phone Number Login */} <div className="mt-6"> <input type="text" placeholder="Phone Number" value={phone} onChange={(e) => setPhone(e.target.value)} className="w-full p-3 border border-white rounded-lg bg-transparent text-white focus:outline-none focus:ring-2 focus:ring-blue-500" /> <div id="recaptcha-container" className="mt-4"></div> <button onClick={handlePhoneLogin} className="w-full bg-green-500 text-white p-3 rounded-lg mt-4 hover:bg-green-600 transition duration-300" > Login with Phone </button> </div> </div></div>
Posted Oct 6, 2025
Developed a Next.js app with authentication features.
0
Ai software developer Specialised in AI automation