Build your own sign-in-or-up page for your Remix app with Clerk
This guide shows you how to use the <SignIn />
component to build a custom page that allows users to sign in or sign up within a single flow.
To set up separate sign-in and sign-up pages, follow this guide, and then follow the custom sign-up page guide.
Build a sign-in-or-up page
The following example demonstrates how to render the <SignIn />
component on a dedicated page using the Remix optional route.
import { SignIn } from '@clerk/remix'
export default function Page() {
return <SignIn />
}
- Set the
CLERK_SIGN_IN_URL
environment variable to tell Clerk where the<SignIn />
component is being hosted. - Set
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL
as a fallback URL incase users visit the/sign-in
route directly. - Set
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL
as a fallback URL incase users select the 'Don't have an account? Sign up' link at the bottom of the component.
Learn more about these environment variables and how to customize Clerk's redirect behavior in the dedicated guide.
CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
- Set the
signInUrl
property to yourClerkApp
options to tell Clerk where the<SignIn />
component is being hosted. - Set the
signInFallbackRedirectUrl
property to a fallback URL incase users visit the/sign-in
route directly. - Set the
signUpFallbackRedirectUrl
property to a fallback URL incase users select the 'Don't have an account? Sign up' link at the bottom of the component.
Learn more about these environment variables and how to customize Clerk's redirect behavior in the dedicated guide.
export default ClerkApp(App, {
publishableKey: PUBLISHABLE_KEY,
signInUrl: '/sign-in',
signInFallbackRedirectUrl: '/',
signUpFallbackRedirectUrl: '/',
})
Visit your new page
Run your project with the following terminal command from the root directory of your project:
npm run dev
yarn dev
pnpm dev
bun dev
Visit your new custom page locally at localhost:3000/sign-in.
Custom sign-up page
Learn how to add a custom sign-up page to your Remix app with Clerk's prebuilt components.
Read user and session data
Learn how to use Clerk's hooks and helpers to access the active session and user data in your Remix application.
Feedback
Last updated on