Using Supabase SMS-Hook to Send Custom Authentication Messages in India

Given the limited support for local SMS providers in Supabase, the platform has introduced an auth hook that allows users to integrate their own local SMS or email providers for sending OTPs. This feature offers flexibility for those seeking to implement custom authentication solutions.
Follow these steps to set up a custom SMS hook for authentication in your Supabase project:

1. Access the Hooks Dashboard

• Navigate to your Supabase project dashboard
• Go to https://supabase.com/dashboard/project/_/auth/hooks

2. Initiate Hook Creation

• Click the "Add a new hook" button
• Select "Send SMS hook" from the options

3. Configure Hook Settings

• Toggle on "Enable Send SMS hook"
• For Hook type, choose "HTTPS"

4. Set Up the Endpoint

• In the URL endpoint field, enter: https://project_ref_id.supabase.co/functions/v1/sms-hook
• Replace project_ref_id with your actual Supabase project reference ID

5. Generate and Save the Secret

• Click on "Generate secret"
• Copy the generated secret and store it securely

6. Create the Hook

• Click "Create" to complete the setup

Implementing the SMS Hook Edge Function in Supabase

After setting up the custom SMS hook in your Supabase dashboard, the next step is to create and deploy an edge function that will handle the SMS sending logic. Follow these steps to implement the sms-hook function:

Prerequisites

• Supabase CLI installed
• Docker Desktop installed

Steps

1. Set Up Your Local Environment

a. Log in to Supabase CLI:

   npx supabase login

b. List your Supabase projects:

   npx supabase projects list

c. Link your local setup to your Supabase project:

   npx supabase link --project-ref your-project-id

2. Create the SMS Hook Function

Create a new function named "sms-hook":

   npx supabase functions new sms-hook

3. Implement the Function Logic

Open the index.ts file located at functions/sms-hook/index.ts and replace its content with the following code:

   import { Webhook } from "https://esm.sh/standardwebhooks@1.0.0";
   import { readAll } from "https://deno.land/std/io/read_all.ts";
   import * as base64 from "https://denopkg.com/chiefbiiko/base64/mod.ts";

   const sendTextMessage = async (
     messageBody: string,
     toNumber: string,
   ): Promise<any> => {
     const username = Deno.env.get("TEXT_GURU_USERNAME");
     const password = Deno.env.get("TEXT_GURU_PASSWORD");
     const source = Deno.env.get("SMS_HEADER");
     const tempId = Deno.env.get("SMS_TEMPLATE_ID");
     const url: string =
       `https://www.textguru.in/api/v22.0/?username=${username}&password=${password}&source=${source}&dmobile=${toNumber}&dlttempid=${tempId}&message=${messageBody}`;
     console.log("url:", url);
     const response = await fetch(url, {
       method: "POST",
       headers: {
         "Content-Type": "application/x-www-form-urlencoded",
       },
     });
     return response;
   };

   Deno.serve(async (req) => {
     const payload = await req.text();
     // Paste the earlier copied base64 secret here and remove the first "v1,whsec_" from the copied base64 secret
     const base64_secret = Deno.env.get("SEND_SMS_HOOK_SECRET");
     const headers = Object.fromEntries(req.headers);
     const wh = new Webhook(base64_secret);
     try {
       const { user, sms } = wh.verify(payload, headers);
       const messageBody =
         `Dear Customer, Your Verification Code For Company name Is ${sms.otp}. Please do Not share this Code with anyone.`;
       const response = await sendTextMessage(
         messageBody,
         user.phone,
       );
       // You can edit further code as the response coming from your sms provider
       if (response.statusText === "OK") {
         return new Response(
           JSON.stringify({ message: "SMS sent successfully." }),
           {
             status: 200,
             headers: {
               "Content-Type": "application/json",
             },
           },
         );
       }
       return new Response(
         JSON.stringify({
           error: {
             http_code: response.status,
             message:
               `Failed to send SMS: ${response.message}. More info: ${response.more_info}`,
           },
         }),
         {
           status: response.status,
           headers: {
             "Content-Type": "application/json",
           },
         },
       );
     } catch (error) {
       return new Response(
         JSON.stringify({
           error: {
             http_code: 500,
             message: `Failed to send sms: ${JSON.stringify(error)}`,
           },
         }),
         {
           status: 500,
           headers: {
             "Content-Type": "application/json",
           },
         },
       );
     }
   });

4. Deploy the Function

Deploy the sms-hook function using the following command:

   npx supabase functions deploy sms-hook --no-verify-jwt

5. Enable Phone Authentication

Remember to enable the phone provider from Authentication Providers in your Supabase Dashboard.

Important Notes

• Make sure to replace placeholders like your-project-id with your actual Supabase project details.
• The SEND_SMS_HOOK_SECRET should be set as an environment variable, using the secret you generated earlier (remove the v1,whsec_ prefix).
• You'll need to set up environment variables for TEXT_GURU_USERNAME, TEXT_GURU_PASSWORD, SMS_HEADER, and SMS_TEMPLATE_ID according to your SMS provider's requirements.
• This implementation uses TextGuru as the SMS provider. You may need to adjust the sendTextMessage function if you're using a different provider.

By following these steps, you'll have successfully implemented and deployed a custom SMS hook for authentication in your Supabase project.