Basic Authentication
Implement a secure email/password login with the AuthInGo React SDK and server-owned cookie sessions.
"use client"; import { useState } from "react"; import { useAuth } from "@authingo/react"; import { authClient } from "../lib/auth-client"; export function Login() { const { user, isLoading, error, checkSession, logout } = useAuth(); const [email, setEmail] = useState("test@example.com"); const [password, setPassword] = useState("password"); if (isLoading) return <div className="card">Loading session...</div>; if (user) { return ( <div className="dashboard"> <h2>Welcome, {user.name || user.email}!</h2> <div className="session-details"> <p><strong>ID:</strong> {user.id}</p> <p><strong>Email:</strong> {user.email}</p> </div> <button className="button danger" onClick={() => logout()}> Sign out </button> </div> ); } return ( <div className="form-stack"> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> {error ? <p className="error">{error}</p> : null} <div className="actions"> <button className="button" onClick={async () => { const result = await authClient.signIn.email({ email, password }); if (!result.error) { await checkSession(); } }} > Sign In </button> </div> </div> ); }