Merge pull request #13446 from supabase/j0/add_whatsapp_auth

docs: add docs on how to use WhatsApp Auth with Twilio

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)
+
+<Admonition type="caution">
+The message template submitted to Twilio must exactly match the SMS Body entered on the Supabase dashboard.
+</Admonition>
+
+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)

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",

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'