Skip to content

Commit

Permalink
updates to those two guides
Browse files Browse the repository at this point in the history
  • Loading branch information
alexisintech committed Sep 16, 2024
1 parent 1bf314a commit a171457
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 11 deletions.
3 changes: 1 addition & 2 deletions docs/custom-flows/email-password.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -594,8 +594,7 @@ This guide will walk you through how to build a custom email/password sign-up an

To authenticate a user using their email and password, you must:

1. Initiate the sign-in process by collecting the user's email address and password.
1. Create a `SignIn` using the email address and password provided.
1. Initiate the sign-in process by creating a `SignIn` using the email address and password provided.
1. If the attempt is successful, set the newly created session as the active session.

<Tabs items={["Next.js", "JavaScript", "Expo", "iOS (Beta)"]}>
Expand Down
19 changes: 10 additions & 9 deletions docs/custom-flows/email-sms-otp.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-

To use SMS OTP as an authentication strategy, you first need to enable it in the Clerk Dashboard.

1. Navigate to the Clerk Dashboard.
1. Go to **User & Authentication > [Email, Phone, Username](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username)** in the sidebar menu.
1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username).
1. In the navigation sidebar, go to **User & Authentication > Email, Phone, Username**.
1. Ensure that _only_ **Phone number** is required. If **Email address** or **Username** are enabled, ensure they are not required. Use the settings cog icon to check if a setting is required or optional. If you would like to require **Username**, you must collect the username and pass it to the `create()` method in your custom flow. For this guide, if you would like to use email OTP instead, require the **Email address** option instead of the **Phone number** option.
1. In the **Authentication strategies** section of this page, ensure **SMS verification code** is enabled. Ensure **Password** is toggled off, as you are prioritizing passwordless, SMS OTP-only authentication in this guide. If you would like to use email OTP instead, enable the **Email verification code** strategy instead of the **SMS verification code** strategy.

Expand All @@ -28,14 +28,14 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-

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.
1. Collect the one-time code and attempt to complete the verification with it.
1. Attempt to complete the verification with the code the user provides.
1. If the verification is successful, set the newly created session as the active session.

<Tabs type="framework" items={["Next.js", "JavaScript", "iOS (Beta)"]}>
<Tab>
This example is written for Next.js App Router but can be adapted to any React meta framework, such as Remix.

```tsx {{ filename: 'app/sign-up/page.tsx', collapsible: true }}
```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
'use client'

import * as React from 'react'
Expand Down Expand Up @@ -410,21 +410,22 @@ 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, you can use the [`prepareEmailAddressVerification`](/docs/references/javascript/sign-up/email-verification#prepare-email-address-verification) and [`attemptEmailAddressVerification`](/docs/references/javascript/sign-up/email-verification#attempt-email-address-verification). These helpers work the same way as their phone number counterparts do in the above example. You can find all available methods in the [`SignUp`](/docs/references/javascript/sign-in/sign-in) object documentation.
To create a sign-up flow for email OTP, use the [`prepareEmailAddressVerification`](/docs/references/javascript/sign-up/email-verification#prepare-email-address-verification) and [`attemptEmailAddressVerification`](/docs/references/javascript/sign-up/email-verification#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/references/javascript/sign-in/sign-in) object documentation.

### Sign-in flow

To authenticate a user with an OTP, you must:

1. Initiate the sign-in process by collecting the user's authentication identifier, which for this example is a phone number.
1. Create a `SignIn` using the identifier provided.
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.
1. Attempt verification with the code the user provides.
1. If the attempt is successful, set the newly created session as the active session.

<Tabs type="framework" items={["Next.js","JavaScript", "iOS (Beta)"]}>
<Tab>
This example is written for Next.js App Router but can be adapted to any React meta framework, such as Remix.

```tsx {{ filename: 'app/sign-in/page.tsx', collapsible: true }}
```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
'use client'

import * as React from 'react'
Expand Down Expand Up @@ -851,5 +852,5 @@ This guide will walk you through how to build a custom SMS OTP sign-up and sign-
</Tab>
</Tabs>

You can also achieve passwordless sign-ins with an 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 in the [`SignIn`](/docs/references/javascript/sign-in/sign-in) object documentation.
To create a sign-in flow for email OTP, pass the value `email_code` as the first factor strategy. You can find all available methods in the [`SignIn`](/docs/references/javascript/sign-in/sign-in) object documentation.
</Steps>

0 comments on commit a171457

Please sign in to comment.