From 9f2a7c261dc8955802cc922372e12212f623c2cd Mon Sep 17 00:00:00 2001 From: "joel@joellee.org" Date: Wed, 5 Apr 2023 14:15:38 +0800 Subject: [PATCH 01/10] initial commit --- .../Navigation/Navigation.constants.ts | 5 + .../NavigationMenu.constants.ts | 6 + .../auth/phone-login/twilio-whatsapp.mdx | 295 ++++++++++++++++++ 3 files changed, 306 insertions(+) create mode 100644 apps/docs/pages/guides/auth/phone-login/twilio-whatsapp.mdx diff --git a/apps/docs/components/Navigation/Navigation.constants.ts b/apps/docs/components/Navigation/Navigation.constants.ts index f3b9ee85430..e95b83f8afc 100644 --- a/apps/docs/components/Navigation/Navigation.constants.ts +++ b/apps/docs/components/Navigation/Navigation.constants.ts @@ -111,6 +111,11 @@ export const menuItems: NavMenu = { url: '/guides/auth/auth-messagebird', items: [], }, + { + name: 'WhatsApp Auth with Twilio', + url: '/guides/auth/auth-twilio-whatsapp', + items: [], + }, ], }, { diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 7e3cb450cf5..06c714b0fef 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -249,6 +249,12 @@ export const PhoneLoginsItems = [ 'Vonage is a communication platform as a service (CPaaS) provider for consumers and businesses.', isDarkMode: true, }, + { + name: 'Twilio WhatsApp Login', + icon: '/docs/img/icons/twilio-icon', + url: '/guides/auth/phone-login/twilio-whatsapp', + linkDescription: 'Customer engagement platform used by hundreds of thousands of businesses.', + }, ] export const auth = { diff --git a/apps/docs/pages/guides/auth/phone-login/twilio-whatsapp.mdx b/apps/docs/pages/guides/auth/phone-login/twilio-whatsapp.mdx new file mode 100644 index 00000000000..89d6281007d --- /dev/null +++ b/apps/docs/pages/guides/auth/phone-login/twilio-whatsapp.mdx @@ -0,0 +1,295 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'auth-twilio-whatsapp', + title: 'WhatsApp Auth with Twilio', + description: 'How to set up and use WhatsApp OTP with Twilio and Supabase.', +} + +## Overview + +In this guide we'll show you how to authenticate your users with WhatsApp based One-Time Password (OTP) tokens. + +There are two reasons to use Supabase WhatsApp OTP tokens: + +- You want users to log in with mobile number + password, and the mobile number should be verified via SMS +- You want users to log in with mobile number ONLY (i.e. passwordless login) + +We'll cover: + +- [Finding your Twilio credentials](#finding-your-twilio-credentials) +- [Using OTP with password based logins](#using-otp-with-password-based-logins) +- [Using OTP as a passwordless sign-in mechanism](#using-otp-as-a-passwordless-sign-in-mechanism) + +What you'll need: + +- An upgraded Twilio account (sign up here: https://www.twilio.com/try-twilio) +- A Supabase project (create one here: https://app.supabase.com) +- A Meta Verified Business Account + +## Steps + +### Finding your Twilio credentials + +Start by logging into your Twilio account and starting a new project: https://www.twilio.com/console/projects/create + +Give your project a name and verify the mobile number you'll be using to test with. This is the number that will be receiving the SMS OTPs. + +![Name your twilio project](/docs/img/guides/auth-twilio/1.png) +![verify your own phone number](/docs/img/guides/auth-twilio/2.png) + +Select 'SMS', 'Identity & Verification', and 'With code' as options on the welcome form. + +![Form Fields](/docs/img/guides/auth-twilio/3.png) + +When you're back on the [Twilio console screen](https://www.twilio.com/console), you need to scroll down and click 'Get a trial phone number' - this is the number that you'll be sending SMSs from. + +![Get a trial phone number](/docs/img/guides/auth-twilio/4.png) + +![Successful phone number](/docs/img/guides/auth-twilio/5.png) + +You should now be able to see all three values you'll need to get started: + +- Account SID +- Auth Token +- Sender Phone Number + +![All the credentials you'll need](/docs/img/guides/auth-twilio/6.png) + +Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings). + +You should see an option to enable Phone Signup: + +![Enable Phone Sign-Up](/docs/img/guides/auth-twilio/7.png) + +Toggle it on, and copy the 3 values over from the twilio dashboard. Click save. + +Note: for "Twilio Message Service SID" you can use the Sender Phone Number generated above. + +![Plug in Twilio credentials](/docs/img/guides/auth-twilio/8.png) + +Now the backend should be setup, we can proceed to add our client-side code! + +#### SMS custom template + +The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address. + +Go to Auth > Templates page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates). + +Use the variable `.Code` in the template to display the OTP code. Here's an example in the SMS template. + +![example in the SMS template](/docs/img/guides/auth-twilio/9.png) + +### Using OTP with password based logins + +In this scenario we'll be using the user's mobile phone number and a corresponding password as an alternative to signing up with an email address. Note: please thoroughly consider potential security implications when signing up with a combination of phone number and password. Phone numbers are sometimes recycled by phone networks when users cancel their phone contracts or move countries, thereby granting access to the user's account to the subsequent owner of the phone number. In the near future Supabase will support multifactor authentication, which will mitigate this risk, but for now you may want to consider allowing your users to recover their account by some other means in an emergency. + +Using supabase-js on the client you'll want to use the same `signUp` method that you'd use for email based sign ups, but with the `phone` param instead of the `email param`: + + + + +```js +let { user, error } = await supabase.auth.signUp({ + phone: '+13334445555', + password: 'some-password', + +}) +``` + + + + +```bash +curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/signup' \ +-H "apikey: SUPABASE_KEY" \ +-H "Content-Type: application/json" \ +-d '{ + "phone": "+13334445555", + "password": "some-password" +}' +``` + + + + +The user will now receive an SMS with a 6-digit pin that you will need to receive from them within 60-seconds before they can login to their account. + +You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyOTP`: + + + + +```js +let { session, error } = await supabase.auth.verifyOtp({ + phone: '+13334445555', + token: '123456', + type: 'sms', +}) +``` + + + + +```bash +curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/verify' \ +-H "apikey: SUPABASE_KEY" \ +-H "Content-Type: application/json" \ +-d '{ + "type": "sms", + "phone": "+13334445555", + "token": "123456" +}' +``` + + + + +If successful the user will now be logged in and you should receive a valid session like: + +```json +{ + "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM", + "token_type": "bearer", + "expires_in": 3600, + "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ" +} +``` + +The access token can be sent in the Authorization header as a Bearer token for any CRUD operations on supabase-js. See our guide on [Row Level Security](/docs/guides/auth#row-level-security) for more info on restricting access on a user basis. + +Also now that the mobile has been verified, the user can use the number and password to sign in without needing to verify their number each time: + + + + +```js +let { user, error } = await supabase.auth.signInWithPassword({ + phone: '+13334445555', + password: 'some-password', +}) +``` + + + + +```bash +curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/token?grant_type=password' \ +-H "apikey: SUPABASE_KEY" \ +-H "Content-Type: application/json" \ +-d '{ + "phone": "+13334445555", + "password": "some-password" +}' +``` + + + + +### Using OTP as a passwordless sign-in mechanism + +In this scenario you are granting your user's the ability to login to their account without needing to set a password on their account, all they have to do to log in is verify their mobile each time using the OTP. + +In javascript we can use the `signIn` method with a single parameter: `phone` + + + + +```js +let { user, error } = await supabase.auth.signInWithOtp({ + phone: '+13334445555', +}) +``` + + + + +```bash +curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/otp' \ +-H "apikey: SUPABASE_KEY" \ +-H "Content-Type: application/json" \ +-d '{ + "phone": "+13334445555" +}' +``` + + + + +The second step is the same as the previous section, you need to collect the 6-digit pin from the user and pass it along with their phone number to the verify method: + + + + +```js +let { session, error } = await supabase.auth.verifyOtp({ + phone: '+13334445555', + token: '123456', + type: 'sms', +}) +``` + + + + +```bash +curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/verify' \ +-H "apikey: SUPABASE_KEY" \ +-H "Content-Type: application/json" \ +-d '{ + "type": "sms", + "phone": "+13334445555", + "token": "123456" +}' +``` + + + + +and the response should also be the same as above: + +```json +{ + "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM", + "token_type": "bearer", + "expires_in": 3600, + "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ" +} +``` + +The user does not have a password therefore will need to sign in via this method each time they want to access your service. + +## Resources + +- [Twilio Signup](https://www.twilio.com/try-twilio) +- [Supabase Dashboard](https://app.supabase.com) +- [Supabase Row Level Security](/docs/guides/auth#row-level-security) + +export const Page = ({ children }) => + +export default Page From bc0a98b3e42531ec99748c37510e2a84f7193647 Mon Sep 17 00:00:00 2001 From: "joel@joellee.org" Date: Wed, 5 Apr 2023 15:06:42 +0800 Subject: [PATCH 02/10] revert commit in favour of appending to existing document --- .../Navigation/Navigation.constants.ts | 5 - .../NavigationMenu.constants.ts | 6 - .../auth/phone-login/twilio-whatsapp.mdx | 295 ------------------ 3 files changed, 306 deletions(-) delete mode 100644 apps/docs/pages/guides/auth/phone-login/twilio-whatsapp.mdx diff --git a/apps/docs/components/Navigation/Navigation.constants.ts b/apps/docs/components/Navigation/Navigation.constants.ts index e95b83f8afc..f3b9ee85430 100644 --- a/apps/docs/components/Navigation/Navigation.constants.ts +++ b/apps/docs/components/Navigation/Navigation.constants.ts @@ -111,11 +111,6 @@ export const menuItems: NavMenu = { url: '/guides/auth/auth-messagebird', items: [], }, - { - name: 'WhatsApp Auth with Twilio', - url: '/guides/auth/auth-twilio-whatsapp', - items: [], - }, ], }, { diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 06c714b0fef..7e3cb450cf5 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -249,12 +249,6 @@ export const PhoneLoginsItems = [ 'Vonage is a communication platform as a service (CPaaS) provider for consumers and businesses.', isDarkMode: true, }, - { - name: 'Twilio WhatsApp Login', - icon: '/docs/img/icons/twilio-icon', - url: '/guides/auth/phone-login/twilio-whatsapp', - linkDescription: 'Customer engagement platform used by hundreds of thousands of businesses.', - }, ] export const auth = { diff --git a/apps/docs/pages/guides/auth/phone-login/twilio-whatsapp.mdx b/apps/docs/pages/guides/auth/phone-login/twilio-whatsapp.mdx deleted file mode 100644 index 89d6281007d..00000000000 --- a/apps/docs/pages/guides/auth/phone-login/twilio-whatsapp.mdx +++ /dev/null @@ -1,295 +0,0 @@ -import Layout from '~/layouts/DefaultGuideLayout' - -export const meta = { - id: 'auth-twilio-whatsapp', - title: 'WhatsApp Auth with Twilio', - description: 'How to set up and use WhatsApp OTP with Twilio and Supabase.', -} - -## Overview - -In this guide we'll show you how to authenticate your users with WhatsApp based One-Time Password (OTP) tokens. - -There are two reasons to use Supabase WhatsApp OTP tokens: - -- You want users to log in with mobile number + password, and the mobile number should be verified via SMS -- You want users to log in with mobile number ONLY (i.e. passwordless login) - -We'll cover: - -- [Finding your Twilio credentials](#finding-your-twilio-credentials) -- [Using OTP with password based logins](#using-otp-with-password-based-logins) -- [Using OTP as a passwordless sign-in mechanism](#using-otp-as-a-passwordless-sign-in-mechanism) - -What you'll need: - -- An upgraded Twilio account (sign up here: https://www.twilio.com/try-twilio) -- A Supabase project (create one here: https://app.supabase.com) -- A Meta Verified Business Account - -## Steps - -### Finding your Twilio credentials - -Start by logging into your Twilio account and starting a new project: https://www.twilio.com/console/projects/create - -Give your project a name and verify the mobile number you'll be using to test with. This is the number that will be receiving the SMS OTPs. - -![Name your twilio project](/docs/img/guides/auth-twilio/1.png) -![verify your own phone number](/docs/img/guides/auth-twilio/2.png) - -Select 'SMS', 'Identity & Verification', and 'With code' as options on the welcome form. - -![Form Fields](/docs/img/guides/auth-twilio/3.png) - -When you're back on the [Twilio console screen](https://www.twilio.com/console), you need to scroll down and click 'Get a trial phone number' - this is the number that you'll be sending SMSs from. - -![Get a trial phone number](/docs/img/guides/auth-twilio/4.png) - -![Successful phone number](/docs/img/guides/auth-twilio/5.png) - -You should now be able to see all three values you'll need to get started: - -- Account SID -- Auth Token -- Sender Phone Number - -![All the credentials you'll need](/docs/img/guides/auth-twilio/6.png) - -Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings). - -You should see an option to enable Phone Signup: - -![Enable Phone Sign-Up](/docs/img/guides/auth-twilio/7.png) - -Toggle it on, and copy the 3 values over from the twilio dashboard. Click save. - -Note: for "Twilio Message Service SID" you can use the Sender Phone Number generated above. - -![Plug in Twilio credentials](/docs/img/guides/auth-twilio/8.png) - -Now the backend should be setup, we can proceed to add our client-side code! - -#### SMS custom template - -The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address. - -Go to Auth > Templates page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates). - -Use the variable `.Code` in the template to display the OTP code. Here's an example in the SMS template. - -![example in the SMS template](/docs/img/guides/auth-twilio/9.png) - -### Using OTP with password based logins - -In this scenario we'll be using the user's mobile phone number and a corresponding password as an alternative to signing up with an email address. Note: please thoroughly consider potential security implications when signing up with a combination of phone number and password. Phone numbers are sometimes recycled by phone networks when users cancel their phone contracts or move countries, thereby granting access to the user's account to the subsequent owner of the phone number. In the near future Supabase will support multifactor authentication, which will mitigate this risk, but for now you may want to consider allowing your users to recover their account by some other means in an emergency. - -Using supabase-js on the client you'll want to use the same `signUp` method that you'd use for email based sign ups, but with the `phone` param instead of the `email param`: - - - - -```js -let { user, error } = await supabase.auth.signUp({ - phone: '+13334445555', - password: 'some-password', - -}) -``` - - - - -```bash -curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/signup' \ --H "apikey: SUPABASE_KEY" \ --H "Content-Type: application/json" \ --d '{ - "phone": "+13334445555", - "password": "some-password" -}' -``` - - - - -The user will now receive an SMS with a 6-digit pin that you will need to receive from them within 60-seconds before they can login to their account. - -You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyOTP`: - - - - -```js -let { session, error } = await supabase.auth.verifyOtp({ - phone: '+13334445555', - token: '123456', - type: 'sms', -}) -``` - - - - -```bash -curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/verify' \ --H "apikey: SUPABASE_KEY" \ --H "Content-Type: application/json" \ --d '{ - "type": "sms", - "phone": "+13334445555", - "token": "123456" -}' -``` - - - - -If successful the user will now be logged in and you should receive a valid session like: - -```json -{ - "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM", - "token_type": "bearer", - "expires_in": 3600, - "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ" -} -``` - -The access token can be sent in the Authorization header as a Bearer token for any CRUD operations on supabase-js. See our guide on [Row Level Security](/docs/guides/auth#row-level-security) for more info on restricting access on a user basis. - -Also now that the mobile has been verified, the user can use the number and password to sign in without needing to verify their number each time: - - - - -```js -let { user, error } = await supabase.auth.signInWithPassword({ - phone: '+13334445555', - password: 'some-password', -}) -``` - - - - -```bash -curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/token?grant_type=password' \ --H "apikey: SUPABASE_KEY" \ --H "Content-Type: application/json" \ --d '{ - "phone": "+13334445555", - "password": "some-password" -}' -``` - - - - -### Using OTP as a passwordless sign-in mechanism - -In this scenario you are granting your user's the ability to login to their account without needing to set a password on their account, all they have to do to log in is verify their mobile each time using the OTP. - -In javascript we can use the `signIn` method with a single parameter: `phone` - - - - -```js -let { user, error } = await supabase.auth.signInWithOtp({ - phone: '+13334445555', -}) -``` - - - - -```bash -curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/otp' \ --H "apikey: SUPABASE_KEY" \ --H "Content-Type: application/json" \ --d '{ - "phone": "+13334445555" -}' -``` - - - - -The second step is the same as the previous section, you need to collect the 6-digit pin from the user and pass it along with their phone number to the verify method: - - - - -```js -let { session, error } = await supabase.auth.verifyOtp({ - phone: '+13334445555', - token: '123456', - type: 'sms', -}) -``` - - - - -```bash -curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/verify' \ --H "apikey: SUPABASE_KEY" \ --H "Content-Type: application/json" \ --d '{ - "type": "sms", - "phone": "+13334445555", - "token": "123456" -}' -``` - - - - -and the response should also be the same as above: - -```json -{ - "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM", - "token_type": "bearer", - "expires_in": 3600, - "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ" -} -``` - -The user does not have a password therefore will need to sign in via this method each time they want to access your service. - -## Resources - -- [Twilio Signup](https://www.twilio.com/try-twilio) -- [Supabase Dashboard](https://app.supabase.com) -- [Supabase Row Level Security](/docs/guides/auth#row-level-security) - -export const Page = ({ children }) => - -export default Page From 63d79fdf3a3b2397a8bec1bdcaa09ea306e07154 Mon Sep 17 00:00:00 2001 From: "joel@joellee.org" Date: Wed, 5 Apr 2023 15:17:29 +0800 Subject: [PATCH 03/10] feat: add accordion --- .../pages/guides/auth/phone-login/twilio.mdx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index be9da960411..cd0d9083c02 100644 --- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx +++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx @@ -1,5 +1,5 @@ import Layout from '~/layouts/DefaultGuideLayout' - +import {Accordion} from 'ui' export const meta = { id: 'auth-twilio', title: 'Phone Auth with Twilio', @@ -294,6 +294,23 @@ 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. + + Test Question} + id={`faq--i`} + > + + + + + ## Resources From 419e0233f36ba6fdc5047a447facf61eedae9f88 Mon Sep 17 00:00:00 2001 From: "joel@joellee.org" Date: Wed, 5 Apr 2023 17:21:16 +0800 Subject: [PATCH 04/10] refactor: add initial section --- .../pages/guides/auth/phone-login/twilio.mdx | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index cd0d9083c02..b286ca3faab 100644 --- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx +++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx @@ -294,23 +294,13 @@ 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. - - Test Question} - id={`faq--i`} - > - - - - +## WhatsApp OTP Logins + +Pre-requisites: +- Please go through the Setting up a Whatsapp Verified Sender guide by Twilio +- Please [submit WhatsApp message templates to Twilio for verification](https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#creating-message-templates-and-submitting-them-for-approval) +We also support WhatsApp Logins ## Resources From 4f470c1865631342f5096f71c7cb75f0441c1b6e Mon Sep 17 00:00:00 2001 From: "joel@joellee.org" Date: Wed, 5 Apr 2023 18:57:19 +0800 Subject: [PATCH 05/10] fix: add the whatsapp otp method --- .../pages/guides/auth/phone-login/twilio.mdx | 35 +++++++++++++++++++ spec/common-client-libs-sections.json | 9 ++++- spec/supabase_js_v2.yml | 12 +++++++ 3 files changed, 55 insertions(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index b286ca3faab..3cb789e1793 100644 --- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx +++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx @@ -297,6 +297,41 @@ The user does not have a password therefore will need to sign in via this method ## 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 with end to end encryption +- Your users mostly use WhatsApp as a messaging platform + +To make use of WhatsApp OTP, please completed the following steps: + +- Upgrade Twilio account to a paid account +- Please 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). + +```js +let { user, error } = await supabase.auth.signInWithOtp({ + phone: '+13334445555', + channel: 'whatsapp', +}) +``` + +```js +// After receiving a SMS with a OTP. +const { data, error } = await supabase.auth.signInWithPassword({ + phone: '+13334445555', + channel: 'whatsapp' + password: 'testsupabasenow', +}) + +``` + + + +The message template submitted to Twilio must exactly match the message you enter on the Supabase dashboard. + + + Pre-requisites: - Please go through the Setting up a Whatsapp Verified Sender guide by Twilio - Please [submit WhatsApp message templates to Twilio for verification](https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#creating-message-templates-and-submitting-them-for-approval) diff --git a/spec/common-client-libs-sections.json b/spec/common-client-libs-sections.json index b77ac83e9f2..f88a1faddcf 100644 --- a/spec/common-client-libs-sections.json +++ b/spec/common-client-libs-sections.json @@ -422,6 +422,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", @@ -869,4 +876,4 @@ } ] } -] \ No newline at end of file +] diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index 3e63efe3756..99969942e9d 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -258,6 +258,18 @@ 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 Twilio linked WhatsApp account in order to use this feature. + code: | + ```js + const { data, error } = await supabase.auth.signInWithOtp({ + phone: '+13334445555', + channel: 'whatsapp' + }) + ``` - id: sign-in-with-oauth title: 'signInWithOAuth()' $ref: '@supabase/gotrue-js.GoTrueClient.signInWithOAuth' From 1548a40dd46a29fc20673c5f5baedd311bda02d7 Mon Sep 17 00:00:00 2001 From: "joel@joellee.org" Date: Fri, 7 Apr 2023 00:28:40 +0800 Subject: [PATCH 06/10] fix: update docs --- .../pages/guides/auth/phone-login/twilio.mdx | 56 +++++++++++-------- spec/supabase_js_v2.yml | 8 ++- 2 files changed, 37 insertions(+), 27 deletions(-) diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index 3cb789e1793..00459f99ca8 100644 --- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx +++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx @@ -300,42 +300,50 @@ The user does not have a password therefore will need to sign in via this method 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 with end to end encryption +- You wish for a secure channel - Your users mostly use WhatsApp as a messaging platform -To make use of WhatsApp OTP, please completed the following steps: +To make use of WhatsApp OTP, please complete the following steps: -- Upgrade Twilio account to a paid account -- Please 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). +- 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 up and sign in process with WhatsApp is similar to the process for SMS. The key difference +is that there is a `whatsapp` channel parameter under `options`: ```js -let { user, error } = await supabase.auth.signInWithOtp({ - phone: '+13334445555', - channel: 'whatsapp', -}) +const {data, error }= await supabase.auth.signInWithOtp({ + phone: '+57336567365', + options: { + channel:'whatsapp' + } + }) ``` ```js -// After receiving a SMS with a OTP. -const { data, error } = await supabase.auth.signInWithPassword({ - phone: '+13334445555', - channel: 'whatsapp' - password: 'testsupabasenow', +const {data, error }= await supabase.auth.signUp({ + phone: '+57336567365', + password: 'testsupabasenow', + options: { + channel:'whatsapp', + } }) ``` - - -The message template submitted to Twilio must exactly match the message you enter on the Supabase dashboard. - - - -Pre-requisites: -- Please go through the Setting up a Whatsapp Verified Sender guide by Twilio -- Please [submit WhatsApp message templates to Twilio for verification](https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#creating-message-templates-and-submitting-them-for-approval) -We also support WhatsApp Logins +There is no change in the verification process - do continue 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 diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index 99969942e9d..c68258c40e1 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 @@ -261,13 +262,14 @@ functions: - 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 Twilio linked WhatsApp account in order to use this feature. + 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', - channel: 'whatsapp' + options: { + channel:'whatsapp', + } }) ``` - id: sign-in-with-oauth From 65b834a67ffa7b0d375eed6202f39b55c30a3aa4 Mon Sep 17 00:00:00 2001 From: "joel@joellee.org" Date: Fri, 7 Apr 2023 00:31:24 +0800 Subject: [PATCH 07/10] refactor: remove signUp --- .../pages/guides/auth/phone-login/twilio.mdx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index 00459f99ca8..6e949e1ea1e 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' -import {Accordion} from 'ui' export const meta = { id: 'auth-twilio', title: 'Phone Auth with Twilio', @@ -312,11 +311,10 @@ To make use of WhatsApp OTP, please complete the following steps: The message template submitted to Twilio must exactly match the SMS Body entered on the Supabase dashboard. -The sign up and sign in process with WhatsApp is similar to the process for SMS. The key difference -is that there is a `whatsapp` channel parameter under `options`: +The sign in process with WhatsApp is similar to the process for SMS. Do note the additional `whatsapp` parameter added: ```js -const {data, error }= await supabase.auth.signInWithOtp({ +const {data, error } = await supabase.auth.signInWithOtp({ phone: '+57336567365', options: { channel:'whatsapp' @@ -324,17 +322,6 @@ const {data, error }= await supabase.auth.signInWithOtp({ }) ``` -```js -const {data, error }= await supabase.auth.signUp({ - phone: '+57336567365', - password: 'testsupabasenow', - options: { - channel:'whatsapp', - } -}) - -``` - There is no change in the verification process - do continue the `sms` type for verification ```js // After receiving a WhatsApp OTP From 200b9fa8ed2952556060863442416e8f88430a22 Mon Sep 17 00:00:00 2001 From: "joel@joellee.org" Date: Fri, 7 Apr 2023 00:32:59 +0800 Subject: [PATCH 08/10] fix: minor spelling --- apps/docs/pages/guides/auth/phone-login/twilio.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index 6e949e1ea1e..9f2b5c3da1e 100644 --- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx +++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx @@ -311,7 +311,7 @@ To make use of WhatsApp OTP, please complete the following steps: 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 process for SMS. Do note the additional `whatsapp` parameter added: +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({ @@ -322,7 +322,7 @@ const {data, error } = await supabase.auth.signInWithOtp({ }) ``` -There is no change in the verification process - do continue the `sms` type for verification +There is no change in the verification process - do continue to use the `sms` type for verification ```js // After receiving a WhatsApp OTP let { data, error } = await supabase.auth.verifyOtp({ From 01f661533bac36de7e30dd178f32ad3e89935e4e Mon Sep 17 00:00:00 2001 From: "joel@joellee.org" Date: Fri, 7 Apr 2023 00:54:36 +0800 Subject: [PATCH 09/10] fix: reinstate signup --- apps/docs/pages/guides/auth/phone-login/twilio.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index 9f2b5c3da1e..626b3aea042 100644 --- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx +++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx @@ -322,6 +322,18 @@ const {data, error } = await supabase.auth.signInWithOtp({ }) ``` +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 - do continue to use the `sms` type for verification ```js // After receiving a WhatsApp OTP From b5aa4921e90b8c20decbc371c664cea5e7797c13 Mon Sep 17 00:00:00 2001 From: Joel Lee Date: Fri, 7 Apr 2023 14:38:05 +0800 Subject: [PATCH 10/10] Update apps/docs/pages/guides/auth/phone-login/twilio.mdx Co-authored-by: Kang Ming --- apps/docs/pages/guides/auth/phone-login/twilio.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx index 626b3aea042..11bca2d9bac 100644 --- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx +++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx @@ -334,7 +334,7 @@ const {data, error }= await supabase.auth.signUp({ }) ``` -There is no change in the verification process - do continue to use the `sms` type for verification +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({