getSignUpUrl generates a URL that redirects users to the WorkOS AuthKit sign-up page. This is typically used to create sign-up links or buttons in your application.Usage import { getSignUpUrl } from '@workos-inc/authkit-nextjs' ; const signUpUrl = await getSignUpUrl ();
Signature async function getSignUpUrl ( options ?: { organizationId ?: string ; loginHint ?: string ; redirectUri ?: string ; prompt ?: 'consent' ; state ?: string ; returnTo ?: string ; }) : Promise < string >
Parameters Configuration options for the sign-up URL. The ID of the organization the user should sign up with. When provided, the user will be prompted to authenticate with that organization’s configured identity provider.
Pre-fills the email field on the sign-up page with this value.
The URI to redirect to after authentication. Overrides the default redirect URI configured in environment variables.
When set to 'consent', forces the user to re-authenticate even if they have an active session.
Custom state data to pass through the authentication flow. The state will be available in the handleAuth callback. For complex data, serialize with JSON.stringify().
The pathname to redirect the user to after signing up. This will be encoded and passed through the OAuth flow.
Returns The complete URL to redirect the user to for signing up.
Examples Basic sign-up link import Link from 'next/link' ; import { getSignUpUrl , withAuth } from '@workos-inc/authkit-nextjs' ; export default async function HomePage () { const { user } = await withAuth (); if ( ! user ) { const signUpUrl = await getSignUpUrl (); return < Link href ={ signUpUrl }> Sign up </ Link > ; } return < div > Welcome !</ div > ; }
Pre-filling the email import { getSignUpUrl } from '@workos-inc/authkit-nextjs' ; export default async function InvitePage ({ email } : { email : string }) { const signUpUrl = await getSignUpUrl ({ loginHint: email , }); return ( < a href = { signUpUrl } > Complete your registration </ a > ); }
Organization-specific sign-up import { getSignUpUrl } from '@workos-inc/authkit-nextjs' ; export default async function OrgInvitePage ({ orgId } : { orgId : string }) { const signUpUrl = await getSignUpUrl ({ organizationId: orgId , }); return ( < a href = { signUpUrl } > Join your organization </ a > ); }
Passing custom state for onboarding import { getSignUpUrl } from '@workos-inc/authkit-nextjs' ; export default async function LandingPage () { const signUpUrl = await getSignUpUrl ({ state: JSON . stringify ({ plan: 'enterprise' , referrer: 'landing-page' , campaign: 'summer-2024' , }), }); return < a href ={ signUpUrl }> Start your free trial </ a > ; }
Custom return path after sign-up import { getSignUpUrl } from '@workos-inc/authkit-nextjs' ; export default async function OnboardingPage () { const signUpUrl = await getSignUpUrl ({ returnTo: '/onboarding/welcome' , }); return ( < a href = { signUpUrl } > Create your account </ a > ); }
Team invitation with context import { getSignUpUrl } from '@workos-inc/authkit-nextjs' ; export default async function TeamInvitePage ({ inviteCode , teamName , } : { inviteCode : string ; teamName : string ; }) { const signUpUrl = await getSignUpUrl ({ state: JSON . stringify ({ inviteCode , teamName , source: 'team-invite' , }), returnTo: '/teams/join' , }); return ( < div > < h1 > Join { teamName } </ h1 > < a href = { signUpUrl } > Create account and join </ a > </ div > ); }
Notes
The generated URL is specific to your WorkOS configuration and includes your client ID
The only difference from getSignInUrl is the screen hint, which displays the sign-up form by default
Custom state is passed through the OAuth flow and available in the handleAuth callback
Use returnTo to send users to an onboarding flow after they sign up
The loginHint parameter improves UX by pre-filling the email field but doesn’t force authentication with that email