Set up a waitlist in your app
Before you start
In Waitlist mode, users can register their interest in your app by joining a waitlist. This mode is ideal for apps in early development stages or those wanting to generate interest before launch. This guide shows you how to add a waitlist to your application.
Enable Waitlist mode
To enable Waitlist mode, follow these steps:
- In the Clerk Dashboard, navigate to the Waitlist page.
- Toggle on Enable waitlist and select Save.
Add the <Waitlist /> component to your app
The <Waitlist /> component provides a form where users can submit their details to join the waitlist and express their interest in your app. Once approved by admins, users will receive an email with access instructions.
The following example includes a basic implementation of the <Waitlist /> component hosted under the /waitlist route. You can use this as a starting point for your own implementation.
import { Waitlist } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/waitlist')({
component: WaitlistPage,
})
function WaitlistPage() {
return <Waitlist />
}Provide the waitlistUrl prop
The waitlistUrl prop is used to specify the URL of your waitlist page. It should point to the route where your <Waitlist /> component is mounted. If undefined, the user will be redirected to the Account Portal waitlist page. You'll need to set waitlistUrl where you initialize Clerk.
Pass the waitlistUrl prop to the <ClerkProvider> component, ensuring it matches your waitlist route.
<ClerkProvider waitlistUrl="/waitlist">
{/* rest of your layout */}
</ClerkProvider>Add a sign-in page
To allow users to sign in once they've been approved from the waitlist, you need to set up a custom sign-in page.
The following example demonstrates how to render the <SignIn /> component, which will only be accessible to users who have been approved from the waitlist.
If you would like to create a dedicated /sign-in page in your TanStack React Start application, see the dedicated guide for more information.
import { SignIn } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/sign-in')({
component: SignInPage,
})
function SignInPage() {
return <SignIn />
}Manage users on your waitlist
Once users join your waitlist, you can manage their access from the Clerk Dashboard. You can approve or deny users, which will trigger an email notification to them with instructions on how to access your app if approved.
- In the Clerk Dashboard, navigate to the Waitlist page.
- On the right-side of a user's row, select the menu icon (...).
- Select Invite to invite the user to your application. Select Deny to deny the user access to your application.
Feedback
Last updated on