product

authenticationlogin, sessions, and a full oauth 2.0 providerai gatewayone endpoint fronting 200+ modelsbillingcredits, spending limits, and auto top-upuser managementteams, roles, and user-owned app access

solutions

add login to your ai appdrop-in auth with passkeys and socialmonetize with usage-based billingturn ai usage into metered revenuesell subscriptions in your ai appmonthly and annual plans with ai creditadd checkout to your ai appone-click buy: login, charge, add-cardoauth provider for your ai productlet other apps sign in with your identitybuild an ai app marketplacepublish, install, and review appsship an ai saas in a weekendauth, billing, and ai in one stackview all solutions
modelspricing>docs

Components

@hyperyai/sdk UI components — SignIn, SignUp, SignInForm, ModernAuthForm, AuthModal, AuthButton, UserButton, UserProfile — and the SignedIn, SignedOut, Protect and RedirectToSignIn render gates.

All components read from HyperyProvider and are styled with Tailwind utility classes. Every sign-in component starts the same hosted OAuth flow (login() / signUp() from useAuth): the user authenticates on Hypery and returns to your redirectUri.

SignInForm, ModernAuthForm and AuthModal never collect credentials in your app. Continue with Google / GitHub passes provider=google|github so the user goes straight to that identity provider; the optional Continue with email button (showEmailPassword) opens Hypery's hosted login page. The forms follow the provider's interactionMode (auto = popup on desktop, redirect on mobile or when the popup is blocked). onSuccess fires only once the user is actually signed in — after a popup login completes. With a redirect the page navigates away, so handle post-login work on your redirectUri page.

In @hyperyai/sdk 1.1.5 these forms rendered non-functional email/password fields by default and called onSuccess as soon as sign-in started. showEmailPassword now defaults to false everywhere, and onSuccess means "authenticated".

Authentication components

SignIn

A button that calls login(). Shows Loading... and is disabled while the session is loading.

SignIn

import { SignIn } from '@hyperyai/sdk';
 
<SignIn buttonText="Sign in with Hypery" variant="primary" />
PropTypeDefaultDescription
buttonTextstring'Sign in with Hypery'Label.
variant'primary' | 'secondary' | 'outline''primary'Built-in style.
classNamestring—Replaces the built-in classes.
loadingboolean—Force the disabled/loading state.
redirectTostring—Saved to sessionStorage as hypery_redirect_after_login; the SDK does not read it back, so redirect yourself on return if you use it.

SignUp

A button that calls signUp() (the login flow with prompt=select_account).

SignUp

import { SignUp } from '@hyperyai/sdk';
 
<SignUp buttonText="Get started" variant="secondary" onSignUpStart={() => track('signup')} />
PropTypeDefaultDescription
buttonTextstring'Sign up'Label.
variant'primary' | 'secondary' | 'outline''primary'Built-in style.
classNamestring—Replaces the built-in classes.
onSignUpStart() => void—Called right before the redirect.
redirectUrlstring—Accepted but currently unused.

SignInForm

An inline sign-in card for a dedicated login page.

SignInForm

import { SignInForm } from '@hyperyai/sdk';
 
<SignInForm title="Welcome back" description="Sign in to continue" onSuccess={() => console.log('signed in')} />
PropTypeDefaultDescription
showCardbooleantrueWrap in a card surface.
showTitlebooleantrueShow the heading and description.
titlestring'Sign in to continue'Heading.
descriptionstring'Choose your preferred sign-in method'Sub-heading.
showSocialbooleantrueShow Google / GitHub buttons.
showEmailPasswordbooleanfalseShow a Continue with email button that opens Hypery's hosted login page (credentials are never entered in your app).
onSuccess() => void—Called once the user is signed in (popup login completed). Not called for redirect logins — the page navigates away.
onError(error: string) => void—Called if starting sign-in throws.
classNamestring—Extra classes.

ModernAuthForm

A branded sign-in / sign-up form with a mode switch.

import { ModernAuthForm } from '@hyperyai/sdk';
 
<ModernAuthForm
  mode="signin"
  allowModeSwitch
  showEmailPassword
  branding={{ logo: '/logo.png', appName: 'Acme', primaryColor: '#8b5cf6' }}
/>
PropTypeDefaultDescription
mode'signin' | 'signup''signin'Initial mode.
allowModeSwitchbooleantrueShow the "Don't have an account?" toggle.
showCardbooleantrueWrap in a card.
showSocialbooleantrueShow Google / GitHub buttons.
showEmailPasswordbooleanfalseShow a Continue with email button that opens Hypery's hosted login page (credentials are never entered in your app).
branding{ logo?, appName?, primaryColor? }—primaryColor defaults to #8b5cf6.
onSuccess() => void—Called once the user is signed in (popup login completed). Not called for redirect logins.
onError(error: string) => void—Called if starting sign-in throws.
classNamestring''Extra classes.

