
We're always looking for ways to improve the developer experience and reduce complexity across your application development pipeline. One way you can use Supabase to do that is with dynamic JavaScript in Edge Functions. This greatly increases the versatility of your edge functions and reduces the need for you to redeploy your functions if you need to change business logic.
Introduction to Edge Functions
Edge Functions in Supabase are serverless functions that execute in response to HTTP requests. These functions are deployed at the edge, meaning they run close to the user's location, resulting in faster response times.
Why Use Dynamic Code Execution?
Dynamic code execution allows you to modify and run JavaScript code on the fly without having to redeploy your function each time the code changes. This is particularly useful when you need the flexibility to execute different logic depending on the incoming request, without incurring the overhead of redeployment.
Prerequisites
To follow along, you will need:
- A Supabase project
- Supabase CLI installed on your local machine
- Orb Stack or Docker Desktop installed on your local machine
- Environment variables set up in Vault, ensuring it passes validation in the function (e.g.,
service_role
)
Edge Functions defaults to the verification of the JWT, so it could be called with the ANON API Key. Make sure to implement proper security measures.
Install the SQL script from the repo
We have a repo with the SQL script to create helper functions to support the dynamic execution of JavaScript code. You can find the repo here: supa-dynamic
Install the SQL script supa-dynamic--0.1.sql
from the repo in your Supabase project. (You can copy and paste the code from the repo into the SQL editor in your Supabase project.)
These are the functions we'll use to execute the JavaScript code:
edge.http_request(url text, method text, headers jsonb, params jsonb, payload jsonb, timeout_ms integer) RETURNS jsonb
: Makes an HTTP request with the specified parameters.edge_wrapper(code text) RETURNS text
: Executes the provided JavaScript code.edge.get_secret(secret_name text) RETURNS text
: Retrieves a secret from Vault.
Deep Dive into the helper functions (optional)
You can skip this section if you are only interested in using the dynamic execution of JavaScript code. However, if you want to understand how the helper functions work, keep reading.
edge.http_request
Function
This function handles the actual HTTP request and processes the response. It ensures consistency in response format.
edge_wrapper
Function
The edge_wrapper
function manages HTTP requests with features like retries, custom headers, and region selection. Below are the parameters it accepts:
url
: The endpoint to call.method
: HTTP method, defaulting toPOST
.headers
: Custom headers to include, including region information.timeout_ms
: Timeout duration in milliseconds.max_retries
: Maximum retry attempts for the request.
To securely manage secrets, you will need to set your service_role_key
in Vault. Here’s how you can create a function to retrieve secrets:
This function can retrieve the service_role
secret from Vault, it also ensures that only authorized roles can access sensitive environment variables.
Setting Up the Edge Function
Let's dive into the code and set up our dynamic JavaScript executor Edge Function using Deno. Below is an overview of how to accomplish this.
Code Walkthrough
We'll create a function named multi-purpose
:
Now, we'll edit the code adding verification and the eval function, including the supabase client so we have it ready without the need to import.
Note: If you need more details, check the full guide to create an edge function.
Step-by-Step Walkthrough
- Validate Authorization: First, we ensure the request contains a valid authorization header. (this prevents calls from anon users)
- Receive JavaScript Code Payload: Extract the
code
from the request body.
- Wrap Code in Async Context: Use
new Function()
to create an async function that executes the incoming JavaScript code. This allows async calls in the code to be executed:
- Execute and Return Results: Run the JavaScript code, which can interact with Supabase via the provided client, and return the results.
Deploying the Edge Function
To deploy this Edge Function, you'll need to use the Supabase CLI. Ensure you have Docker installed and running on your local machine. Follow these steps to deploy:
- Install the Supabase CLI: If you haven't already, install the Supabase CLI by following the instructions in the Supabase CLI Documentation.
- Log In to Supabase: Use the command
supabase login
to authenticate your account. - Deploy the Function: Run the command
supabase functions deploy <function_name>
to deploy your Edge Function. Replace<function_name>
with the desired name for your function.
Setting Environment Variables in Vault
Creating the main function to interact with the edge function
We are using the helper functions defined earlier to create a function that interacts with the edge function. This function will execute the dynamic JavaScript code and return the results. This is the main function that will be used to execute the dynamic JavaScript code and return the results.
edge.exec
Function
The edge.exec
is a simple function leverages edge_wrapper
to execute dynamic JavaScript code. Here's an example of how it is structured:
Executing Dynamic JavaScript Code
The key to executing the dynamic JavaScript code is wrapping it in an async
function context using new Function()
. This approach lets you evaluate the code in isolation while retaining access to the supabase
client for interacting with your database. You can check the examples of how to use this calling the supabase client or even generating embeddings.
Example of Using Supabase Client Libraries
To demonstrate the execution of dynamic JavaScript, you can use the Supabase client libraries within the SQL context. Here’s an example query:
Using the Edge Function in Practice
Example: Generating Embeddings
The edge.exec
function allows for dynamic JavaScript execution, such as interacting with an AI session to generate embeddings. When executed, the JavaScript code within the SQL context runs through the edge function, returning results to the database.
You can also create a Postgres function to generate embeddings:
Example: Creating Users via Admin API
You can also leverage the admin API to create users:
Conclusion
As you can see, combining dynamic Javascript in Edge Functions with a few SQL support functions gets you a powerful new set of tools. By leveraging the edge_wrapper, edge.http_request, and edge.exec
functions, developers can create robust and flexible serverless applications that can dynamically execute JavaScript code while interacting with PostgreSQL databases.
As we continue to build and innovate with Supabase, combining edge functions and SQL support functions opens up new avenues for building scalable, efficient, and secure applications. Whether developing a simple project or a complex application, these tools provide the flexibility and power to bring your ideas to life.