Implementation:Helicone Helicone SignUp Page

Knowledge Sources	Helicone
Domains	Authentication, User Onboarding
Last Updated	2026-02-14 06:32 GMT

Overview

New user registration page supporting email/password, Google OAuth, and GitHub OAuth sign-up methods with email confirmation and demo mode support.

Description

The SignUp page component is the user acquisition entry point where new users create Helicone accounts. It provides three registration methods through the AuthForm component:

Email/Password: Calls heliconeAuthClient.signUp with an email redirect to /onboarding. On success, displays a modal prompting the user to check their inbox for a confirmation email.
Google OAuth: Calls heliconeAuthClient.signInWithOAuth({ provider: "google" }) with redirect to /onboarding
GitHub OAuth: Calls heliconeAuthClient.signInWithOAuth({ provider: "github" }) with redirect to /onboarding

Demo Mode: When the demo=true query parameter is present, the page stores an openDemo flag in localStorage and displays an InfoBanner at the top of the page. This enables a demo onboarding experience.

Auto-Redirect: Already authenticated users (whose email is not the demo email) are automatically redirected to /welcome.

Email Confirmation Modal: After successful email registration, a ThemedModal is displayed with an inbox arrow icon and instructions to check email for the confirmation link.

Server-Side Routing: Uses the same region-based routing logic as the sign-in page, redirecting non-regional domains to the configured app URL.

Usage

This page is accessed at the /signup route. It is typically linked from the sign-in page and marketing pages.

Code Reference

Source Location

Repository: Helicone
File: web/pages/signup.tsx

Signature

const SignUp: React.FC;

export const getServerSideProps: (
  context: GetServerSidePropsContext
) => Promise<{ props: {} } | { redirect: { destination: string; permanent: boolean } }>;

export default SignUp;

Import

// This is a Next.js page component, accessed via routing at /signup

I/O Contract

Query Parameters

Parameter	Type	Default	Description
demo	`string`	"false"	When "true", enables demo mode with InfoBanner and localStorage flag

Authentication Methods

Method	Handler	Redirect Target
Email/Password	`signUp`	Shows email confirmation modal; email link goes to `/onboarding`
Google OAuth	`signInWithOAuth({ provider: "google" })`	`/onboarding`
GitHub OAuth	`signInWithOAuth({ provider: "github" })`	`/onboarding`
SSO	Button link	`/sso` page

Redirect Behavior

Condition	Destination
User authenticated and not demo email	`/welcome`
Demo mode active	Sets `localStorage.openDemo = "true"`

Server-Side Routing Rules

Condition	Action
`NEXT_PUBLIC_IS_ON_PREM === "true"`	Render page normally
Host includes "localhost" or "vercel"	Render page normally
Host includes "us" or "eu"	Render page normally
All other hosts	Redirect to `{NEXT_PUBLIC_APP_URL}/signin`

Usage Examples

// Standard signup route
// URL: /signup

// Demo mode signup
// URL: /signup?demo=true

// The email confirmation flow:
// 1. User submits email + password
// 2. signUp() called with emailRedirectTo: /onboarding
// 3. Modal shown: "Confirm your email"
// 4. User clicks link in email -> redirected to /onboarding

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment