Supabase edge functions - Webhook

What is it?

They are server-side typescript written functions. They can be used for listening to webhooks or integrating projects with libraries. A webhook is a method of communication between two different applications or systems over the internet. They are event-driven integrations. Supabase edge functions

What is deno?

Deno is a runtime environment for executing JavaScript and TypeScript code outside of a web browser. It's the easiest and a secure javascript runtime which overcomes some limitations and flaws of nodejs. Deno

Setup

To create an edge function we need to install superbase cli on our local machine. For installation steps, you can visit the Installation guide. Once it's done you can run the command supabase functions new hello-world Now the file structure would look something like below.

Now in index.ts, We will create a new function to save information to the database once it receives a request.

Make sure to create a supabase table before hand with the columns that you can see I am saving in the code below.

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { createClient } from 'https://cdn.skypack.dev/pin/@supabase/supabase-js@v2.26.0-1tZoF0d7m8wzrkfcvLiN/mode=imports/optimized/@supabase/supabase-js.js';

const supabaseUrl = 'project_url';
const supabaseKey = 'anon_key';
const supabase = createClient(supabaseUrl, supabaseKey, {
    auth : {
        persistSession: false
    }
});

serve(async (req) => {
  const body = await req.json();

  const authHeader = req.headers.get('Authorization');

  if (!authHeader) {
    console.error('Invalid authorization');
    return new Response('Unauthorized', { status: 401 });
  }

  const info = 
    {
      verification_token : body.verification_token,
      message_id : body.message_id,
      timestamp : body.timestamp,
      type : body.type,
      amount : body.amount,
      email : body.email,
      kofi_transaction_id : body.kofi_transaction_id,
      shop_items : body.shop_items,
    }

    const { data, error } = await supabase
      .from('ko-fi_payments')
      .insert(
        { 
          verification_token : info.verification_token,
          message_id : info.message_id,
          timestamp : info.timestamp,
          type : info.type,
          amount : info.amount,
          email : info.email,
          kofi_transaction_id : info.kofi_transaction_id,
          shop_items : info.shop_items,
        },
      )
    .select()
    if (error) {
      return new Response(
        JSON.stringify(error),
        { headerd : { "Content-Type": "application/json"} }
      )
    }

  return new Response(
    JSON.stringify("data saved"),
    { headers: { "Content-Type": "application/json" } },
  )
})

We have imported functions from the deno itself not installed it. Which makes it faster and it's recommended by supabase. The serve function is part of the built-in http module, which allows you to create an HTTP server and handle incoming HTTP requests. The serve function creates an instance of the server and starts listening for incoming requests on a specified port.

And rest of the things are same like we do in normal routes. In order to deploy it to our app we just run the following command supabase functions deploy hello-world . Here hello world is the name of our function. Once it's deployed it will visible to you in your supabase project.

Now you can copy the URL and try requesting it. For above example you can use the below data.

{
  "verification_token": "abc123",
  "message_id": "12345",
  "timestamp": "",
  "type": "order",
  "amount": 99,
  "email": "example@example.com",
  "kofi_transaction_id": "abcdefg",
  "shop_items": [
    {
      "item_name": "Product 1",
      "quantity": 2,
      "price": 5.49
    }
  ]
}

After hitting the url we can now check our tables that our data is saved.

You can also deploy an easy function just to test it out like responding with a "hi" msg once you hit the URL and more things if you just starting out with it. For more examples, you can check this Supabase guide.

When you have to use webhook you just specify the URL of our edge functions to hit along with the appropriate paramters to fulfill the request.

---

Follow -

Comment below for suggestions and improvement :) Follow me for more such content 😀. If you have any doubts you can message me, and I will respond asap :)