Drop-in UI components for authentication flows — sign-in form, sign-up form, user button, and organization switcher with the HelloJohn React SDK.

Pre-built Components

@hellojohn/react includes pre-built UI components for common authentication flows. They handle form state, validation, API calls, and error handling — you only provide styling via CSS variables or className overrides.

A complete sign-in form with email/password and optional OAuth buttons:

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

function SignInPage() {
  return (
    <SignIn
      redirectTo="/dashboard"
      showOAuth={true}
      providers={["google", "github"]}
    />
  );
}

Props:

Prop	Type	Default	Description
`redirectTo`	`string`	`"/"`	Redirect URL after successful sign-in
`showOAuth`	`boolean`	`true`	Show social login buttons
`providers`	`string[]`	All enabled	OAuth providers to show
`showMagicLink`	`boolean`	`false`	Show magic link option
`className`	`string`	—	CSS class for the container

A complete sign-up form:

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

function SignUpPage() {
  return (
    <SignUp
      redirectTo="/onboarding"
      fields={["firstName", "lastName", "email", "password"]}
    />
  );
}

Props:

Prop	Type	Default	Description
`redirectTo`	`string`	`"/"`	Redirect after successful sign-up
`fields`	`string[]`	`["email", "password"]`	Which fields to show
`showOAuth`	`boolean`	`true`	Show social sign-up buttons
`className`	`string`	—	CSS class for the container

UserButton

A user avatar button with a dropdown for profile, settings, and sign-out:

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

function Navbar() {
  return (
    <header>
      <nav>...</nav>
      <UserButton
        showName={true}
        afterSignOutUrl="/"
      />
    </header>
  );
}

Props:

Prop	Type	Default	Description
`showName`	`boolean`	`false`	Show user's name next to avatar
`afterSignOutUrl`	`string`	`"/"`	Redirect URL after sign-out
`menuItems`	`MenuItem[]`	—	Additional dropdown menu items

Custom menu items:

<UserButton
  menuItems={[
    {
      label: "Billing",
      href: "/billing",
      icon: <CreditCardIcon />,
    },
    {
      label: "Support",
      onClick: () => openSupportChat(),
    },
  ]}
/>

OrganizationSwitcher

A dropdown for switching between organizations:

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

<OrganizationSwitcher
  hidePersonal={false}
  createOrganizationUrl="/orgs/new"
/>

Props:

Prop	Type	Default	Description
`hidePersonal`	`boolean`	`false`	Hide the "personal account" option
`createOrganizationUrl`	`string`	—	Link to create a new organization
`afterSelectUrl`	`string`	—	Redirect after selecting an org

Styling

Components use CSS variables for theming. Override them in your stylesheet:

:root {
  --hj-primary: #6366f1;
  --hj-primary-foreground: #ffffff;
  --hj-background: #ffffff;
  --hj-foreground: #0f172a;
  --hj-border: #e2e8f0;
  --hj-radius: 0.5rem;
  --hj-font: inherit;
}

All components also accept a className prop for Tailwind CSS or custom overrides:

<SignIn className="max-w-sm mx-auto shadow-lg rounded-xl" />

Unstyled Mode

For complete control, import unstyled components:

import { SignIn } from "@hellojohn/react/unstyled";

These components expose the same behavior and state but render with no default styles — apply your own CSS or Tailwind classes.

Pre-built Components

On this page