Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/_tooltips/otp.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
An **OTP** stands for one-time password and is a code that is used to authenticate a user. The OTP is typically sent to a user's email address or phone number and must be entered within a certain time period to be valid.
2 changes: 1 addition & 1 deletion docs/getting-started/quickstart.expo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ sdk: expo
await signUp.prepareEmailAddressVerification({ strategy: 'email_code' })

// Set 'pendingVerification' to true to display second form
// and capture OTP code
// and capture code
setPendingVerification(true)
} catch (err) {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/configure/auth-strategies/oauth/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Rather than asking for a username and password for each social media platform, w
>
> - **Automated logins and security controls**: even if an app had your credentials, it would need to sign in as you through an automated script. However, many authentication systems detect and block scripted logins to protect against bots and abuse. OAuth provides a standardized way to grant access without bypassing these controls.
>
> - **Modern authentication**: many platforms now require additional security measures beyond just a username and password, such as multi-factor authentication (MFA), one-time passwords (OTPs), or passkeys. OAuth is designed to work with these modern authentication methods, ensuring secure access without compromising the user's account.
> - **Modern authentication**: many platforms now require additional security measures beyond just a username and password, such as multi-factor authentication (MFA), one-time passwords ([OTPs](!otp)), or passkeys. OAuth is designed to work with these modern authentication methods, ensuring secure access without compromising the user's account.

## Key terminology

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ SMS functionality is restricted to phone numbers from countries enabled on your

### SMS allowlist

SMS functionality, including SMS OTPs, is restricted to phone numbers from countries that are enabled on your SMS allowlist. This can be useful for avoiding extraneous SMS fees from countries from which your app is not expected to attract traffic.
SMS functionality, including SMS [OTPs](!otp), is restricted to phone numbers from countries that are enabled on your SMS allowlist. This can be useful for avoiding extraneous SMS fees from countries from which your app is not expected to attract traffic.

Every instance starts off with a default set of enabled SMS country tiers. To tailor it to your needs:

Expand All @@ -48,7 +48,7 @@ Every instance starts off with a default set of enabled SMS country tiers. To ta

If a country is disabled, then phone numbers starting with the corresponding country calling code:

- Cannot receive OTPs and a request to receive an OTP will be rejected with an error
- Cannot receive [OTPs](!otp) and a request to receive an OTP will be rejected with an error
- Cannot receive notifications for password or passkey modifications
- Cannot be used upon sign-up
- Cannot be added to an existing user profile
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Example implementations using Clerk Elements primitives.

## OTP Input

The following example demonstrates how to use the `otp` input type with the render prop to create a custom OTP input field for phone and email codes, that is animated with Framer Motion.
The following example demonstrates how to use the `otp` input type with the render prop to create a custom one-time password ([OTP](!otp)) input field for phone and email codes, that is animated with Framer Motion.

```tsx {{ title: 'OTP Input', collapsible: true }}
<Clerk.Input
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -583,7 +583,7 @@ export default function SignInPage() {

## OTP input

The following example demonstrates how to make a one-time password (OTP) input with Clerk Elements. This example will only work if placed within a `Step` in a sign-up or sign-in authentication flow, as shown in [the sign-in](#sign-in) and [sign-up](#sign-up) examples.
The following example demonstrates how to make a one-time password ([OTP](!otp)) input with Clerk Elements. This example will only work if placed within a `Step` in a sign-up or sign-in authentication flow, as shown in [the sign-in](#sign-in) and [sign-up](#sign-up) examples.

```tsx {{ title: 'OTP Input', collapsible: true }}
<Clerk.Input
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/customizing-clerk/elements/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Clerk Elements is a library of unstyled, composable components that can be used
You should use Clerk Elements if you want a deeper level of control and customization of the styles and layout of your UI while using the Clerk APIs. For example, if [the appearance prop](/docs/guides/customizing-clerk/appearance-prop/overview) does not meet your needs, Clerk Elements might be for you. That said, you can also use Clerk Elements alongside the prebuilt components.

- **Component-first** - Make it as easy to build custom UIs with Clerk as it is with Clerk's drop-in prebuilt components. Clerk Elements handles the underlying business logic for you and provides a curated library of components without sacrificing on best practices or features.
- **Unstyled, with a little bit of magic** - Use the web platform and best-in-class components for building great authentication flows. Baked-in to the components are little bits of magic, like the fully accessible segmented one-time-passcode (OTP) input, and instant password validation during sign up.
- **Unstyled, with a little bit of magic** - Use the web platform and best-in-class components for building great authentication flows. Baked-in to the components are little bits of magic, like the fully accessible segmented one-time-passcode ([OTP](!otp)) input, and instant password validation during sign up.

### Integrate Clerk Elements into your workflow

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -344,7 +344,7 @@ The following data attributes are also added to the underlying element:

### `<Input type="otp">`

A special type used to render an input that accepts a one-time passcode (OTP). If the corresponding `<Field>` has `name="code"`, the child `<Input>` will default to the `otp` type. Only numbers are accepted as inputs, and the default max length is 6.
A special type used to render an input that accepts a one-time passcode ([OTP](!otp)). If the corresponding `<Field>` has `name="code"`, the child `<Input>` will default to the `otp` type. Only numbers are accepted as inputs, and the default max length is 6.

By default, a single text `<input />` will be rendered. If provided, the `render` prop will be called for each character present in the input. This enables UI patterns where an OTP input is visually represented as N distinct elements.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ Then skip to the [Email link verification](#email-link-verification) section.
emailAddress?.prepareVerification({ strategy: 'email_code' })

// Set to true to display second form
// and capture the OTP code
// and capture the code
setIsVerifying(true)
} catch (err) {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down Expand Up @@ -120,7 +120,7 @@ Then skip to the [Email link verification](#email-link-verification) section.
)
}

// Display the verification form to capture the OTP code
// Display the verification form to capture the code
if (isVerifying) {
return (
<>
Expand Down Expand Up @@ -217,7 +217,7 @@ Then skip to the [Email link verification](#email-link-verification) section.
.prepareVerification(strategy: .emailCode)

// Set to true to display second form
// and capture the OTP code
// and capture the code
isVerifying = true
} catch {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ To use phone number verification, you first need to enable it for your applicati
phoneNumber?.prepareVerification()

// Set to true to display second form
// and capture the OTP code
// and capture the code
setIsVerifying(true)
} catch (err) {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down Expand Up @@ -111,7 +111,7 @@ To use phone number verification, you first need to enable it for your applicati
)
}

// Display the verification form to capture the OTP code
// Display the verification form to capture the code
if (isVerifying) {
return (
<>
Expand Down Expand Up @@ -208,7 +208,7 @@ To use phone number verification, you first need to enable it for your applicati
.prepareVerification()

// Set to true to display second form
// and capture the OTP code
// and capture the code
isVerifying = true
} catch {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,7 @@ One of the options that Clerk supports for MFA is **SMS verification codes**. Th
phoneNumber?.prepareVerification()

// Set to true to display second form
// and capture the OTP code
// and capture the code
setIsVerifying(true)
} catch (err) {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ This guide will walk you through how to build a custom email/password sign-up an
})

// Set 'verifying' true to display second form
// and capture the OTP code
// and capture the code
setVerifying(true)
} catch (err: any) {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down Expand Up @@ -117,7 +117,7 @@ This guide will walk you through how to build a custom email/password sign-up an
}
}

