Supabase.js logo

Supabase.js

Published June 2023
   •    Updated this month

Plugin details

- Authenticate your users with Supabase via Email, Magic Link or any enabled SSO. - Upload and manage files in your buckets.
- Run edge functions and return the values.
- Fetch data from your Database with automatic refresh on updates.

$60

One time  •  Or  $10/mo

4.3 stars   •   3 ratings
183 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

Relevat Digital logo
Relevat Digital
Joined 2020   •   9 Plugins
View contributor profile

Instructions

Read the Plugin manual which you can fund here: https://docs.relevat.hu/supabase.js-bubble-plugin/setup/basic-setup
IMPORTANT: Make sure you take extra care that you do not leak your 'service_role' API Key and 'JWT Secret'. Under no circumstances you should use the 'service_role' API Key as the "Supabase Key" in the plugin settings.

1. Fill out both Public Keys in the plugin setting. This is an essential step for the Plugin to work properly. When the page loads, the Plugin will create a new Client so that it can communiate with Supabase. This is done for each element you put on the page, which is needed so we can construct the API calls to Supabase for Auth, Storage etc. Both your Project ID and Anon key will be pre-generated by Supabase when you create your project.

1.1. Supabase URL: A RESTful endpoint for querying and managing your database, which you can find in the API tab of your Supabase project Settings. The Supabase URL looks like this: https://YOUR-PROJECT-REFERENCE-ID.supabase.co. You can also find the project reference ID in /settings/general tab, however you need to input the full URL in this field.

1.2. Supabase Key: Your project's 'anon' key, which is needed to be sent with every API request, and it's used to determine "anonymous" access to your Database based on RLS. You can find it in the API tab of your Supabase project Settings. The 'anon' key is a JSON Web Token in itself, which will be used by Supabase to determine which data can the user access when they're not authenticated.

Here's a short video which explains the API keys a bit more in details: https://www.youtube.com/watch?v=v3Exg5YpJvE

NOTE: This Key is basically your Public API Key, it's safe to use that in the browser/client-side. You can also copy that key and decode here: https://jwt.io/ to get some additional information, and you can also verify the signature by copy-pasting your JWT Secret, which you can find right below your API keys. Please also note that if you generate a new 'JWT Secret' your current 'anon' API key will be invalid.

2. Put the Supabase Auth element on the page, and setup the relevant action, with your own design and UX. (More tutorials are coming)

3. Once Supabase Auth is configured correctly, you can use Supabase Data and Supabase Storage with properly setup Row Level Security Rules.

If you disabled RLS or you allow public access to your database, for example for Blogs, or other public data, the Supabase Data can work on its own, with just your 'anon' key.

Supabase Storage is a File Uploader element as well, so you can use it to upload files to your buckets. No need to use the native file uploader element, since this File Uploader won't upload the file automatically only via the "Upload File" action.

Types

This plugin can be found under the following types:
Api   •   Action   •   Background Services   •   Element   •   Event

Categories

This plugin can be found under the following categories:
Data (things)   •   Email   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (4.3)

So promising but.....
January 27th, 2024
This plugin is super helpful for the community. It does now have most of the functions etc from the javascript library in the Supabase docs. But, the documentation is very basic and does not seem to get updated when new bits of functionality are included in the plugin. So yes, you can do most of the things needed to interact with your supabase project, but you will spend quite a bit of time figuring the processes in your app. A shame, because it really could be so good.
Very Good
January 4th, 2024
This is so useful, I would strongly recommend it.
Top notch
October 18th, 2023
This plugin has tons of functionality and makes it possible to build a Bubble app entirely without Bubble Data and back-end workflows. Developer is responsive, helpful and adds new features regularly.
Bubble