Search…
Email and password
Learn how to setup email/password authentication.

Overview

One of the most common authentication methods used today is the humble email and password. With this setup, users that come to your website will need to supply these credentials in order to gain access to their account.
Clerk enforces every user to have a verified email address. This is done during sign up, by sending a one-time code to the supplied email address.
There are a few different ways to set up an email/password user management system in Clerk. You can use Clerk Hosted Pages, Clerk Components, or build a completely custom flow with ClerkJS or Clerk React.
The rest of this guide will explain how to set up an email/password user management system using any of the above methods.
To keep your users safe, Clerk follows a "secure-by-default" policy, and we follow all NIST best practices. This includes password validations out of the box.

Before you start

Configuration

The first thing you need to do is enable email address and password-based authentication in your Clerk instance.
From the Clerk Dashboard, select your instance and head over to Settings > User Management.
Select Email address for your contact information and Password-based as your authentication strategy. For more information on the available settings, check out our Instance settings guide.
Don't forget to click on Apply changes at the bottom of the page!
Choosing email address as an authentication identifier.
Enabling password-based authentication strategy in your instance settings.
Instead of email address you could also use phone numbers. All you need to do is choose Phone Number under contact information.

Using Clerk Hosted Pages

If you're looking for the fastest way to implement password based authentication, you can leverage Clerk Hosted Pages for your sign up, sign in, and user profile pages. You can set these up on your own domain, and match your websites theme with the Clerk Dashboard to create a seamless experience.
You can find your instances sign up and sign in links in the Home > Instance configuration section of your instance in Clerk Dashboard.
Clerk Hosted Pages URLs
By default, the URLs for your hosted pages will match the following pattern:
1
https://accounts.[your-domain].com/sign-in
2
https://accounts.[your-domain].com/sign-up
3
https://accounts.[your-domain].com/user
Copied!
For development instances, Clerk will issue you a domain on "lcl.dev". In production, you'll need to supply your own domain. See Production setup or more information
Clerk provides SDKs to make navigating to these pages easy.
Clerk React
ClerkJS
1
import {
2
RedirectToSignIn,
3
RedirectToSignUp
4
} from "@clerk/clerk-react";
5
6
// Rendering the RedirectToSignIn component will
7
// cause the browser to navigate to the Sign in
8
// URL and show the Sign In Clerk Hosted Page.
9
function App() {
10
return <RedirectToSignIn />;
11
}
12
13
// Rendering the RedirectToSignUp component will
14
// cause the browser to navigate to the Sign up
15
// URL and show the Sign Up Clerk Hosted Page.
16
function App() {
17
return <RedirectToSignUp />;
18
}
Copied!
1
// redirectToSignIn will cause the browser to
2
// visit the Clerk Hosted Pages Sign in URL.
3
window.Clerk.redirectToSignIn();
4
5
// redirectToSignIn will cause the browser to
6
// visit the Clerk Hosted Pages Sign in URL.
7
window.Clerk.redirectToSignIn();
Copied!
Read our detailed Clerk Hosted Pages guide to learn more.

Using Clerk Components

If you want more control over the look and feel of your sign in and sign up experience, but you don't want to completely build one from scratch, you can use the pre-built Clerk Components.
Clerk provides <SignIn />, <SignUp /> and <UserProfile /> components that render entire flows. Using these, Clerk will take care of everything from verifying the user's email address to letting your user add 2FA. Each of these components is also completely customizable via CSS.
Clerk React
ClerkJS
1
import { SignUp } from "@clerk/clerk-react";
2
3
// SignUpPage is your custom sign-up page component.
4
function SignUpPage() {
5
return (
6
<SignUp />
7
);
8
}
9
Copied!
1
<html>
2
<body>
3
<div id="sign-up"></div>
4
5
<script>
6
const el = document.getElementById("sign-up");
7
// Mount the pre-built Clerk SignUp component
8
// in an HTMLElement on your page.
9
window.Clerk.mountSignUp(el);
10
11
// Render the SignUp component as a
12
// modal on the page.
13
window.Clerk.openSignUp();
14
</script>
15
</body>
16
</html>
Copied!
In the same fashion, there is a <SignIn /> component which renders a sign-in form which takes care of authenticating users and creating sessions.
Clerk React
ClerkJS
1
import { SignIn } from "@clerk/clerk-react";
2
3
// SignInPage is your custom sign-in page component.
4
function SignInPage() {
5
return (
6
<SignIn />
7
);
8
}
Copied!
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
// in an HTMLElement on your page.
9
window.Clerk.mountSignIn(el);
10
11
// Render the SignIn component as a
12
// modal on the page.
13
window.Clerk.openSignIn();
14
</script>
15
</body>
16
</html>
Copied!
Note that you don't need to pass any special options to the SignUp and SignIn components. Email/password authentication will just work, since it has already been configured through the Clerk dashboard.
For more details on the available component options as well as how you can customize them, please visit the <SignUp /> and <SignIn /> component guides.

