useLogin

The useLogin hook handles the login mutation.

import { useLogin } from '@archibald/auth';

const { login, isLoading, error } = useLogin(OPTIONS);

Parameters

Name	Type	Required	Description
options	MutateOptions		Options that define the behavior of the useMutation hook used internally.

Return value

Property	Type	Description
login	Function	Function to trigger the login. Receives credentials as parameters.
isLoading	boolean	Indicates if the login request is in progress.
error	Error | null	Error object if the login failed.
isDone	boolean	Returns true when the login request finished.
reset	Function	Reset the mutation state.

Usage Example

import { useLogin } from '@archibald/auth';

function LoginForm() {
    const { login, isLoading, error } = useLogin();

    const onSubmit = async (e) => {
        e.preventDefault();
        const { email, password } = e.target.elements;
        await login({ email: email.value, password: password.value });
    };

    return (
        <form onSubmit={onSubmit}>
            <input name="email" type="email" required />
            <input name="password" type="password" required />
            <button type="submit" disabled={isLoading}>
                {isLoading ? 'Logging in...' : 'Log In'}
            </button>
            {error && <p className="error">{error.message}</p>}
        </form>
    );
}

Relates to

• SessionClient: Uses sessionClient.logIn() to perform the authentication.
• useMutation: Internally uses @archibald/client's useMutation to handle the request state.
• useUser: A successful login will automatically trigger a state update that useUser reflects.