Point Clerk to a custom sign-in route
Custom authentication UI
Clerk · Pipe
signInUrl
signInUrl tells Clerk where the client-side sign-in page is hosted. Configure it with the page's path or full URL so Clerk can target it for relevant redirects.
How it works
Set signInUrl to the full URL or path of the client-side sign-in page. Clerk uses it for redirects and, when applicable, for links that direct users to sign in.
Syntax
signInUrl?: stringParameters
| Name | Type | Description |
|---|---|---|
signInUrl | string | The full URL or path to the client-side sign-in page. |
Key points
- Clerk consults the setting when sign-in-related redirects occur.
- The destination must belong to the primary client-side application.
- For a custom React sign-in route, set it to the location hosting the SignIn component.
Common mistakes
- The setting is not required in production.
- A development satellite application must provide this setting.
- Prefer configuring the value through the appropriate environment variable.
Example: Configure signInUrl
import { ClerkProvider } from '@clerk/clerk-react';
export function App() {
return (
<ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY} signInUrl="/sign-in">
{/* application routes */}
</ClerkProvider>
);
}Configure the provider with the path where the sign-in page is mounted.
When to use it
Provide the primary application's sign-in destination
Client-side redirect configuration
Configure the required sign-in location
Development satellite setup
Interview questions
QWhat does signInUrl configure?
signInUrl identifies the client-side URL or path for the application's sign-in page. Clerk uses it when redirects need to target the primary application.
Follow-up: When is it mandatory? It must be set for a satellite application in a development instance, while it is optional for production instances.
QWhat values can signInUrl contain?
Use a route such as /sign-in or a full URL, depending on where the sign-in UI is hosted. The value should point to the primary client-side application.
Follow-up: What should replace a hard-coded route in deployment configuration? The documented recommendation is to use the environment variable instead.
QHow is signInUrl used with a custom sign-in page?
For a custom sign-in page, configure signInUrl to the route hosting that page. The route can then be used by Clerk when a sign-in redirect is required.
Follow-up: How does this differ from signInFallbackRedirectUrl? The latter selects where users go after signing in, whereas signInUrl identifies the sign-in page itself.
Related
<ClerkProvider><SignIn />signInFallbackRedirectUrlbuildSignInUrlclerkMiddleware()