<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.

1
import { SignIn } from "@clerk/clerk-react";
2

3
// Render the sign in component in your
4
// custom sign in page.
5
function SignInPage() {
6
  return (
7
    <SignIn />
8
  );
9
}

1
// Mount the sign in component inside the HTML element
2
// with id "sign-in".
3
window.Clerk.mountSignIn(
4
  document.getElementById("sign-in")
5
);
6

7
// Open the sign in component as a modal.
8
window.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.

1
import { 
2
  ClerkProvider,
3
  SignedIn,
4
  SignIn
5
} from "@clerk/clerk-react";
6
import {
7
  BrowserRouter,
8
  Route,
9
  Routes,
10
  useNavigate
11
} from "react-router-dom";
12

13
function PublicPage() {
14
  return <h1>Public page</h1>;
15
}
16

17
function ProtectedPage() {
18
  return <h1>Protected page</h1>;
19
}
20

21
function ClerkProviderWithRoutes() {
22
  const navigate = useNavigate();
23

24
  return (
25
    <ClerkProvider 
26
      publishableKey="clerk-pub-key" 
27
      navigate={(to) => navigate(to)}
28
     >
29
      <Routes>
30
        <Route path="/" element={<PublicPage />} />
31
        <Route
32
          path="/sign-in"
33
          element={<SignIn routing="path" path="/sign-in" />}
34
        />
35
        <Route
36
          path="/protected"
37
          element={
38
            <SignedIn>
39
              <ProtectedPage />
40
            </SignedIn>
41
          }
42
        />
43
      </Routes>
44
    </ClerkProvider>
45
  );
46
}
47

48
function App() {
49
  return (
50
    <BrowserRouter>
51
      <ClerkProviderWithRoutes />
52
    </BrowserRouter>
53
  );
54
}
55

56
export default App;

1
<html>
2
<body>
3
    <div id="sign-in"></div>
4
    
5
    <script>
6
        const el = document.getElementById("sign-in");
7
        // Mount the pre-built Clerk SignIn component
8
        // inside an HTMLElement on your page. 
9
        window.Clerk.mountSignIn(el, {
10
            routing: "path",
11
            path: "/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).

1
import { SignIn } from "@clerk/clerk-react";
2

3
// Root path points to your homepage and sign up URL
4
// is the full URL to your sign up page. These can be
5
// either relative paths or full URLs.
6
import { rootPath, signUpURL } from "src/routes";
7

8
// Render the sign in component in your custom sign in 
9
// page overriding the pre-configured URLs.
10
function SignInPage() {
11
  return (
12
    <SignIn 
13
      afterSignInUrl={rootPath}
14
      signUpUrl={signUpURL}
15
    />
16
  );
17
}

1
// Mount the sign in component inside the
2
// HTML element with id "sign-in".
3
window.Clerk.mountSignIn(
4
  document.getElementById("sign-in"),
5
  {
6
    afterSignIn: "/home",
7
    signUpURL: "/sign-up",
8
  },
9
);
10

11
// Open the sign in component as a modal.
12
window.Clerk.openSignIn({
13
  afterSignInUrl: "/home",
14
  signUpUrl: "/sign-up",  
15
});

Props

Name	Type	Description
routing?	RoutingStrategy	The routing strategy for your pages. Supported values are: hash (default): Hash-based routing. path: Path-based routing. virtual: Virtual-based routing.
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.