[New Plugin] Supabase.js - With Auth, Data and Storage

Thanks. What’s the strategy on the front end? Is it possible to move away from Bubble incrementally?

My apologies for answering this one as it was not directed at me. But perhaps it will help you to share our experience.

We started with only one table in Supabase for heavy data calculations. As soon as we realised how powerful Supabase is, and in comparison how powerless with regards to db Bubble is, we started moving more and more tables to Supabase.

We now have the strategy to split the backend from the frontend and use Bubble still for the frontend for now. Biggest drawback of Bubble at this stage is not be able to reuse all the code that we have “written” and also that our business is in the hands of Bubble executives. So the split will help us to keep using what we have build so far and be able to change things quickly for our users. But also it reduces the time and cost needed to switch frontend when we are ready or need to.

I have to add that we also add much of the business ruling towards supabase and a lot by means of functions in postgres (db of Supabase). There are pro’s and con’s but for us it works very well to have logic close to the data and by using views and smart error functions we can visualize the relation between business rules/logic and our data/tables as well as acting quickly to issues should they occur. So the frontend is becoming more and more simple every week. Making it even more easy to transit if we need or want to.

3 Likes

I’m still learning the best way to do it, but the less mentioned tips I’ve got are;

  • re-name your tables and columns to be postgres friendly (I am going to document that properly) - it makes migration easier.
  • For any tables that the schema is actively changing and you are still “developing” - leave these till last - you lose a lot of flexibility of Bubble once you are off the Bubble DB
  • Start with big, slow changing tables, that aren’t used transactionally - eg Reporting tables. You gain a lot of reporting benefits straight away
  • Really pause for thought of the cost/benefit with transactional tables that rely on Bubbles realtime UI update. Some folks just want to migrate on a “principle” :slight_smile:

My focus is mostly on Backup and Migration (and BI) - others will have better tips on how to optimise the re-wiring of the front end. But the common practice of holding your Repeating Groups Lists in something like dare I say it but I know you are a fan … List Shifter … is helpful - I just use RGs :wink:

1 Like

It’s a forum and your contribution is great.
Bruh, get over here; it’s bear-hug time. Thank you for being a positive member of the forum.

You’re raw-doggin’ that SQueaL directly? Or are you using the Edge Functions?

1 Like

:pray:

Mostly postgresql function. But we use for instance the webhook of RevenueCat and they are unable to send the api key in the header which is needed for Supabase so in such cases we send the webhook to a edge function endpoint and let that edge function call the postgresql for further processing and added security.

2 Likes

Questions guys. How do you handle live and dev environments? Do you create 2 supabase projects for dev and live?

Also, how do you update the project if there are some schema changes along the way?

Good question! Still not a good solution. There are various ways to handle this but at this stage we mostly use different function names like function_name_live function_name_test

We are now looking into the new branching feature of Supabase.

How do you guys handle it?

Right now, you are using a single project for your live and dev?

Yes well not fully we do have logical replication setup to another machine but it is not such that we always and only develop and test there. It happens so to be that our data structure and logic is such that we can to large extend isolate functions and change small things without the risk of breaking things. And of course we have all kinds of backup processing

Wouldn’t the branching feature be the right thing?

Just to add to this - we’re currently in the process if migrating part of quite a complex application and database to Supabase.

In terms of live vs dev - we have two databases. We run a local version of Supabase and use the CLI to generate migration scripts. These can then be run on development and live as required. We did test out the branching feature when it was in beta, but this at the time was unreliable, so we committed to this approach.

Realtime is absolutely a possibility and can work just as well as Bubble’s out of the box websockets.

1 Like

Branching as of the moment is still on beta I think? And is not yet recommended for production.

When you use Local version using CLI, you create changes on local version as well? Or you create changes on local version then dump changes into a local version, then local pushed to production?

We’ll love to see how you do your migrations. :slight_smile:

Yes sorry - branching is still in beta. I thought I’d spotted it had been officially released as a part of their recent launch week, but seems to be my misunderstanding!

Yes, so we have three databases:

  1. A database that we run locally - we do have the ability to hook this up to our own internal Supabase plugin.
  2. A development database - hooked up to our test branches via our own Supabase plugin.
  3. Our production database - hooked up to our live branch via our own Supabase plugin.

Any dev work occurs via our local database. Via the CLI, we generate migration scripts and merge into dev when happy. From there, we can test on Bubble branches, before deploying into prod.

