chore: amend docs to include info about custom templates

• also some prettier formatting

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"
 }
 ```