<SignIn />
Full-featured UI for signing users into your application.
Overview
The <SignIn/>
component renders a UI for signing in users. Most of the times, the <SignIn/>
component is all you need for completing sign ins. It supports any authentication scheme, from Email/password authentication, and Passwordless, to Social Login (OAuth) and Multi-factor verification.
The contents and functionality of the <SignIn/>
component are controlled for the most part by the instance settings you specify in your Clerk Dashboard. You can further customize your <SignIn/>
component by passing additional properties at the time of rendering.
Control the look and feel of the <SignIn/>
component and match it to your application brand using the appearance prop.
Here's an example of what the component looks like once it's rendered:
Usage
Make sure you've followed the installation guide for Clerk React or ClerkJS before running the snippets below.
Once you set up the desired functionality for the <SignIn/>
component, all you need to do is render the component on your page. The default rendering is simple but powerful enough to cover most use-cases. The authentication configuration that you've set up in your Clerk Dashboard will work out of the box and custom styling can be done with the appearance prop.
1import { SignIn } from "@clerk/clerk-react";23// Render the sign in component in your4// custom sign in page.5function SignInPage() {6return (7<SignIn />8);9}
1// Mount the sign in component inside the HTML element2// with id "sign-in".3window.Clerk.mountSignIn(4document.getElementById("sign-in")5);67// Open the sign in component as a modal.8window.Clerk.openSignIn();
Routing & Paths
The mounted <SignIn/>
component uses hash-based routing by default. As the sign in flow progresses, the hash portion of the URL will update to reflect the current step. An example of such a URL would be example.com/sign-in#/factor-one
.
You can instead use path-based routing with some additional configuration. With path-based routing, the above URL would become example.com/sign-in/factor-one
.
There are two props that control the routing type and the path. These are called routing
and path
. You can read more about them in the Props section of this document.
Below is an example that uses path-based routing to mount the <SignIn/>
component under the "/sign-in" path. The Clerk React snippet uses the popular React Router library, but it can be easily adapted to use the routing library of your choice. We've also added an example for Next.js, which showcases integration with Next.js routing.
1import {2ClerkProvider,3SignedIn,4SignIn5} from "@clerk/clerk-react";6import {7BrowserRouter,8Route,9Routes,10useNavigate11} from "react-router-dom";1213function PublicPage() {14return <h1>Public page</h1>;15}1617function ProtectedPage() {18return <h1>Protected page</h1>;19}2021function ClerkProviderWithRoutes() {22const navigate = useNavigate();2324return (25<ClerkProvider26publishableKey="clerk-pub-key"27navigate={(to) => navigate(to)}28>29<Routes>30<Route path="/" element={<PublicPage />} />31<Route32path="/sign-in"33element={<SignIn routing="path" path="/sign-in" />}34/>35<Route36path="/protected"37element={38<SignedIn>39<ProtectedPage />40</SignedIn>41}42/>43</Routes>44</ClerkProvider>45);46}4748function App() {49return (50<BrowserRouter>51<ClerkProviderWithRoutes />52</BrowserRouter>53);54}5556export default App;
1<html>2<body>3<div id="sign-in"></div>45<script>6const el = document.getElementById("sign-in");7// Mount the pre-built Clerk SignIn component8// inside an HTMLElement on your page.9window.Clerk.mountSignIn(el, {10routing: "path",11path: "/sign-up",12});13</script>14</body>15</html>
Override URLs
By default, the <SignIn/>
component will use the Clerk Hosted Pages URL for sign ups. You can override this at runtime, by passing the signUpURL
property to the component.
Similarly, you can override the redirect URL after successful sign ins by providing the afterSignIn
property to the component.
Both URL property values can be either relative paths (like /home) or full URLs (like https://my-domain.com/home).
1import { SignIn } from "@clerk/clerk-react";23// Root path points to your homepage and sign up URL4// is the full URL to your sign up page. These can be5// either relative paths or full URLs.6import { rootPath, signUpURL } from "src/routes";78// Render the sign in component in your custom sign in9// page overriding the pre-configured URLs.10function SignInPage() {11return (12<SignIn13afterSignInUrl={rootPath}14signUpUrl={signUpURL}15/>16);17}
1// Mount the sign in component inside the2// HTML element with id "sign-in".3window.Clerk.mountSignIn(4document.getElementById("sign-in"),5{6afterSignIn: "/home",7signUpURL: "/sign-up",8},9);1011// Open the sign in component as a modal.12window.Clerk.openSignIn({13afterSignInUrl: "/home",14signUpUrl: "/sign-up",15});
Props
Name | Type | Description |
---|---|---|
routing? | RoutingStrategy | The routing strategy for your pages. Supported values are:
|
path? | string | The path where the component is mounted on when path-based routing is used e.g. /sign-in. This prop is ignored in hash and virtual based routing. |
redirectUrl? | string | Full URL or path to navigate after successful sign in or sign up. The same as setting afterSignInUrl and afterSignUpUrl to the same value. |
afterSignInUrl? | string | The full URL or path to navigate after a successful sign in. |
afterSignUpUrl? | string | The full URL or path to navigate after a successful sign up. |
signUpUrl? | string | Full URL or path to the sign up page. Use this property to provide the target of the "Sign Up" link that's rendered. |
Customization
The <SignIn/>
component can be highly customized through the appearance prop and can be styled using CSS Modules, Tailwind, inline CSS objects, or global CSS.