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_idwith 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-idwith your actual Supabase project details. - The
SEND_SMS_HOOK_SECRETshould be set as an environment variable, using the secret you generated earlier (remove thev1,whsec_prefix). - You'll need to set up environment variables for
TEXT_GURU_USERNAME,TEXT_GURU_PASSWORD,SMS_HEADER, andSMS_TEMPLATE_IDaccording to your SMS provider's requirements. - This implementation uses TextGuru as the SMS provider. You may need to adjust the
sendTextMessagefunction 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.
Top comments (0)