diff --git a/web/docs/guides/auth/auth-twilio.mdx b/web/docs/guides/auth/auth-twilio.mdx index 0e16c0ed95d..172473afd60 100644 --- a/web/docs/guides/auth/auth-twilio.mdx +++ b/web/docs/guides/auth/auth-twilio.mdx @@ -5,23 +5,26 @@ description: How to set up and use Mobile OTP with Twilio and Supabase. --- import ExtensionsComponent from '../../../../web/src/components/Extensions' -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' ## Overview In this guide we'll show you how to authenticate your users with SMS based OTP (One-Time Password) tokens. There are two reasons to use Supabase SMS OTP tokens: + - You want users to log in with mobile + password, and the mobile should be verified via SMS - You want users to log in with mobile 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: + - A twilio account (sign up here: https://www.twilio.com/try-twilio) - A Supabase project (create one here: https://app.supabase.io) - A mobile phone capable of receiving SMS @@ -60,6 +63,7 @@ When you're back on the https://www.twilio.com/console screen, you need to scrol ![Successful phone number](/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 @@ -80,6 +84,13 @@ Note: for "Twilio Message Service SID" you can use the Sender Phone Number gener Now the backend should be setup, we can proceed to adding 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.io/project/YOUR-PROJECT-REF/auth/templates). + +Use the variable `.Code` in the template to display the code. ### Using OTP with password based logins @@ -98,7 +109,7 @@ values={[ ```js let { user, error } = await supabase.auth.signUp({ phone: '+13334445555', - password: 'some-password' + password: 'some-password', }) ``` @@ -133,7 +144,7 @@ values={[ ```js let { session, error } = await supabase.auth.verifyOTP({ phone: '+13334445555', - token: '123456' + token: '123456', }) ``` @@ -158,10 +169,10 @@ If successful the user will now be logged in and you should receive a valid sess ```json { - access_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM', - token_type: 'bearer', - expires_in: 3600, - refresh_token: 'LSp8LglPPvf0DxGMSj-vaQ' + "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM", + "token_type": "bearer", + "expires_in": 3600, + "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ" } ``` @@ -180,7 +191,7 @@ values={[ ```js let { user, error } = await supabase.auth.signIn({ phone: '+13334445555', - password: 'some-password' + password: 'some-password', }) ``` @@ -216,7 +227,7 @@ values={[ ```js let { user, error } = await supabase.auth.signIn({ - phone: '+13334445555' + phone: '+13334445555', }) ``` @@ -248,7 +259,7 @@ values={[ ```js let { session, error } = await supabase.auth.verifyOTP({ phone: '+13334445555', - token: '123456' + token: '123456', }) ``` @@ -273,10 +284,10 @@ 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' + "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM", + "token_type": "bearer", + "expires_in": 3600, + "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ" } ```