<SignIn />

Full-featured UI for signing users in 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. Your instance settings also allow for customization of the look and feel of the <SignIn/> component.

You can further customize your <SignIn/> component by passing additional properties at the time of rendering.

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 and look and feel for the <SignIn/> component, all that's left is to render it inside your page. The default rendering is simple but powerful enough to cover most use-cases. The authentication and display (look and feel) configuration that you've set up in your Clerk Dashboard will work out of the box.

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
// In _app.jsx:
2
// Your usual NextJS root component, wrapped by ClerkProvider
3
import { ClerkProvider } from '@clerk/clerk-react';
4
import { useRouter } from 'next/router';
5

6
function MyApp({ Component, pageProps }) {
7
  // Get the navigate/push method from
8
  // the NextJS router
9
  const { push } = useRouter();
10

11
  return (
12
    // Pass the push method to ClerkProvider
13
    <ClerkProvider 
14
      frontendApi="clerk.[your-domain].com"
15
      navigate={(to) => push(to)}
16
    >
17
      <Component {...pageProps} />
18
    </ClerkProvider>
19
  );
20
}
21

22
export default MyApp;
23

24

25
// In pages/sign-in/[[..index]].jsx:
26
// This is your catch all route that renders the SignIn 
27
// component
28
import { SignIn } from '@clerk/clerk-react';
29

30
export default function SignInPage() {
31
  // Mount the SignIn component under "/sign-up". 
32
  // The routing is set to path-based.
33
  return <SignIn routing="path" path="/sign-in" />;
34
}

1
import { 
2
  BrowserRouter as Router,
3
  Route,
4
  Switch,
5
  useHistory 
6
} from 'react-router-dom';
7
import { ClerkProvider, SignIn } from '@clerk/clerk-react';
8

9
function App() {
10
  // Get the navigate/push method from
11
  // your router library. Here we'll use
12
  // react-router-dom.
13
  const { push } = useHistory();
14

15
  return (
16
    <Router>
17
      // Pass the push method to ClerkProvider
18
      <ClerkProvider 
19
        frontendApi="clerk.[your-domain].com" 
20
        navigate={(to) => push(to)}
21
      >
22
        <Switch>
23
          // Declare a /sign-in route
24
          <Route path="/sign-in">
25
            // Mount the SignIn component under "/sign-in".
26
            // The routing is set to path-based.
27
            <SignIn routing="path" path="/sign-up" />
28
          </Route>
29
        </Switch>
30
      </ClerkProvider>
31
    </Router>
32
  );
33
}
34

35
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?	string	The routing strategy for your pages. Supported values are: path: Path based routing. hash: Hash based routing. virtual: Virtual based routing.
path?	string	The root URL where the component is mounted on. This prop is ignored in hash 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 Instance settings on the Theme page. This document will be updated soon with all necessary details.