## Introduction SMS OTP (one-time password) is a feature that allows login to an account via SMS without having to use any username and password. This saves time as there is no need to retype the credentials again every time you log in. An OTP is usually used to verify existing users, by which means the user must send back the obtained verification code to the server before being allowed to enter the system. Due to stronger account protection, OTP is widely used in various systems such as e-commerce, m-banking, etc. That is, when we register or login to a system, we must enter the OTP code sent to our number. meme about SMS OTP

From the explanation above, you must think that it is very difficult to apply OTP to the system because we have to deal with providers and also have to understand how authentication works. even though we can outsmart it with the help of Supabase, which provides the ability to generate OTP, which will later be integrated with Twilio. ## SMS OTP Concept Knowing how SMS OTP works is necessary to comprehend what we will learn this time. Twilio Console

It can be seen that supabase is used to generate OTP, then twilio is assigned to send the OTP code to the destination number. After the user gets the OTP code, the user can send the OTP code for verification. ## Setup Twilio First of all, you need to sign up for a free trial account using this link. [Twilio | Try Twilio Free | www.twilio.com](https://www.twilio.com/try-twilio) We will be redirected to the console page to create a project after logging in. Twilio Console

You can type whatever you like for the project's name. Setup project name

To make sure we were really human, Twilio asked for a phone number confirmation. Verify phone number

Twilio will ask several questions regarding the type of project to be created. We can fill out the form as in the example below. Twilio questions

The next step is to create a virtual number that will be used to send OTP to users later on. Create virtual number

In the `Account Info` section, there are fields for SID, token, and phone number. This is what we will use later.

## Testing Twilio SMS with curl We can use curl to try to send SMS from the virtual number by replacing the `SID`, `body`, `from`, `to`, and `token` with your own. ```bash curl -X POST https://api.twilio.com/2010-04-01/Accounts/[YOUR_SID]/Messages.json \ --data-urlencode "Body=Hello from jagad.dev" \ --data-urlencode "From=[YOUR VIRTUAL NUMBER]" \ --data-urlencode "To=[YOUR NUMBER]" \ -u [YOUR_SID]:[YOUR_TWILIO_AUTH_TOKEN] ``` It can be seen that the SMS went to the destination number after the curl is executed. sms result

## Setup Supabase In this section, you need to register for Supabase, which will then be integrated with Twilio. You can register [here](https://supabase.com/) After that, go to the authentication section where we will find settings related to auth providers (phone provider).

In the phone provider section, we will be asked to enter the SMS provider, which we will fill in with Twilio along with the sid, token, and phone number of the Twilio that we created earlier. detail phone provider

We also need API keys, which will be used to access the database via URL. Supabase API key

## Login via OTP with Supabse We must install Supabase in order to log in using OTP. ```bash # npm npm install @supabase/supabase-js # or # yarn yarn add @supabase/supabase-js ``` After that, we configure the supabase by changing the url and key to the url and key from the Supabase that you have. ```js const { createClient } = require("@supabase/supabase-js"); // create client const supabase = createClient( "YOUR_SUPABASE_URL", "YOUR_SUPABASE_KEYS" ); ``` Create a function to generate an OTP code which will later be sent by Twilio to the user's number. ```js {9-20} const { createClient } = require("@supabase/supabase-js"); // create client const supabase = createClient( "YOUR_SUPABASE_URL", "YOUR_SUPABASE_KEYS" ); // login via otp const loginOTP = async (phone) => { let { user, error } = await supabase.auth.signIn({ phone, }); return error; }; // The user number to which the OTP code will be sent loginOTP("+628674563332") ``` After running, the OTP code will be sent to the user number. OTP Code via SMS

## Verify SMS OTP To check whether the OTP entered by the user is valid, it must be verified by the system. ```js {6-17} const { createClient } = require("@supabase/supabase-js"); // create client const supabase = createClient("YOUR_SUPABASE_URL", "YOUR_SUPABASE_KEYS"); // Verify SMS OTP const verifyOTP = async (phone, code) => { let { session, error } = await supabase.auth.verifyOTP({ phone, token: code, }); return { session, error }; }; // the user number + OTP code verifyOTP("+628674563332", 938493); ``` When the user enters the wrong OTP, it will give a message that the OTP is invalid. ```json { session: null, error: { message: 'Token has expired or is invalid', status: 401 } } ``` When the user enters the OTP correctly, it will return a session. ```json { session: { access_token: 'USER_TOKEN', token_type: 'bearer', expires_in: 3600, refresh_token: 'USER_REFRESH_TOKEN', user: { id: '', aud: 'authenticated', role: 'authenticated', email: '', phone: '08488393343', phone_confirmed_at: '2022-08-13T07:47:12.008645028Z', confirmation_sent_at: '2022-08-13T07:46:39.584682Z', confirmed_at: '2022-07-07T05:42:18.509965Z', last_sign_in_at: '2022-08-13T07:47:12.009974864Z', app_metadata: [Object], user_metadata: {}, identities: [Array], created_at: '2022-07-07T05:22:11.119149Z', updated_at: '2022-08-13T07:47:12.011685Z' }, expires_at: 1660380427 }, error: null } ``` ## Implementation with Next.js Clone the repository I've created. ```bash git clone https://github.com/jagadyudha/otp-auth-supabase-nextjs.git cd otp-auth-supabase-nextjs ``` rename `.env.example` to `.env.local` and put the supabase url and key in that file. ```json NEXT_PUBLIC_SUPABASE_URL=PUT_HERE NEXT_PUBLIC_SUPABASE_ANON_KEY=PUT_HERE ``` Install the library in `package.json` with the following command: ```bash # npm npm install # or # yarn yarn install ``` Run the project with the following command: ```bash # npm npm run dev # or # yarn yarn dev ``` Here is a video implementation of SMS OTP using Next. Js

## Conclusion Creating an OTP SMS is quite simple, but the simplicity is due to dependence on third parties such as Supabase and Twilio. The best approach, in my opinion, is to first rely on a third party if the application we are building is really still small. ## References [Phone Auth with Twilio | Supabase](#https://supabase.com/docs/guides/auth/auth-twilio)