Basic Authentication

"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>
  );
}