useSignIn()

"use client";

import { useCallback, useState } from 'react';

import { HttpError, Session } from '@locai1/iam-javascript';
import { useSignIn } from '@locai1/iam-react';

export const SignInComponent = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState<HttpError | Error | null>(null);

  const handleSignInSuccess = useCallback((session: Session | undefined) => {
    console.log('Sign-in successful', session);
  }, []);

  const { signIn, isLoading } = useSignIn({
    onError: setError,
    onSuccess: handleSignInSuccess,
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (email && password) {
      signIn({ email, password });
    }
  };

  const isHttpError = error instanceof HttpError;

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input
        type="password"
        name="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type="submit" disabled={isLoading}>Sign In</button>
      {error && !isHttpError && (
        <p className="text-red-500 text-xs mt-1 text-center">{error.message}</p>
      )}
    </form>
  );
};