Custom flow

In case one of the above integration methods doesn't cover your needs, you can leverage Clerk's APIs to create a completely custom email/password sign in and sign up flow.
You will still need to configure your instance for email/password authentication as described at the top of this guide.

Sign up

The email/password sign-up flow requires users to provide their email address and their password and returns a newly-created user with an active session. The important thing to note here is that a user's email address needs to be verified before the registration is completed.
A successful sign-up consists of the following steps:
  1. 1.
    Initiate the sign-up process, by collecting the user's email address and password.
  2. 2.
    Prepare the email address verification, which basically sends a one-time code to the given address.
  3. 3.
    Attempt to complete the email address verification by supplying the one-time code.
Let's see the above in action. If you want to learn more about sign-ups, check out our documentation on Clerk's Sign up flow.
Clerk React
ClerkJS
1
import { useSignUp } from "@clerk/clerk-react";
2
3
const signUp = useSignUp();
4
5
// Create a new sign-up with the supplied email and password.
6
signUp.create({
7
emailAddress,
8
password
9
});
10
11
// Prepare the verification process for the email address.
12
// This method will send a one-time code to the email address supplied to
13
// the current sign-up.
14
await signUp.prepareEmailAddressVerification();
15
16
// Attempt to verify the email address by supplying the one-time code that
17
// was sent in the previous step.
18
const response = signUp.attemptEmailAddressVerification({
19
code: oneTimeCode
20
});
Copied!
1
const { client } = window.Clerk;
2
3
// Create a new sign-up with the supplied email and password.
4
const signUp = await client.signUp.create({
5
emailAddress,
6
password
7
});
8
9
// Prepare the verification process for the email address.
10
// This method will send a one-time code to the email address supplied to
11
// the current sign-up.
12
await signUp.prepareEmailAddressVerification();
13
14
// Attempt to verify the email address by supplying the one-time code that
15
// was sent in the previous step.
16
const response = signUp.attemptEmailAddressVerification({
17
code: oneTimeCode
18
});
Copied!

Sign in

In email/password authentication, the sign in is a process which requires users to provide their email address and their password and authenticates them by creating a new session for the user.
Clerk React
ClerkJS
1
import { useSignIn, useClerk } from "@clerk/clerk-react";
2
3
const signIn = useSignIn();
4
const { setSession } = useClerk();
5
6
// Supply the email address and the password to sign in `create`.
7
// If the combination is correct, the response would include the newly-created
8
// session.
9
const response = await signIn.create({
10
identifier: emailAddress,
11
password
12
});
13
14
// Set the newly-created session as the active session of the Clerk object
15
setSession(....);
Copied!
1
const { client } = window.Clerk;
2
3
// Supply the email address and the password to sign-in `create`.
4
// If the combination is correct, the response would include the newly-created
5
// session.
6
const response = await client.signIn.create({
7
identifier: emailAddress,
8
password
9
});
10
11
// Set the newly-created session as the active session of the Clerk object
12
window.Clerk.setSession(....);
Copied!
Note that both the sign in and the sign up flows are extremely flexible and can cover even the most complicated authentication flows.
If you want to build custom authentication flows, you should start with Clerk's sign in and sign up flows, and then check out the ClerkJS or Clerk React reference docs.
While this guide describes an email/password flow, most of this is relevant to all of the authentication strategies Clerk offers. To learn about all possible setups, checkout Setup your application for more information.
Last modified 4d ago