This doc may be of more help: Local Development | Supabase Docs

1 Like

Hi Peter,

Is it possible to add the Postgres error code to the list of exposed states in the supabase data element?

Thanks,

Naveen

New Major update to the plugin with 3.0.0. As this is a breaking change it will be a major upgrade, please see the changelog below:

  • The biggest change is that Expected JSON response is now Schema Validation using AJV. The logic behind it is still the same, if the field is not empty the plugin tries to modify the reponse before pushing it to Bubble, now using AJV validation. Since now it expect a specific format, I’ve created a little tool, which transforms your Raw Bubble response from the API connector to a format Ajv can consume. Here’s the link for the tool. Here’s the entry in the docs. If your response has null values, the tool won’t be able to validate and assign the correct type, so beforehand fill it with any value other than null or undefined, if it’s the case
  • MFA now support SMS verification. docs
  • Fix for Large File uploader’s prefix to be dynamic after page load.
  • Updated Uppy Library for Large File Uploader
  • New Data Action: Unsubscribe from a Realtime channel, Unsubscribe from all Realtime channels, Retrieve all Realtime channels.
  • New SSA: Execute Raw SQL. This allows you to add any Raw SQL and execute it in your Supabase DB. No authentication required from the User as it uses your connection string. It returns the number of rows affected, the data if it’s a SELECT, and any error. This is an advanced feature please be careful.
  • Fixed a bug when an auth action with captcha returned an error
  • Postgres Code output for Postgres function error.
  • Fixed a regex bug with Any Filter, and it will also clean the data.
  • Fixed a bug where Data ‘isLoading’ was stuck on ‘yes’
  • Some additional Realtime V2 fixes and optimizations.

A Bubble Template is also in the works where you can copy the template, and also a guide how to duplicate the underlying Supabase project with it. Any issues, bugs you see, please let me know so I can patch it quickly :slight_smile:

3 Likes

Just pushed a new update [3.1.0] including new features and fixes:

  • New Action: Generate XML Sitemap. There’s both Client-side and Server Side actions for it. Both generates a sitemap from the JSON Reponse and automatically push it to Supabase Storage. Client-side one can be downloaded as well. SSA version should be called on the Backend but can be setup as a weekly or biweekly recoursive wf. Here’s the docs for both.
  • Schema Validation now also works for the individual Edge Function element when returning a Thing, same settings as for the Data element.
  • Added some more documentation for Edge Functions here. There’s the initial VSCode setup, Code example to return Supabase Data from the Database, and the Bubble setup for it.
  • Some minor fixes for Oauth2 flow for Google
  • Fixed a bug where the “Edge Function Finished” event was not firing properly.
1 Like

Hey @petersas,

Got an urgent issue. Any chance you could release an update to the plugin to consume an earlier version of the Supabase package? Currently the plugin is using the latest v2 package release and there has been a critical bug introduced in this package (not your fault at all) that prevents Local Storage from being set and hence breaking persistence in Supabase Auth as per Github issue: Possible breaking change between 2.45.4 and 2.47.6: Auth-token keeps getting deleted from localStorage on page refresh · Issue #1334 · supabase/supabase-js · GitHub
This is causing huge authentication issues for our app at the moment. The persistent Auth session isn’t being shared by all the Auth elements on a page or when navigating between pages.

I have found a temporary resolution to this issue is to place in the Bubble Settings > SEO / metatags in the Script/meta tags header the following:

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.47.5"></script>

This loads the previous Supabase JS package to the previous release, prior to the breaking change in 2.47.6 and enables users to log in again.

1 Like

Thank you for flagging this @tech.legalmp I’ve also pushed a patch downgrading the SDK to 2.47.5 for the time being, after Supabase fixes the issue I’ll add the most recent version back

1 Like

A couple of new Updates for [3.2.0]

  • Moved Connection String Parameter to the main settings page so Backend SQL actions can share it.
  • On that note, added several actions to manage Keys for Supabase Vault. (create, read, delete) This way you can safely store API keys for your Users or other sensitive data. These actions are designed to be run only on the backend.
  • Fixed a bug where queries or actions ran twice on page load and maybe other places.
  • Updated the SDK to the latest
  • Fixed bugs with the Supabase Sentry Addon where it wasn’t initializing properly
  • Fixed bugs with the Large File Uploader where the upload wouldn’t start