Contents
    Cara Membuat SMS OTP Dengan Supabase dan Twilio

    Cara Membuat SMS OTP Dengan Supabase dan Twilio

    Menerapkan SMS OTP secara sederhana dengan Twilio dan Supabase

    Posted by Jagad on August 13, 2022
    -- views

    5 min read

    Pengantar

    SMS OTP (one time password) adalah fitur yang memungkinkan login ke akun melalui SMS tanpa harus menggunakan nama pengguna dan kata sandi apa pun. Ini menghemat waktu karena tidak perlu mengetik ulang kredensial lagi setiap kali masuk. OTP biasanya digunakan untuk memverifikasi pengguna yang ada dengan cara pengguna harus mengirim kembali kode verifikasi yang didapatkan ke server sebelum diizinkan masuk ke sistem.

    Karena menjanjikan perlindungan akun yang lebih kuat, OTP banyak digunakan di berbagai sistem seperti e-commerce, m-banking, dll. Artinya, ketika kita akan mendaftar atau login ke suatu sistem, kita harus memasukkan kode OTP yang dikirimkan ke nomor kita.

    meme about SMS OTP

    Dari penjelasan di atas, pasti kalian berpikir bahwa sangat sulit untuk mengimplementasikan OTP pada sistem karena kita harus berhubungan dengan provider dan juga harus memahami cara kerja autentikasi. Padahal, kita dapat mengakalinya dengan bantuan Supabase yang menyediakan kemampuan untuk meng-generate otp yang nantinya diintegrasikan dengan Twilio.

    Konsep SMS OTP

    Mengetahui cara kerja SMS OTP sangatlah penting untuk memahami apa yang akan kita pelajari kali ini.

    Twilio Console

    Dapat dilihat bahwa supabase digunakan untuk men-generate OTP, kemudian twilio ditugaskan untuk mengirimkan kode OTP ke nomor tujuan. Setelah pengguna mendapatkan kode OTP, pengguna dapat mengirimkan kode OTP untuk verifikasi.

    Setup Twilio

    Pertama-tama, kita perlu mendaftar untuk mendapatkan akun trial gratis menggunakan tautan ini. Twilio | Try Twilio Free

    Kita akan diarahkan ke halaman konsol untuk membuat project baru setelah masuk.

    Twilio Console

    Kalian dapat mengetik apa pun yang kalian suka untuk nama project.

    Setup project name

    Untuk memastikan bahwa kita benar-benar manusia, Twilio meminta konfirmasi nomor telepon.

    Verify phone number

    Twilio akan menanyakan beberapa pertanyaan mengenai jenis project yang akan dibuat. kalian dapat mengisi form seperti pada contoh di bawah ini.

    Twilio questions

    Langkah selanjutnya adalah membuat virtual number yang akan digunakan untuk mengirim OTP ke pengguna nantinya.

    Create virtual number

    Pada bagian Account Info, terdapat kolom untuk SID, token, dan nomor telepon. Ini yang akan kita gunakan nanti.

    SID, token, and phone number

    Menguji SMS Twilio dengan curl

    Kita dapat menggunakan curl untuk mencoba mengirim SMS dari nomor virtual dengan mengganti SID, body, from, to, dan token dengan milik kalian.

    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]
    

    Dapat dilihat bahwa SMS masuk ke nomor tujuan setelah curl dijalankan.

    sms result

    Setup Supabase

    Di bagian ini, kita akan mendaftar Supabase, yang kemudian akan diintegrasikan dengan Twilio. Kalian dapat mendaftar di sini

    Setelah itu, masuk ke bagian autentikasi dimana kita akan menemukan pengaturan yang berhubungan dengan auth provider (phone provider).

    phone provider

    Pada bagian phone provider kita akan diminta untuk memasukkan SMS provider yang akan kita isi dengan Twilio beserta sid, token, dan nomor telepon dari Twilio yang telah kita buat tadi.

    detail phone provider

    Kita juga membutuhkan API key yang akan digunakan untuk mengakses database melalui URL.

    Supabase API key

    Login menggunakan OTP dengan Supabse

    Kita harus menginstall library yang disediakan Supabase untuk membuat login menggunakan OTP.

    # npm
    npm install @supabase/supabase-js
    	
    # or
    
    # yarn
    yarn add @supabase/supabase-js
    

    Setelah itu, konfigurasi supabase dengan mengubah url dan key dengan yang kalian miliki.

    const { createClient } = require("@supabase/supabase-js");
    
    // create client
    const supabase = createClient(
      "YOUR_SUPABASE_URL",
      "YOUR_SUPABASE_KEYS"
    );
    

    Membuat fungsi javascript untuk menghasilkan kode OTP yang nantinya akan dikirim oleh Twilio ke nomor pengguna.

    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")
    

    Setelah dijalankan, kode OTP akan dikirimkan ke nomor pengguna.

    OTP Code via SMS

    Verify SMS OTP

    Untuk mengecek valid tidaknya OTP yang dimasukkan oleh pengguna, maka sibutuhkan verifikasi oleh sistem.

    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);
    

    Ketika pengguna memasukkan OTP yang salah, maka akan memberikan pesan bahwa OTP tidak valid.

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

    Ketika pengguna memasukkan OTP dengan benar, maka akan memberikan return berupa 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
    }
    

    Implementasi dengan Next.js

    Kloning repositori yang sudah saya buat.

    ganti nama .env.example menjadi .env.local dan masukkan url supabase dan API key di file tersebut.

    NEXT_PUBLIC_SUPABASE_URL=PUT_HERE
    NEXT_PUBLIC_SUPABASE_ANON_KEY=PUT_HERE
    

    Install library yang ada di package.json dengan command berikut:

    # npm
    npm install
    
    # or
    
    # yarn
    yarn install
    

    Jalankan Project dengan perintah berikut:

    # npm
    npm run dev
    
    # or
    
    # yarn
    yarn dev
    

    Berikut adalah video implementasi SMS OTP menggunakan Next.js

    Konklusi

    Membuat SMS OTP memang cukup sederhana, namun kesederhanaan tersebut dikarenakan ketergantungan kita pada third-party seperti Supabase dan Twilio.

    Untuk saat ini pendekatan terbaik menurut saya adalah mengandalkan third-party terlebih dahulu jika aplikasi yang kita bangun masih kecil.

    Referensi

    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