-
Notifications
You must be signed in to change notification settings - Fork 343
feat(clerk-js): Introduce WhatsApp
as an alternative phone code provider
#5894
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
feat(clerk-js): Introduce WhatsApp
as an alternative phone code provider
#5894
Conversation
🦋 Changeset detectedLatest commit: c16a0d1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
!snapshot |
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.34-snapshot.v20250509153647 --save-exact
npm i @clerk/astro@2.7.2-snapshot.v20250509153647 --save-exact
npm i @clerk/backend@1.31.5-snapshot.v20250509153647 --save-exact
npm i @clerk/chrome-extension@2.4.3-snapshot.v20250509153647 --save-exact
npm i @clerk/clerk-js@5.65.0-snapshot.v20250509153647 --save-exact
npm i @clerk/elements@0.23.25-snapshot.v20250509153647 --save-exact
npm i @clerk/clerk-expo@2.11.3-snapshot.v20250509153647 --save-exact
npm i @clerk/expo-passkeys@0.3.2-snapshot.v20250509153647 --save-exact
npm i @clerk/express@1.4.17-snapshot.v20250509153647 --save-exact
npm i @clerk/fastify@2.2.17-snapshot.v20250509153647 --save-exact
npm i @clerk/localizations@3.15.2-snapshot.v20250509153647 --save-exact
npm i @clerk/nextjs@6.19.2-snapshot.v20250509153647 --save-exact
npm i @clerk/nuxt@1.6.3-snapshot.v20250509153647 --save-exact
npm i @clerk/clerk-react@5.31.2-snapshot.v20250509153647 --save-exact
npm i @clerk/react-router@1.4.2-snapshot.v20250509153647 --save-exact
npm i @clerk/remix@4.7.2-snapshot.v20250509153647 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250509153647 --save-exact
npm i @clerk/tanstack-react-start@0.15.2-snapshot.v20250509153647 --save-exact
npm i @clerk/testing@1.6.7-snapshot.v20250509153647 --save-exact
npm i @clerk/themes@2.2.43-snapshot.v20250509153647 --save-exact
npm i @clerk/types@4.58.0-snapshot.v20250509153647 --save-exact
npm i @clerk/vue@1.7.3-snapshot.v20250509153647 --save-exact |
!snapshot |
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.34-snapshot.v20250509155148 --save-exact
npm i @clerk/astro@2.7.2-snapshot.v20250509155148 --save-exact
npm i @clerk/backend@1.31.5-snapshot.v20250509155148 --save-exact
npm i @clerk/chrome-extension@2.4.3-snapshot.v20250509155148 --save-exact
npm i @clerk/clerk-js@5.65.0-snapshot.v20250509155148 --save-exact
npm i @clerk/elements@0.23.25-snapshot.v20250509155148 --save-exact
npm i @clerk/clerk-expo@2.11.3-snapshot.v20250509155148 --save-exact
npm i @clerk/expo-passkeys@0.3.2-snapshot.v20250509155148 --save-exact
npm i @clerk/express@1.4.17-snapshot.v20250509155148 --save-exact
npm i @clerk/fastify@2.2.17-snapshot.v20250509155148 --save-exact
npm i @clerk/localizations@3.15.2-snapshot.v20250509155148 --save-exact
npm i @clerk/nextjs@6.19.2-snapshot.v20250509155148 --save-exact
npm i @clerk/nuxt@1.6.3-snapshot.v20250509155148 --save-exact
npm i @clerk/clerk-react@5.31.2-snapshot.v20250509155148 --save-exact
npm i @clerk/react-router@1.4.2-snapshot.v20250509155148 --save-exact
npm i @clerk/remix@4.7.2-snapshot.v20250509155148 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250509155148 --save-exact
npm i @clerk/tanstack-react-start@0.15.2-snapshot.v20250509155148 --save-exact
npm i @clerk/testing@1.6.7-snapshot.v20250509155148 --save-exact
npm i @clerk/themes@2.2.43-snapshot.v20250509155148 --save-exact
npm i @clerk/types@4.58.0-snapshot.v20250509155148 --save-exact
npm i @clerk/vue@1.7.3-snapshot.v20250509155148 --save-exact |
!snapshot |
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.34-snapshot.v20250509181121 --save-exact
npm i @clerk/astro@2.7.2-snapshot.v20250509181121 --save-exact
npm i @clerk/backend@1.31.5-snapshot.v20250509181121 --save-exact
npm i @clerk/chrome-extension@2.4.3-snapshot.v20250509181121 --save-exact
npm i @clerk/clerk-js@5.65.0-snapshot.v20250509181121 --save-exact
npm i @clerk/elements@0.23.25-snapshot.v20250509181121 --save-exact
npm i @clerk/clerk-expo@2.11.3-snapshot.v20250509181121 --save-exact
npm i @clerk/expo-passkeys@0.3.2-snapshot.v20250509181121 --save-exact
npm i @clerk/express@1.4.17-snapshot.v20250509181121 --save-exact
npm i @clerk/fastify@2.2.17-snapshot.v20250509181121 --save-exact
npm i @clerk/localizations@3.15.2-snapshot.v20250509181121 --save-exact
npm i @clerk/nextjs@6.19.2-snapshot.v20250509181121 --save-exact
npm i @clerk/nuxt@1.6.3-snapshot.v20250509181121 --save-exact
npm i @clerk/clerk-react@5.31.2-snapshot.v20250509181121 --save-exact
npm i @clerk/react-router@1.4.2-snapshot.v20250509181121 --save-exact
npm i @clerk/remix@4.7.2-snapshot.v20250509181121 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250509181121 --save-exact
npm i @clerk/tanstack-react-start@0.15.2-snapshot.v20250509181121 --save-exact
npm i @clerk/testing@1.6.7-snapshot.v20250509181121 --save-exact
npm i @clerk/themes@2.2.43-snapshot.v20250509181121 --save-exact
npm i @clerk/types@4.58.0-snapshot.v20250509181121 --save-exact
npm i @clerk/vue@1.7.3-snapshot.v20250509181121 --save-exact |
!snapshot |
whatsapp
channel on #whatsapp
channel
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.34-snapshot.v20250509182302 --save-exact
npm i @clerk/astro@2.7.2-snapshot.v20250509182302 --save-exact
npm i @clerk/backend@1.31.5-snapshot.v20250509182302 --save-exact
npm i @clerk/chrome-extension@2.4.3-snapshot.v20250509182302 --save-exact
npm i @clerk/clerk-js@5.65.0-snapshot.v20250509182302 --save-exact
npm i @clerk/elements@0.23.25-snapshot.v20250509182302 --save-exact
npm i @clerk/clerk-expo@2.11.3-snapshot.v20250509182302 --save-exact
npm i @clerk/expo-passkeys@0.3.2-snapshot.v20250509182302 --save-exact
npm i @clerk/express@1.4.17-snapshot.v20250509182302 --save-exact
npm i @clerk/fastify@2.2.17-snapshot.v20250509182302 --save-exact
npm i @clerk/localizations@3.15.2-snapshot.v20250509182302 --save-exact
npm i @clerk/nextjs@6.19.2-snapshot.v20250509182302 --save-exact
npm i @clerk/nuxt@1.6.3-snapshot.v20250509182302 --save-exact
npm i @clerk/clerk-react@5.31.2-snapshot.v20250509182302 --save-exact
npm i @clerk/react-router@1.4.2-snapshot.v20250509182302 --save-exact
npm i @clerk/remix@4.7.2-snapshot.v20250509182302 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250509182302 --save-exact
npm i @clerk/tanstack-react-start@0.15.2-snapshot.v20250509182302 --save-exact
npm i @clerk/testing@1.6.7-snapshot.v20250509182302 --save-exact
npm i @clerk/themes@2.2.43-snapshot.v20250509182302 --save-exact
npm i @clerk/types@4.58.0-snapshot.v20250509182302 --save-exact
npm i @clerk/vue@1.7.3-snapshot.v20250509182302 --save-exact |
!snapshot |
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.34-snapshot.v20250509183318 --save-exact
npm i @clerk/astro@2.7.2-snapshot.v20250509183318 --save-exact
npm i @clerk/backend@1.31.5-snapshot.v20250509183318 --save-exact
npm i @clerk/chrome-extension@2.4.3-snapshot.v20250509183318 --save-exact
npm i @clerk/clerk-js@5.65.0-snapshot.v20250509183318 --save-exact
npm i @clerk/elements@0.23.25-snapshot.v20250509183318 --save-exact
npm i @clerk/clerk-expo@2.11.3-snapshot.v20250509183318 --save-exact
npm i @clerk/expo-passkeys@0.3.2-snapshot.v20250509183318 --save-exact
npm i @clerk/express@1.4.17-snapshot.v20250509183318 --save-exact
npm i @clerk/fastify@2.2.17-snapshot.v20250509183318 --save-exact
npm i @clerk/localizations@3.15.2-snapshot.v20250509183318 --save-exact
npm i @clerk/nextjs@6.19.2-snapshot.v20250509183318 --save-exact
npm i @clerk/nuxt@1.6.3-snapshot.v20250509183318 --save-exact
npm i @clerk/clerk-react@5.31.2-snapshot.v20250509183318 --save-exact
npm i @clerk/react-router@1.4.2-snapshot.v20250509183318 --save-exact
npm i @clerk/remix@4.7.2-snapshot.v20250509183318 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250509183318 --save-exact
npm i @clerk/tanstack-react-start@0.15.2-snapshot.v20250509183318 --save-exact
npm i @clerk/testing@1.6.7-snapshot.v20250509183318 --save-exact
npm i @clerk/themes@2.2.43-snapshot.v20250509183318 --save-exact
npm i @clerk/types@4.58.0-snapshot.v20250509183318 --save-exact
npm i @clerk/vue@1.7.3-snapshot.v20250509183318 --save-exact |
!snapshot |
!snapshot |
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.35-snapshot.v20250513121938 --save-exact
npm i @clerk/astro@2.7.3-snapshot.v20250513121938 --save-exact
npm i @clerk/backend@1.32.1-snapshot.v20250513121938 --save-exact
npm i @clerk/chrome-extension@2.4.4-snapshot.v20250513121938 --save-exact
npm i @clerk/clerk-js@5.66.0-snapshot.v20250513121938 --save-exact
npm i @clerk/elements@0.23.26-snapshot.v20250513121938 --save-exact
npm i @clerk/clerk-expo@2.11.4-snapshot.v20250513121938 --save-exact
npm i @clerk/expo-passkeys@0.3.3-snapshot.v20250513121938 --save-exact
npm i @clerk/express@1.4.18-snapshot.v20250513121938 --save-exact
npm i @clerk/fastify@2.2.18-snapshot.v20250513121938 --save-exact
npm i @clerk/localizations@3.15.3-snapshot.v20250513121938 --save-exact
npm i @clerk/nextjs@6.19.3-snapshot.v20250513121938 --save-exact
npm i @clerk/nuxt@1.6.4-snapshot.v20250513121938 --save-exact
npm i @clerk/clerk-react@5.31.3-snapshot.v20250513121938 --save-exact
npm i @clerk/react-router@1.4.3-snapshot.v20250513121938 --save-exact
npm i @clerk/remix@4.7.3-snapshot.v20250513121938 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250513121938 --save-exact
npm i @clerk/tanstack-react-start@0.15.3-snapshot.v20250513121938 --save-exact
npm i @clerk/testing@1.6.8-snapshot.v20250513121938 --save-exact
npm i @clerk/themes@2.2.44-snapshot.v20250513121938 --save-exact
npm i @clerk/types@4.58.1-snapshot.v20250513121938 --save-exact
npm i @clerk/vue@1.8.1-snapshot.v20250513121938 --save-exact |
!snapshot |
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.35-snapshot.v20250513133244 --save-exact
npm i @clerk/astro@2.7.3-snapshot.v20250513133244 --save-exact
npm i @clerk/backend@1.32.1-snapshot.v20250513133244 --save-exact
npm i @clerk/chrome-extension@2.4.4-snapshot.v20250513133244 --save-exact
npm i @clerk/clerk-js@5.66.0-snapshot.v20250513133244 --save-exact
npm i @clerk/elements@0.23.26-snapshot.v20250513133244 --save-exact
npm i @clerk/clerk-expo@2.11.4-snapshot.v20250513133244 --save-exact
npm i @clerk/expo-passkeys@0.3.3-snapshot.v20250513133244 --save-exact
npm i @clerk/express@1.4.18-snapshot.v20250513133244 --save-exact
npm i @clerk/fastify@2.2.18-snapshot.v20250513133244 --save-exact
npm i @clerk/localizations@3.15.3-snapshot.v20250513133244 --save-exact
npm i @clerk/nextjs@6.19.3-snapshot.v20250513133244 --save-exact
npm i @clerk/nuxt@1.6.4-snapshot.v20250513133244 --save-exact
npm i @clerk/clerk-react@5.31.3-snapshot.v20250513133244 --save-exact
npm i @clerk/react-router@1.4.3-snapshot.v20250513133244 --save-exact
npm i @clerk/remix@4.7.3-snapshot.v20250513133244 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250513133244 --save-exact
npm i @clerk/tanstack-react-start@0.15.3-snapshot.v20250513133244 --save-exact
npm i @clerk/testing@1.6.8-snapshot.v20250513133244 --save-exact
npm i @clerk/themes@2.2.44-snapshot.v20250513133244 --save-exact
npm i @clerk/types@4.58.1-snapshot.v20250513133244 --save-exact
npm i @clerk/vue@1.8.1-snapshot.v20250513133244 --save-exact |
!snapshot |
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.35-snapshot.v20250513144207 --save-exact
npm i @clerk/astro@2.7.3-snapshot.v20250513144207 --save-exact
npm i @clerk/backend@1.32.1-snapshot.v20250513144207 --save-exact
npm i @clerk/chrome-extension@2.4.4-snapshot.v20250513144207 --save-exact
npm i @clerk/clerk-js@5.66.0-snapshot.v20250513144207 --save-exact
npm i @clerk/elements@0.23.26-snapshot.v20250513144207 --save-exact
npm i @clerk/clerk-expo@2.11.4-snapshot.v20250513144207 --save-exact
npm i @clerk/expo-passkeys@0.3.3-snapshot.v20250513144207 --save-exact
npm i @clerk/express@1.4.18-snapshot.v20250513144207 --save-exact
npm i @clerk/fastify@2.2.18-snapshot.v20250513144207 --save-exact
npm i @clerk/localizations@3.15.3-snapshot.v20250513144207 --save-exact
npm i @clerk/nextjs@6.19.3-snapshot.v20250513144207 --save-exact
npm i @clerk/nuxt@1.6.4-snapshot.v20250513144207 --save-exact
npm i @clerk/clerk-react@5.31.3-snapshot.v20250513144207 --save-exact
npm i @clerk/react-router@1.4.3-snapshot.v20250513144207 --save-exact
npm i @clerk/remix@4.7.3-snapshot.v20250513144207 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250513144207 --save-exact
npm i @clerk/tanstack-react-start@0.15.3-snapshot.v20250513144207 --save-exact
npm i @clerk/testing@1.6.8-snapshot.v20250513144207 --save-exact
npm i @clerk/themes@2.2.44-snapshot.v20250513144207 --save-exact
npm i @clerk/types@4.58.1-snapshot.v20250513144207 --save-exact
npm i @clerk/vue@1.8.1-snapshot.v20250513144207 --save-exact |
…nnel-on-sign-up-flow
) : ( | ||
<#AlternativePhoneCodePhoneNumberCard | ||
handleSubmit={handleAlternativePhoneCodeSubmit} | ||
fields={fields} | ||
formState={formState} | ||
onUseAnotherMethod={onAlternativePhoneCodeUseAnotherMethod} | ||
phoneCodeProvider={alternativePhoneCodeProvider} | ||
/> | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the only thing that is actually added on JSX, the rest above is just indentation changes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🔥
) : ( | ||
<SignInAlternativePhoneCodePhoneNumberCard | ||
handleSubmit={handleFirstPartySubmit} | ||
phoneNumberFormState={phoneIdentifierField} | ||
onUseAnotherMethod={onAlternativePhoneCodeUseAnotherMethod} | ||
phoneCodeProvider={alternativePhoneCodeProvider} | ||
/> | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the only thing that is actually added on JSX, the rest above is just indentation changes.
!snapshot |
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.35-snapshot.v20250514114401 --save-exact
npm i @clerk/astro@2.7.3-snapshot.v20250514114401 --save-exact
npm i @clerk/backend@1.32.1-snapshot.v20250514114401 --save-exact
npm i @clerk/chrome-extension@2.4.4-snapshot.v20250514114401 --save-exact
npm i @clerk/clerk-js@5.66.0-snapshot.v20250514114401 --save-exact
npm i @clerk/elements@0.23.26-snapshot.v20250514114401 --save-exact
npm i @clerk/clerk-expo@2.11.4-snapshot.v20250514114401 --save-exact
npm i @clerk/expo-passkeys@0.3.3-snapshot.v20250514114401 --save-exact
npm i @clerk/express@1.4.18-snapshot.v20250514114401 --save-exact
npm i @clerk/fastify@2.2.18-snapshot.v20250514114401 --save-exact
npm i @clerk/localizations@3.15.3-snapshot.v20250514114401 --save-exact
npm i @clerk/nextjs@6.19.3-snapshot.v20250514114401 --save-exact
npm i @clerk/nuxt@1.6.4-snapshot.v20250514114401 --save-exact
npm i @clerk/clerk-react@5.31.3-snapshot.v20250514114401 --save-exact
npm i @clerk/react-router@1.4.3-snapshot.v20250514114401 --save-exact
npm i @clerk/remix@4.7.3-snapshot.v20250514114401 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250514114401 --save-exact
npm i @clerk/tanstack-react-start@0.15.3-snapshot.v20250514114401 --save-exact
npm i @clerk/testing@1.7.0-snapshot.v20250514114401 --save-exact
npm i @clerk/themes@2.2.44-snapshot.v20250514114401 --save-exact
npm i @clerk/types@4.58.1-snapshot.v20250514114401 --save-exact
npm i @clerk/vue@1.8.1-snapshot.v20250514114401 --save-exact |
…n alternative phone code provider
!snapshot |
Hey @anagstef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.35-snapshot.v20250514120037 --save-exact
npm i @clerk/astro@2.7.3-snapshot.v20250514120037 --save-exact
npm i @clerk/backend@1.32.1-snapshot.v20250514120037 --save-exact
npm i @clerk/chrome-extension@2.4.4-snapshot.v20250514120037 --save-exact
npm i @clerk/clerk-js@5.66.0-snapshot.v20250514120037 --save-exact
npm i @clerk/elements@0.23.26-snapshot.v20250514120037 --save-exact
npm i @clerk/clerk-expo@2.11.4-snapshot.v20250514120037 --save-exact
npm i @clerk/expo-passkeys@0.3.3-snapshot.v20250514120037 --save-exact
npm i @clerk/express@1.4.18-snapshot.v20250514120037 --save-exact
npm i @clerk/fastify@2.2.18-snapshot.v20250514120037 --save-exact
npm i @clerk/localizations@3.15.3-snapshot.v20250514120037 --save-exact
npm i @clerk/nextjs@6.19.3-snapshot.v20250514120037 --save-exact
npm i @clerk/nuxt@1.6.4-snapshot.v20250514120037 --save-exact
npm i @clerk/clerk-react@5.31.3-snapshot.v20250514120037 --save-exact
npm i @clerk/react-router@1.4.3-snapshot.v20250514120037 --save-exact
npm i @clerk/remix@4.7.3-snapshot.v20250514120037 --save-exact
npm i @clerk/shared@3.9.0-snapshot.v20250514120037 --save-exact
npm i @clerk/tanstack-react-start@0.15.3-snapshot.v20250514120037 --save-exact
npm i @clerk/testing@1.7.0-snapshot.v20250514120037 --save-exact
npm i @clerk/themes@2.2.44-snapshot.v20250514120037 --save-exact
npm i @clerk/types@4.58.1-snapshot.v20250514120037 --save-exact
npm i @clerk/vue@1.8.1-snapshot.v20250514120037 --save-exact |
Description
This PR adds the ability to support third party providers for the phone code delivery. It currently adds support for WhatsApp, but could be extended in the future.
In this PR a new property is introduced, named
channel
, which accompanies thephone_code
strategy in order to determine the phone code provider. It can have 2 possible values for now,sms
andwhatsapp
. If omitted, thensms
is used as a default.The whole functionality is currently behind a feature flag on FAPI.
Some key features of this PR:
phone_code
strategy, together with thechannel
property, in order for the FAPI to create a new Verification, before we initiate theprepareVerification
on the frontend.Example screenshots
#
Start screen:



After clicking the WhatsApp button:
On entering the OTP:
#
Start screen:



After clicking the WhatsApp button:
On entering the OTP:
Checklist
pnpm test
runs as expected.pnpm build
runs as expected.Type of change