Build your own sign-in and sign-up pages for your Remix app with Clerk
This guide shows you how to use the <SignIn />
and <SignUp />
components with the Remix optional route in order to build custom sign-in and sign-up pages for your Remix app.
If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, check out the custom flows guides.
The functionality of the components are controlled by the instance settings you specify in your Clerk Dashboard.
Build your sign-up page
The following example demonstrates how to render the <SignUp />
component.
import { SignUp } from '@clerk/remix'
export default function SignUpPage() {
return (
<div>
<h1>Sign Up route</h1>
<SignUp />
</div>
)
}
Build your sign-in page
The following example demonstrates how to render the <SignIn />
component.
import { SignIn } from '@clerk/remix'
export default function SignInPage() {
return (
<div>
<h1>Sign In route</h1>
<SignIn />
</div>
)
}
For SSR Mode, add environment variables for the signIn
, signUp
, afterSignUp
, and afterSignIn
paths:
CLERK_SIGN_IN_URL=/sign-in
CLERK_SIGN_UP_URL=/sign-up
CLERK_SIGN_IN_FALLBACK_URL=/
CLERK_SIGN_UP_FALLBACK_URL=/
For SPA Mode, add paths to your ClerkApp
options to control the behavior of the components when you sign in or sign up and when you click on the respective links at the bottom of each component.
export default ClerkApp(App, {
publishableKey: PUBLISHABLE_KEY,
signInUrl: '/sign-in',
signUpUrl: '/sign-up',
signInFallbackRedirectUrl: '/',
signUpFallbackRedirectUrl: '/',
})
These values control the behavior of the components when you sign in or sign up and when you click on the respective links at the bottom of each component.
Visit your new pages
Run your project with the following terminal command from the root directory of your project:
npm run dev
yarn dev
pnpm dev
Visit your new custom pages locally at localhost:3000/sign-in and localhost:3000/sign-up.
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