GPT

Implement Email/Password Login

import React, { useState } from "react"; import { createClient } from "@/lib/supabase-browser"; import { Button, Card } from "@/components/ui"; export default function LoginPage() { const supabase = createClient(); co

Prompt text

Original English text. Replace placeholders with your own details.

import React, { useState } from "react";
import { createClient } from "@/lib/supabase-browser";
import { Button, Card } from "@/components/ui";

export default function LoginPage() {
 const supabase = createClient();
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");

 async function handleLogin(e: React.FormEvent) {
 e.preventDefault();
 const { data, error } = await supabase.auth.signInWithPassword({
 email,
 password,
 });
 if (error) {
 alert(`Login error: ${error.message}`);
 } else {
 alert("Logged in successfully!");
 // Possibly redirect to /dashboard or another protected page.
 }
 }

 return (
 <div className="h-screen flex items-center justify-center bg-gray-50">
 <Card className="p-4 w-full max-w-md">
 <h1 className="text-2xl font-bold mb-4">Login</h1>
 <form onSubmit={handleLogin} className="space-y-4">
 <div>
 <label className="block text-sm font-medium mb-1" htmlFor="email">
 Email
 </label>
 <input
 id="email"
 type="email"
 value={email}
 onChange={(e) => setEmail(e.target.value)}
 className="w-full border border-gray-300 rounded p-2"
 />
 </div>
 <div>
 <label className="block text-sm font-medium mb-1" htmlFor="password">
 Password
 </label>
 <input
 id="password"
 type="password"
 value={password}
 onChange={(e) => setPassword(e.target.value)}
 className="w-full border border-gray-300 rounded p-2"
 />
 </div>
 <Button type="submit">Login</Button>
 </form>
 </Card>
 </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 →