āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/secure/waitlist ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
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 get Clerk integrated and how to add a waitlist to your Next.js application.
<Steps> ## Install `@clerk/nextjs`The Clerk Next.js SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier.
Run the following command to install the SDK:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npm install @clerk/nextjs
```bash {{ filename: 'terminal' }}
yarn add @clerk/nextjs
```
```bash {{ filename: 'terminal' }}
pnpm add @clerk/nextjs
```
```bash {{ filename: 'terminal' }}
bun add @clerk/nextjs
```
<SignedOut>
1. In the Clerk Dashboard, navigate to the [**API keys**](https://dashboard.clerk.com/~/api-keys){{ track: 'exp_create_account_nextjs_quickstart' }} page.
1. In the **Quick Copy** section, copy your Clerk Publishable and Secret Keys.
1. Paste your keys into your `.env` file.
The final result should resemble the following:
</SignedOut>
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={{pub_key}}
CLERK_SECRET_KEY={{secret}}
To enable Waitlist mode, follow these steps:
To manage users on your waitlist:
<Waitlist /> componentThe <Waitlist /> component renders a form that allows users to join for early access to your app.
The following example includes a basic implementation of the <Waitlist /> component hosted on the / route (the home page). You can use this as a starting point for your own implementation.
import { Waitlist } from '@clerk/nextjs'
export default function Page() {
return <Waitlist />
}
<ClerkProvider> to your appTo use the <Waitlist /> component in your app, you must provide the waitlistUrl prop, which points to the URL of your waitlist page.
import { ClerkProvider } from '@clerk/nextjs'
import './globals.css'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider waitlistUrl="/">
<html lang="en">
<body>{children}</body>
</html>
</ClerkProvider>
)
}
To allow users to sign in once they've been approved from the waitlist, you must:
clerkMiddleware() to your appclerkMiddleware() grants you access to user authentication state throughout your app, on any route or page. It also allows you to protect specific routes from unauthenticated users. To add clerkMiddleware() to your app, follow these steps:
Create a proxy.ts file.
/src directory, create proxy.ts in the /src directory./src directory, create proxy.ts in the root directory alongside .env.In your proxy.ts file, export the clerkMiddleware() helper:
import { clerkMiddleware } from '@clerk/nextjs/server'
export default clerkMiddleware()
export const config = {
matcher: [
// Skip Next.js internals and all static files, unless found in search params
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.*)',
],
}
By default, clerkMiddleware() will not protect any routes. All routes are public and you must opt-in to protection for routes. See the clerkMiddleware() reference to learn how to require authentication for specific routes.
The following example demonstrates how to render the <SignIn /> component.
import { SignIn } from '@clerk/nextjs'
export default function Page() {
return <SignIn />
}
Update your environment variables to point to your custom sign-in page. For more information on building a custom sign-in-or-up page, see the dedicated guide.
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā