React hook for authentication operations — sign in, sign up, sign out, and OAuth flows with the HelloJohn React SDK.

useAuth

The useAuth hook provides methods for authentication operations: sign in, sign up, sign out, password reset, and social OAuth flows.

import { useAuth } from "@hellojohn/react";

const {
  signIn,
  signUp,
  signOut,
  signInWithOAuth,
  sendPasswordReset,
  sendMagicLink,
  isLoading,
} = useAuth();

Methods

Authenticate with email and password:

const { error } = await signIn({
  email: "jane@example.com",
  password: "SecurePass123!",
});

Parameters:

Parameter	Type	Required	Description
`email`	`string`	✅	User email
`password`	`string`	✅	User password
`redirectTo`	`string`	No	URL to redirect after sign-in

Returns: Promise<{ error: HelloJohnError | null }>

If MFA is required, returns { error: null, mfaRequired: true, challengeId: "..." }. Proceed with useMFA().verify().

Create a new user account:

const { error } = await signUp({
  email: "jane@example.com",
  password: "SecurePass123!",
  firstName: "Jane",
  lastName: "Doe",
});

Parameters:

Parameter	Type	Required	Description
`email`	`string`	✅	User email
`password`	`string`	✅	Password
`firstName`	`string`	No	First name
`lastName`	`string`	No	Last name
`redirectTo`	`string`	No	Redirect after email verification
`metadata`	`object`	No	Custom user metadata

signOut

Sign out the current user:

await signOut();

// Sign out all sessions (across all devices)
await signOut({ scope: "global" });

Parameters:

Parameter	Type	Default	Description
`scope`	`"local" \| "global"`	`"local"`	Revoke current session only, or all sessions

signInWithOAuth

Redirect to a social login provider:

await signInWithOAuth({
  provider: "google",
  redirectTo: "/dashboard",
});

Parameters:

Parameter	Type	Required	Description
`provider`	`"google" \| "github" \| "microsoft" \| "apple" \| "discord" \| "linkedin"`	✅	OAuth provider
`redirectTo`	`string`	No	Post-authentication redirect

sendMagicLink

Send a passwordless magic link to an email:

const { error } = await sendMagicLink({
  email: "jane@example.com",
  redirectTo: "/dashboard",
});

sendPasswordReset

Send a password reset email:

const { error } = await sendPasswordReset({
  email: "jane@example.com",
});

State

Property	Type	Description
`isLoading`	`boolean`	`true` while an auth operation is in progress

import { useAuth } from "@hellojohn/react";
import { useState } from "react";

function SignInForm() {
  const { signIn, isLoading } = useAuth();
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    setError(null);

    const { error } = await signIn({
      email: form.get("email") as string,
      password: form.get("password") as string,
    });

    if (error) setError(error.message);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      {error && <p className="error">{error}</p>}
      <button type="submit" disabled={isLoading}>
        {isLoading ? "Signing in..." : "Sign in"}
      </button>
    </form>
  );
}

useAuth

On this page