<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.
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.
1// In _app.jsx:2// Your usual NextJS root component, wrapped by ClerkProvider3import { ClerkProvider } from '@clerk/clerk-react';4import { useRouter } from 'next/router';56function MyApp({ Component, pageProps }) {7// Get the navigate/push method from8// the NextJS router9const { push } = useRouter();1011return (12// Pass the push method to ClerkProvider13<ClerkProvider14frontendApi="clerk.[your-domain].com"15navigate={(to) => push(to)}16>17<Component {...pageProps} />18</ClerkProvider>19);20}2122export default MyApp;232425// In pages/sign-in/[[..index]].jsx:26// This is your catch all route that renders the SignIn27// component28import { SignIn } from '@clerk/clerk-react';2930export default function SignInPage() {31// Mount the SignIn component under "/sign-up".32// The routing is set to path-based.33return <SignIn routing="path" path="/sign-in" />;34}
1import {2BrowserRouter as Router,3Route,4Switch,5useHistory6} from 'react-router-dom';7import { ClerkProvider, SignIn } from '@clerk/clerk-react';89function App() {10// Get the navigate/push method from11// your router library. Here we'll use12// react-router-dom.13const { push } = useHistory();1415return (16<Router>17// Pass the push method to ClerkProvider18<ClerkProvider19frontendApi="clerk.[your-domain].com"20navigate={(to) => push(to)}21>22<Switch>23// Declare a /sign-in route24<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}3435export 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? | string | The routing strategy for your pages. Supported values are:
|
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.