Build a custom waitlist page
Before you start
In Waitlist mode, users can register their interest in your app by joining a waitlist. Existing users and users who have been approved from the waitlist will be able to sign in to your app, while new users will need to join the waitlist to access your app. This mode is ideal for apps in early development stages or those wanting to generate interest before launch.
If your application is using Clerk's Account Portal, the waitlist flow is handled out of the box. No further setup is required.
If you do not want to use the Account Portal and want to host the prebuilt components in your app, this guide shows you how to set up a custom waitlist page in your application. This guide assumes that you have set up dedicated sign-in or sign-up pages for your application.
To enable Waitlist mode:
- In the Clerk Dashboard, navigate to the Waitlist page.
- Toggle on Enable waitlist and select Save.
Build the waitlist page
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/nextjs'
export default 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>Manage users on your waitlist
Once users join your waitlist, you can manage their access from the Clerk Dashboard. You can approve, deny, or re-invite users.
To manage a user on your waitlist:
- In the Clerk Dashboard, navigate to the Waitlist page.
- On the right-side of the user's row, select the menu icon (...).
- If the user's invitation status is Waitlist, you can select Invite or select Revoke to deny their invitation. To re-invite a user, you must first revoke their existing invitation. Once their invitation is Revoked, select the menu icon (...) and select Re-invite.
Feedback
Last updated on