// Display the verification form to capture the OTP code
// Display the verification form to capture the code
if (verifying) {
return (
<>
Expand Down Expand Up @@ -324,7 +324,7 @@ This guide will walk you through how to build a custom email/password sign-up an
await signUp.prepareEmailAddressVerification({ strategy: 'email_code' })

// Set 'pendingVerification' to true to display second form
// and capture OTP code
// and capture code
setPendingVerification(true)
} catch (err) {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down Expand Up @@ -431,7 +431,7 @@ This guide will walk you through how to build a custom email/password sign-up an

var body: some View {
if isVerifying {
// Display the verification form to capture the OTP code
// Display the verification form to capture the code
TextField("Enter your verification code", text: $code)
Button("Verify") {
Task { await verify(code: code) }
Expand All @@ -458,7 +458,7 @@ This guide will walk you through how to build a custom email/password sign-up an
try await signUp.prepareVerification(strategy: .emailCode)

// Set 'isVerifying' true to display second form
// and capture the OTP code
// and capture the code
isVerifying = true
} catch {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Learn how build a custom email or SMS one time code (OTP) authentic

<Include src="_partials/custom-flows-callout" />

Clerk supports passwordless authentication, which lets users sign in and sign up without having to remember a password. Instead, users receive a one-time password (OTP), also known as a one-time code, via email or SMS, which they can use to authenticate themselves.
Clerk supports passwordless authentication, which lets users sign in and sign up without having to remember a password. Instead, users receive a one-time password ([OTP](!otp)) via email or SMS, which they can use to authenticate themselves.

This guide will walk you through how to build a custom SMS OTP sign-up and sign-in flow. The process for using email OTP is similar, and the differences will be highlighted throughout.

Expand All @@ -14,14 +14,14 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-
<Steps>
## Enable SMS OTP

To use SMS OTP, you first need to enable it for your application.
To use SMS [OTP](!otp), you first need to enable it for your application.

1. In the Clerk Dashboard, navigate to the [**User & authentication**](https://dashboard.clerk.com/~/user-authentication/user-and-authentication) page.
1. Select the **Phone** tab and enable **Sign-up with phone** and **Sign-in with phone** and keep the default settings.

## Sign-up flow

To sign up a user using an OTP, you must:
To sign up a user using an [OTP](!otp), you must:

1. Initiate the sign-up process by collecting the user's identifier, which for this example is a phone number.
1. Prepare the verification, which sends a one-time code to the given identifier.
Expand Down Expand Up @@ -488,11 +488,11 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-
</Tab>
</Tabs>

To create a sign-up flow for email OTP, use the [`prepareEmailAddressVerification`](/docs/reference/javascript/sign-up#prepare-email-address-verification) and [`attemptEmailAddressVerification`](/docs/reference/javascript/sign-up#attempt-email-address-verification). These helpers work the same way as their phone number counterparts do in the previous example. You can find all available methods in the [`SignUp`](/docs/reference/javascript/sign-in) object documentation.
To create a sign-up flow for email [OTP](!otp), use the [`prepareEmailAddressVerification`](/docs/reference/javascript/sign-up#prepare-email-address-verification) and [`attemptEmailAddressVerification`](/docs/reference/javascript/sign-up#attempt-email-address-verification). These helpers work the same way as their phone number counterparts do in the previous example. You can find all available methods in the [`SignUp`](/docs/reference/javascript/sign-in) object documentation.

## Sign-in flow

To authenticate a user with an OTP, you must:
To authenticate a user with an [OTP](!otp), you must:

1. Initiate the sign-in process by creating a `SignIn` using the identifier provided, which for this example is a phone number.
1. Prepare the first factor verification.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function Page() {
})

// Set 'verifying' true to display second form
// and capture the OTP code
// and capture the code
setVerifying(true)
} catch (err: any) {
// See https://clerk.com/docs/guides/development/custom-flows/error-handling
Expand Down Expand Up @@ -107,7 +107,7 @@ export default function Page() {
}
}

// Display the verification form to capture the OTP code
// Display the verification form to capture the code
if (verifying) {
return (
<>
Expand Down
4 changes: 2 additions & 2 deletions docs/guides/development/custom-flows/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Before building custom authentication flows, read the following sections to get

The [`SignUp`](/docs/reference/javascript/sign-up) object is the pivotal concept in the sign-up process. It is used to gather the user's information, verify their email address or phone number, add OAuth accounts, and finally, convert them into a [`User`](/docs/reference/javascript/user).

Every `SignUp` must meet specific requirements before being converted into a `User`. These requirements are defined by the instance settings you selected in the [Clerk Dashboard](https://dashboard.clerk.com/). For example, on the [**User & authentication**](https://dashboard.clerk.com/~/user-authentication/user-and-authentication) page, you can [configure email and password, email links, or SMS OTP as authentication strategies](/docs/guides/configure/auth-strategies/sign-up-sign-in-options).
Every `SignUp` must meet specific requirements before being converted into a `User`. These requirements are defined by the instance settings you selected in the [Clerk Dashboard](https://dashboard.clerk.com/). For example, on the [**User & authentication**](https://dashboard.clerk.com/~/user-authentication/user-and-authentication) page, you can [configure email and password, email links, or SMS codes as authentication strategies](/docs/guides/configure/auth-strategies/sign-up-sign-in-options).

Once all requirements are met, the `SignUp` will turn into a new `User`, and an active session for that `User` will be created on the current [`Client`](/docs/reference/javascript/client).

Expand Down Expand Up @@ -83,7 +83,7 @@ Sign-ins are initiated by creating a `SignIn` object on the current `Client`. If
The following steps outline the sign-in process:

1. Initiate the sign-in process by collecting the user's authentication information and passing the appropriate parameters to the [`create()`](/docs/reference/javascript/sign-in#create) method.
1. Prepare the first factor verification. Users must complete a first factor verification to prove their identity. This can be something like providing a password, an email link, a one-time code (OTP), a Web3 wallet address, or providing proof of their identity through an external social account (SSO/OAuth).
1. Prepare the first factor verification. Users must complete a first factor verification to prove their identity. This can be something like providing a password, an email link, a one-time password ([OTP](!otp)), a Web3 wallet address, or providing proof of their identity through an external social account (SSO/OAuth).
1. Attempt to complete the first factor verification.
1. Optionally, if you have enabled [multi-factor](/docs/guides/configure/auth-strategies/sign-up-sign-in-options) for your application, you will need to prepare the second factor verification for users who have set up 2FA for their account.
1. Attempt to complete the second factor verification.
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/development/testing/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Testing is an important part of every application. Each framework may require a

## Test with one time passcodes

To avoid sending an email or SMS message with a one time passcode (OTP) during testing, you can use a fake email address or phone number that has a fixed code. Read the complete documentation [here](/docs/guides/development/testing/test-emails-and-phones).
To avoid sending an email or SMS message with a one-time password ([OTP](!otp)) during testing, you can use a fake email address or phone number that has a fixed code. Read the complete documentation [here](/docs/guides/development/testing/test-emails-and-phones).

## Get a valid session token

Expand Down
4 changes: 2 additions & 2 deletions docs/guides/development/testing/test-emails-and-phones.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ title: Test emails and phones
description: Write end to end tests by simulating OTP verifications.
---

Most of Clerk's sign-in and sign-up flows involve verifying ownership of an email address or phone number via a [one time passcode (OTP)](/docs/guides/development/custom-flows/authentication/email-sms-otp). To confirm that your integration works correctly, you can simulate verification flows without sending an email or SMS, by using reserved values in test mode.
Most of Clerk's sign-in and sign-up flows involve verifying ownership of an email address or phone number via a [one-time password (OTP)](/docs/guides/development/custom-flows/authentication/email-sms-otp). To confirm that your integration works correctly, you can simulate verification flows without sending an email or SMS, by using reserved values in test mode.

Verification messages are used during sign-up, sign-in, and when adding an email address or phone number to an existing account.

## Limitations

If Clerk is used to deliver SMS messages and/or emails for your development instance, a maximum of 20 SMS messages and 100 emails can be delivered per calendar month.

After that, requests resulting in OTP SMS messages and/or emails will be rejected. Other SMS or email notifications will still produce a webhook but won't be sent to the target address.
After that, requests resulting in SMS and/or email [OTPs](!otp) will be rejected. Other SMS or email notifications will still produce a webhook but won't be sent to the target address.

The following cases do not count toward the limit:

Expand Down
Loading