<SignIn />
component
The <SignIn />
component renders a UI for signing in users. The functionality of the <SignIn />
component is controlled by the instance settings you specify in your Clerk Dashboard, such as sign-in and sign-up options and social connections. You can further customize your <SignIn />
component by passing additional properties at the time of rendering.
Properties
All props are optional.
- Name
appearance
- Type
Appearance | undefined
- Description
Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
- Name
routing
- Type
'hash' | 'path' | 'virtual'
- Description
The routing strategy for your pages.
Note: If you are using environment variables for Next.js or Remix to specify your routes, such asNEXT_PUBLIC_CLERK_SIGN_IN_URL
, this will be set topath
.
- Name
path
- Type
string
- Description
The path where the component is mounted on when path-based routing is used.
For example:/sign-in
This prop is ignored in hash- and virtual-based routing.
- Name
redirectUrl
- Type
string
- Description
Full URL or path to navigate to after successful sign in or sign up.
The same as settingafterSignInUrl
andafterSignUpUrl
to the same value.
- Name
afterSignInUrl
- Type
string
- Description
The full URL or path to navigate to after a successful sign in.
- Name
signUpUrl
- Type
string
- Description
Full URL or path to the sign up page. Use this property to provide the target of the 'Sign Up' link that's rendered.
- Name
afterSignUpUrl
- Type
string
- Description
The full URL or path to navigate to after a successful sign up.
- Name
initialValues
- Type
SignInInitialValues
- Description
The values used to prefill the sign-in fields with.
Usage with frameworks
The following example includes basic implementation of the <SignIn />
component. You can use this as a starting point for your own implementation.
The following example demonstrates how you can use the <SignIn />
component on a public page.
If you would like to create a dedicated /sign-in
page in your Next.js application, check out the dedicated guide..
import { SignIn, useUser } from "@clerk/nextjs";
export default function Home() {
const { user } = useUser();
if (!user) {
return <SignIn />;
}
return <div>Welcome!</div>;
}
import { SignIn } from "@clerk/clerk-react";
const SignInPage = () => (
<SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
);
export default SignInPage;
import { SignIn } from "@clerk/remix";
export default function SignInPage() {
return (
<div style={{ border: "2px solid blue", padding: "2rem" }}>
<h1>Sign In route</h1>
<SignIn routing={"path"} path={"/sign-in"} />
</div>
);
}
import { SignIn } from "gatsby-plugin-clerk";
export default function SignInPage() {
return (
<div style={{ border: "2px solid blue", padding: "2rem" }}>
<h1>Sign In Up route</h1>
<SignIn routing={"path"} path={"/sign-in"} />
</div>
);
}
Usage with JavaScript
The following methods available on an instance of the Clerk
class are used to render and control the <SignIn />
component:
The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.
mountSignIn()
Render the <SignIn />
component to an HTML <div>
element.
function mountSignIn(node: HTMLDivElement, props?: SignInProps): void;
- Name
node
- Type
HTMLDivElement
- Description
The container
<div>
element used to render in the<SignIn />
component
- Name
props?
- Type
SignInProps
- Description
The properties to pass to the
<SignIn />
component
import Clerk from "@clerk/clerk-js";
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk("YOUR_PUBLISHABLE_KEY");
await clerk.load();
document.getElementById("app").innerHTML = `
<div id="sign-in"></div>
`;
const signInDiv = document.getElementById("sign-in");
clerk.mountSignIn(signInDiv);
<!-- Add a <div id="sign-in"> element to your HTML -->
<div id="sign-in"></div>
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
type="text/javascript"
></script>
<script>
window.addEventListener("load", async function () {
await Clerk.load();
const signInDiv = document.getElementById("sign-in");
Clerk.mountSignIn(signInDiv);
});
</script>
unmountSignIn()
Unmount and run cleanup on an existing <SignIn />
component instance.
function unmountSignIn(node: HTMLDivElement): void;
- Name
node
- Type
HTMLDivElement
- Description
The container
<div>
element with a rendered<SignIn />
component instance
import Clerk from "@clerk/clerk-js";
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk("YOUR_PUBLISHABLE_KEY");
await clerk.load();
document.getElementById("app").innerHTML = `
<div id="sign-in"></div>
`;
const signInDiv = document.getElementById("sign-in");
clerk.mountSignIn(signInDiv);
// ...
clerk.unmountSignIn(signInDiv);
<!-- Add a <div id="sign-in"> element to your HTML -->
<div id="sign-in"></div>
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
type="text/javascript"
></script>
<script>
window.addEventListener("load", async function () {
await Clerk.load();
const signInDiv = document.getElementById("sign-in");
Clerk.mountSignIn(signInDiv);
// ...
Clerk.unmountSignIn(signInDiv);
});
</script>
openSignIn()
Opens the <SignIn />
component as an overlay at the root of your HTML body
element.
function openSignIn(props?: SignInProps): void;
openSignIn()
params
Name | Type | Desciption |
---|---|---|
props? | SignInProps | The properties to pass to the <SignIn /> component |
openSignIn()
usage
import Clerk from "@clerk/clerk-js";
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk("YOUR_PUBLISHABLE_KEY");
await clerk.load();
clerk.openSignIn();
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
type="text/javascript"
></script>
<script>
window.addEventListener("load", async function () {
await Clerk.load();
Clerk.openSignIn();
});
</script>
closeSignIn()
Closes the sign in overlay.
function closeSignIn(): void;
import Clerk from "@clerk/clerk-js";
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk("YOUR_PUBLISHABLE_KEY");
await clerk.load();
clerk.openSignIn();
// ...
clerk.closeSignIn();
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
type="text/javascript"
></script>
<script>
window.addEventListener("load", async function () {
await Clerk.load();
Clerk.openSignIn();
// ...
Clerk.closeSignIn();
});
</script>
Customization
To learn about how to customize Clerk components, see the customization documentation.
Feedback
Last updated on