<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 basic and passwordless, to social login (OAuth) and 2-step verification (2FA).

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.

Clerk React
ClerkJS
Clerk React
import { SignIn } from "@clerk/react";
// Render the sign in component in your
// custom sign in page.
function SignInPage() {
return (
<SignIn />
);
}
ClerkJS
// Mount the sign in component inside the HTML element
// with id "sign-in".
window.Clerk.mountSignIn(
document.getElementById("sign-in")
);
// Open the sign in component as a modal.
window.Clerk.openSignIn();

Routing & URL path

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 becomeexample.com/sign-in/factor-one.

There are two props that control the routing type and the URL 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" URL 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.

Clerk React
Clerk Next
ClerkJS
Clerk React
import {
BrowserRouter as Router,
Route,
Switch,
useHistory
} from 'react-router-dom';
import { ClerkProvider, SignIn } from '@clerk/clerk-react';
function App() {
// Get the navigate/push method from
// your router library. Here we'll use
// react-router-dom.
const { push } = useHistory();
return (
<Router>
// Pass the push method to ClerkProvider
<ClerkProvider
frontendApi="clerk.[your-domain].com"
navigate={(to) => push(to)}
>
<Switch>
// Declare a /sign-in route
<Route path="/sign-in">
// Mount the SignIn component under "/sign-in".
// The routing is set to path-based.
<SignIn routing="path" path="/sign-up" />
</Route>
</Switch>
</ClerkProvider>
</Router>
);
}
export default App;
Clerk Next
// In _app.jsx:
// Your usual NextJS root component, wrapped by ClerkProvider
import { ClerkProvider } from '@clerk/clerk-react';
import { useRouter } from 'next/router';
function MyApp({ Component, pageProps }) {
// Get the navigate/push method from
// the NextJS router
const { push } = useRouter();
return (
// Pass the push method to ClerkProvider
<ClerkProvider
frontendApi="clerk.[your-domain].com"
navigate={(to) => push(to)}
>
<Component {...pageProps} />
</ClerkProvider>
);
}
export default MyApp;
// In pages/sign-in/[[..index]].jsx:
// This is your catch all route that renders the SignIn
// component
import { SignIn } from '@clerk/clerk-react';
export default function SignInPage() {
// Mount the SignIn component under "/sign-up".
// The routing is set to path-based.
return <SignIn routing="path" path="/sign-in" />;
}
ClerkJS
<html>
<body>
<div id="sign-in"></div>
<script>
const el = document.getElementById("sign-in");
// Mount the pre-built Clerk SignIn component
// inside an HTMLElement on your page.
window.Clerk.mountSignIn(el, {
routing: "path",
path: "/sign-up",
});
</script>
</body>
</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).

Clerk React
ClerkJS
Clerk React
import { SignIn } from "@clerk/react";
// Root path points to your homepage and sign up URL
// is the full URL to your sign up page. These can be
// either relative paths or full URLs.
import { rootPath, signUpURL } from "src/routes";
// Render the sign in component in your custom sign in
// page overriding the pre-configured URLs.
function SignInPage() {
return (
<SignIn
afterSignIn={rootPath}
signUpURL={signUpURL}
/>
);
}
ClerkJS
// Mount the sign in component inside the
// HTML element with id "sign-in".
window.Clerk.mountSignIn(
document.getElementById("sign-in"),
{
afterSignIn: "/home",
signUpURL: "/sign-up",
},
);
// Open the sign in component as a modal.
window.Clerk.openSignIn({
afterSignIn: "/home",
signUpURL: "/sign-up",
});

Props

Name

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.

afterSignInUrl?

string

The full URL or path to navigate after a successful sign in.

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 in the Clerk Dashboard. This document will be updated soon with all necessary details.