diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index be9da960411..11bca2d9bac 100644 --- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx +++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx @@ -1,5 +1,4 @@ import Layout from '~/layouts/DefaultGuideLayout' - export const meta = { id: 'auth-twilio', title: 'Phone Auth with Twilio', @@ -295,6 +294,56 @@ and the response should also be the same as above: The user does not have a password therefore will need to sign in via this method each time they want to access your service. +## WhatsApp OTP Logins + +In some cases, you may wish to use WhatsApp as a delivery channel instead. Here are some examples our users have cited: + +- You want higher deliverability +- You wish for a secure channel +- Your users mostly use WhatsApp as a messaging platform + +To make use of WhatsApp OTP, please complete the following steps: + +- Go through the [Twilio self sign up guide for WhatsApp](https://www.twilio.com/docs/whatsapp/self-sign-up) +- Submit a template via the [Twilio Guide For Submitting WhatsApp templates](https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#creating-message-templates-and-submitting-them-for-approval) + + +The message template submitted to Twilio must exactly match the SMS Body entered on the Supabase dashboard. + + +The sign in process with WhatsApp is similar to the sign in process for SMS. Do note the additional `whatsapp` parameter added: + +```js +const {data, error } = await supabase.auth.signInWithOtp({ + phone: '+57336567365', + options: { + channel:'whatsapp' + } + }) +``` + +You can also sign up with `whatsapp` as a channel: + +```js +const {data, error }= await supabase.auth.signUp({ + phone: '+57336567365', + password: 'testsupabasenow', + options: { + channel:'whatsapp', + } +}) +``` + +There is no change in the verification process, you should continue to use the `sms` type for verification +```js +// After receiving a WhatsApp OTP +let { data, error } = await supabase.auth.verifyOtp({ + phone: '+57336567365', + token: '123456', + type: 'sms', +}) +``` + ## Resources - [Twilio Signup](https://www.twilio.com/try-twilio) diff --git a/spec/common-client-libs-sections.json b/spec/common-client-libs-sections.json index 492e6e5f966..dd45af3fbae 100644 --- a/spec/common-client-libs-sections.json +++ b/spec/common-client-libs-sections.json @@ -425,6 +425,13 @@ "product": "auth", "type": "function" }, + { + "id": "sign-in-with-whatsapp-otp", + "title": "Sign in a user through WhatsApp", + "slug": "auth-signinwithwhatsappotp", + "product": "auth", + "type": "function" + }, { "id": "sign-out", "title": "Sign out a user", diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index 86e02171ba8..756981f630e 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -234,6 +234,7 @@ functions: - The magic link's destination URL is determined by the [`SITE_URL`](/docs/reference/auth/config#site_url). - See [redirect URLs and wildcards](/docs/guides/auth#redirect-urls-and-wildcards) to add additional redirect URLs to your project. - Magic links and OTPs share the same implementation. To send users a one-time code instead of a magic link, [modify the magic link email template](https://app.supabase.com/project/_/auth/templates) to include `{{ .Token }}` instead of `{{ .ConfirmationURL }}`. + - See our [Twilio Phone Auth Guide](/docs/guides/auth/phone-login/twilio) for details about configuring WhatsApp sign in. examples: - id: sign-in-with-email name: Sign in with email @@ -258,6 +259,19 @@ functions: phone: '+13334445555', }) ``` + - id: sign-in-with-whatsapp-otp + name: Sign in with WhatsApp OTP + isSpotlight: false + description: The user will be sent a WhatsApp message which contains a OTP. By default, a given user can only request a OTP once every 60 seconds. Note that a user will need to have a valid WhatsApp account that is linked to Twilio in order to use this feature. + code: | + ```js + const { data, error } = await supabase.auth.signInWithOtp({ + phone: '+13334445555', + options: { + channel:'whatsapp', + } + }) + ``` - id: sign-in-with-oauth title: 'signInWithOAuth()' $ref: '@supabase/gotrue-js.GoTrueClient.signInWithOAuth'