Contents
    How to Make SMS OTP With Supabase and Twilio

    How to Make SMS OTP With Supabase and Twilio

    Implementing SMS OTP in a simple way with third-party tools like Twilio and Supabase

    Posted by Jagad on August 13, 2022
    -- views

    6 min read

    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

    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.

    SID, token, and phone number

    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.

    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

    After that, go to the authentication section where we will find settings related to auth providers (phone provider).

    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.

    # 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.

    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.

    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.

    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.

    {
      session: null,
      error: { message: 'Token has expired or is invalid', status: 401 }
    }
    

    When the user enters the OTP correctly, it will return a session.

    {
      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.

    rename .env.example to .env.local and put the supabase url and key in that file.

    NEXT_PUBLIC_SUPABASE_URL=PUT_HERE
    NEXT_PUBLIC_SUPABASE_ANON_KEY=PUT_HERE
    

    Install the library in package.json with the following command:

    # npm
    npm install
    
    # or
    
    # yarn
    yarn install
    

    Run the project with the following command:

    # 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


    Post Reactions
    LIKE
    LOVE
    Wow
    YAY
    Contributors

    The writing on this website may contain errors in grammar, punctuation, etc. Please make a contribution here