Quickstart
Quickstart — React
Add HelloJohn authentication to your React app in 10 minutes. Sign up, sign in, and protect routes with 5 lines of code.
Time: ~10 minutes Prerequisites: A HelloJohn account (Cloud) or a self-hosted server running locally.
Install the SDK
npm install @hellojohn/reactyarn add @hellojohn/reactpnpm add @hellojohn/reactWrap your app with HelloJohnProvider
Add the provider at the root of your app. Your Publishable Key is available in the HelloJohn Dashboard under Clients.
import { HelloJohnProvider } from '@hellojohn/react'
const root = createRoot(document.getElementById('root')!)
root.render(
<HelloJohnProvider publishableKey="pk_live_XXXXXXXXXXXXXXXX">
<App />
</HelloJohnProvider>
)Never use your Secret Key in frontend code. Only use the Publishable Key (pk_...).
Add a sign-in page
Use the pre-built <SignIn> component or build your own with the useAuth hook.
import { SignIn } from '@hellojohn/react'
export default function SignInPage() {
return (
<div className="flex min-h-screen items-center justify-center">
<SignIn redirectUrl="/dashboard" />
</div>
)
}Protect a route
Use the <Protected> component to guard any route. Unauthenticated users are redirected to sign in.
import { Protected, useAuth } from '@hellojohn/react'
export default function Dashboard() {
return (
<Protected redirectTo="/sign-in">
<DashboardContent />
</Protected>
)
}
function DashboardContent() {
const { user } = useAuth()
return <h1>Welcome, {user?.name}!</h1>
}Add a user button
Drop the <UserButton> anywhere to show the current user and a sign-out option.
import { UserButton } from '@hellojohn/react'
export function Navbar() {
return (
<nav>
<span>My App</span>
<UserButton />
</nav>
)
}Verify it works
- Start your dev server:
npm run dev - Visit
/sign-in— you should see the HelloJohn sign-in form - Create an account and sign in
- Visit
/dashboard— you should see your user name