AuthModal

A controlled dialog version of the form — for a "Sign in" button in a navbar. HyperyModals also opens it automatically when re-authentication is required.

AuthModal (open)

import { AuthModal } from '@hyperyai/sdk';
import { useState } from 'react';
 
const [open, setOpen] = useState(false);
 
<button onClick={() => setOpen(true)}>Sign in</button>
<AuthModal
  isOpen={open}
  onClose={() => setOpen(false)}
  initialMode="signin"
  branding={{ appName: 'Acme', primaryColor: '#06b6d4' }}
/>
PropTypeDefaultDescription
isOpenboolean—Required. Open state.
onClose() => void—Required. Called when the dialog is dismissed.
initialMode'signin' | 'signup''signin'Initial mode (the user can toggle).
showSocialbooleantrueShow Google / GitHub buttons.
showEmailPasswordbooleanfalseShow a Continue with email button that opens Hypery's hosted login page (credentials are never entered in your app).
branding{ logo?, appName?, primaryColor? }—primaryColor defaults to #8b5cf6.
onSuccess() => void—Called once the user is signed in (popup login completed). Not called for redirect logins.
onError(error: string) => void—Called if starting sign-in throws.

AuthButton

A button that opens an AuthModal it manages itself.

import { AuthButton } from '@hyperyai/sdk';
 
<AuthButton variant="outline" size="sm" mode="signup" branding={{ appName: 'Acme' }}>
  Get started
</AuthButton>
PropTypeDefaultDescription
childrenReactNode'Sign In'Label.
variant'primary' | 'secondary' | 'outline' | 'ghost''primary'Built-in style.
size'sm' | 'md' | 'lg''md'Size.
mode'signin' | 'signup''signin'Modal's initial mode.
showSocialbooleantrueForwarded to the modal.
showEmailPasswordbooleanfalseForwarded to the modal.
branding{ logo?, appName?, primaryColor? }—Forwarded to the modal.
onSuccess() => void—Called once the user is signed in; the modal closes.
classNamestring''Extra classes.

UserButton

An avatar (image or initial) with a dropdown containing Sign out. Renders nothing while loading or when signed out.

UserButton

import { UserButton } from '@hyperyai/sdk';
 
<UserButton showUserInfo size="md" />
 
{/* Custom dropdown */}
<UserButton
  renderDropdown={(user, logout) => (
    <>
      <a href="/settings" className="block px-4 py-2">{user.email}</a>
      <button onClick={logout} className="block px-4 py-2">Log out</button>
    </>
  )}
/>
PropTypeDefaultDescription
showUserInfobooleanfalseShow name + email at the top of the dropdown.
size'sm' | 'md' | 'lg''md'Avatar size.
renderDropdown(user: User, logout: () => void) => ReactNode—Replace the dropdown contents.
classNamestring—Extra classes on the wrapper.

UserProfile

A profile card (avatar, name, email, and optionally user id). Shows a skeleton while loading, nothing when signed out.

UserProfile

import { UserProfile } from '@hyperyai/sdk';
 
<UserProfile showExtended={false} />
PropTypeDefaultDescription
showExtendedbooleantrueShow the user id and a status row.
showLoadingbooleantrueShow the skeleton while loading.
classNamestring—Replaces the card classes.

Control components

Render gates with no UI of their own.

import { SignedIn, SignedOut, Protect, RedirectToSignIn, SignIn } from '@hyperyai/sdk';
 
<SignedIn fallback={<Spinner />}><Dashboard /></SignedIn>
<SignedOut><SignIn /></SignedOut>
 
<Protect fallback={<SignIn />}>
  <Settings />
</Protect>
 
{/* Send signed-out visitors straight to sign-in */}
<RedirectToSignIn />
ComponentPropsBehaviour
<SignedIn>children, fallback?Renders fallback while loading, children when signed in, otherwise nothing.
<SignedOut>children, fallback?Renders fallback while loading, children when signed out, otherwise nothing.
<Protect>children, fallback?, onUnauthenticated?While loading or during logout(): fallback. Signed out: with onUnauthenticated renders nothing and calls it; otherwise renders fallback, or — with no fallback — starts login(). Signed in: children.
<RedirectToSignIn>—Starts login() once auth has loaded and the user is signed out. Renders nothing.

Protect and RedirectToSignIn never start sign-in during render: login() / onUnauthenticated run from an effect after render, once per mount (StrictMode-safe), and only after auth has finished loading. They re-arm if the user signs in and later signs out.

These gates check sign-in state only — they don't check scopes or roles. For role-based UI, read role from useActiveWorkspace.

Next steps

Workspaces & memberships

Let users switch teams and workspaces.

Error handling

Re-auth and billing modals.