One-time codes (OTP)
Learn how to send one-time codes (OTP) to authenticate users.
Overview
Clerk supports passwordless authentication, which lets users sign in and sign up without having to remember a password. During sign in, users will be asked to enter their identifier (email address or phone number) to receive a one-time code and complete the authentication process.
Arguably, passwordless authentication provides greater security and a better user experience than traditional passwords. However, it is not without its downsides, and often still boils down to the email providers "knowledge based factor" instead of yours.
There are a few different ways to set up passwordless authentication in Clerk; Clerk Hosted Pages, Clerk Components and by creating a custom flow using Clerk's SDKs.
The rest of this guide will explain how to set up passwordless authentication using any of the above methods. Before you start, you will need to configure your instance to allow passwordless sign-ins.
Looking for magic links? Check out our Magic links authentication guide.
Looking for 2FA? Check out our Multi-factor authentication guide.
Before you start
- You need to create a Clerk Application in your Clerk Dashboard. For more information, check out our Set up your application guide.
- You need to install Clerk React or ClerkJS to your application.
Configuration
Passwordless authentication can be configured through the Clerk Dashboard. Go to your instance, then User & Authentication > Email, Phone, Username > Authentication factors. Simply choose one of the available passwordless authentication strategies that send one-time codes; Email verification code or SMS verification code.

Don't forget that you also need to make sure you've configured your application instance to request the user's contact information. Users can receive one-time codes via either an email address or a phone number.
Make sure you toggle one of Email address, Phone number on in the Contact information section. Once you've enabled one of the two contact information options, ensure it can be used for identification. Click the cog on the top-right, and verify that the Used for identification toggle is on.

For the rest of this guide, we'll use the Phone number option.
Don't forget to click on the Apply Changes button at the bottom of the page once you're done configuring your instance.
That's all you need to do to enable passwordless authentication with One-time codes for your instance. Now let's see how we can put this configuration to good use.
Using Clerk Hosted Pages
If you're looking for the fastest way to implement passwordless 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 in the Paths section of your instance in Clerk Dashboard.

By default, the URLs for your hosted pages will match the following pattern:
https://accounts.[your-domain].com/sign-inhttps://accounts.[your-domain].com/sign-uphttps://accounts.[your-domain].com/user
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.
1import {2RedirectToSignUp,3RedirectToSignIn4} from "@clerk/clerk-react";56// Rendering the RedirectToSignOut component will7// cause the browser to navigate to the Sign up8// URL and show the Sign Up Clerk Hosted Page.9function App() {10return <RedirectToSignUp />;11}1213// Rendering the RedirectToSignIn component will14// cause the browser to navigate to the Sign in15// URL and show the Sign In Clerk Hosted Page.16function App() {17return <RedirectToSignIn />;18}
Using Clerk Components
You can leverage Clerk Components in order to easily add support for passwordless authentication in your application.
Clerk provides a <SignUp /> pre-built component that renders a sign up form to handle user registrations.
Similarly, there's a <SignIn /> pre-built component that renders a sign in form and takes care of user authentication and session creation.
Note that you don't need to pass any special options to the pre-built <SignUp /> and <SignIn /> components. Passwordless authentication will just work, since you already configured through the Clerk Dashboard.
Sign up using Clerk components
Signing users up to your application is as simple as rendering the <SignUp /> component.
1import { SignUp } from "@clerk.clerk-react";23// SignUpPage is your custom sign up page component.4function SignUpPage() {5return (6// The Clerk SignUp component needs no special7// configuration. Passwordless authentication8// will just work when configured from the9// Clerk dashboard.10<SignUp />11);12}
Sign in using Clerk components
Signing users in with a one-time token is as simple as mounting the <SignIn /> component.
1import { SignIn } from "@clerk/clerk-react";23// SignInPage is your custom sign in page component.4function SignInPage() {5return (6// The Clerk SignIn component needs no special7// configuration.8<SignIn />9);10}
If you're interested in more pre-built offerings, you can read more about Clerk Components.
Custom flow
In case one of the above integration methods doesn't cover your needs, you can make use of lower level commands and create a completely custom passwordless authentication flow.
You still need to configure your instance in order to enable passwordless authentication, as described at the top of this guide.
Sign up using custom flow
The passwordless sign up flow is a process which requires users to provide their authentication identifier (email address or phone number) and a one-time code that is sent to them. The important thing to note here is that a user's email address or phone number needs to be verified before the registration is completed.
A successful sign up consists of the following steps:
- Initiate the sign up process, by collecting the user's identifier (email address or phone number).
- Prepare the identifier verification.
- Attempt to complete the identifier verification.
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.
1import { useSignUp } from "@clerk/clerk-react";23function SignUpPage() {4const { signUp } = useSignUp();56async function onClick(e) {7e.preventDefault();8// Kick off the sign-up process, passing the user's9// phone number.10await signUp.create({11phoneNumber: "+11111111111",12});1314// Prepare phone number verification. An SMS message15// will be sent to the user with a one-time16// verification code.17await signUp.preparePhoneNumberVerification();1819// Attempt to verify the user's phone number by20// providing the one-time code they received.21await signUp.attemptPhoneNumberVerification({22code: "123456",23});24}2526return (27<button onClick={onClick}>28Sign up without password29</button>30);31}
You can also verify your users via their email address. There's two additional helper methods, prepareEmailAddressVerification
and attemptEmailAddressVerification
that work the same way as their phone number counterparts do. You can find more available methods in our ClerkJS API documentation for the SignUp object.
Sign in using custom flow
The passwordless sign in flow is a process which requires users to provide their authentication identifier (email address or phone number) and subsequently a one-time code that is sent to them. We call this one-time code the first factor of authentication.
So, in essence, when you want to authenticate users in your application, you need to
- Initiate the sign in process, by collecting the user's authentication identifier.
- Prepare the first factor verification.
- Attempt to complete the first factor verification.
Let's see the above in action. If you want to learn more about sign ins, check out our documentation on Clerk's Sign in flow.
1import { useSignIn } from "@clerk/clerk-react";23function SignInPage() {4const { signIn } = useSignIn();56async function onClick(e) {7e.preventDefault();8// Kick off the sign-in process, passing the user's9// authentication identifier. In this case it's their10// phone number.11await signIn.create({12identifier: "+11111111111",13});1415// Prepare first factor verification, specifying16// the phone code strategy.17await signIn.prepareFirstFactor({18strategy: "phone_code",19phoneNumberId: "idn_1vf1vozUmkg2iN6WY0efWDcEC1a",20});2122// Attempt to verify the user providing the23// one-time code they received.24await signIn.attemptFirstFactor({25strategy: "phone_code",26code: "123456",27});28}2930return (31<button onClick={onClick}>32Sign in without password33</button>34);35}
You can also achieve passwordless sign-ins with email address. Simply pass the value email_code as the first factor strategy. Just make sure you've collected the user's email address first. You can find all available methods on the SignIn object documentation.