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

@petersas, Is there a way to prevent loading from being loaded upon page load. I have a supabase data element that it returning random values until it is given a primary key from another call.

I was testing it but had no issue uploading. Can you maybe send some more screenshot in a DM? Also worth looking at some Supabase settings on the Bucket, or file names with weird characters can also cause that.

Yes, The Data element’s code will only run when visible. So it can be hidden on page load and only shown when the primary key you’re referencing is available.

1 Like

Hi @petersas

Have people had issues with the storage and either updating a file or deleting one?

I’ve been trying for sometime this evening now to get storage set up properly. Here’s an example of delete.

  1. Any reason the path is not set to the /public folder/bucketname ?
  2. I also cannot see the key passed through into the delete request?

The policy I have for delete is the same as I have for insert. It makes no sense why I cannot delete with the plugin but I can insert.

image

Hi @petersas

Is there a way to select the schema when using Database element?
I’m using custom schemas for dev and prod environment and public only for fix table (equivalent of options sets in Bubble). I cannot find how to proceed. In the API connector I do it just by adding header “accept-profile”=“mySchema”.

Regards.

1 Like

It’s not needed, and also if it were RLS issue, Supabase usually let us know that, and it should appear in the Dev Console. The SDK actually builds the Url based on the bucket. And the key is passed in the payload. Do you see any other error in the dev console?

It was never really highly requested so I haven’t yet added this, but I’ll try to prioritize this!

1 Like

Thanks for your quick answer @petersas that’s will be a big change for me!

1 Like

Has anyone integrated stripe with this?

Hi Peter,

Is there a plan to implement any new providers for OAuth? We’re interested in the Azure provider specifically, if it can be added that would be great. :slight_smile:

1 Like

I also would like to see the ability access different schemas from the database element. This would be quite useful.

1 Like

Just pushed a new update [2.19.0]

  • Added “Custom Schema” for Data element. If there’s a custom schema defined for 1 Data element that will create a temp client with that schema. Just note not to overuse it, because these can slow down the app.
  • Added “Azure” and some other provider to Auth
  • some other code clean-up
1 Like

Tested with our organization set up and can confirm azure is working. Thanks for this :slight_smile:

On a side note, auth related but not related to the changes:
We sometimes have issues where supabase returns a 401 unauthorized along with “invalid claim: missing sub claim”. Any ideas what might be causing this? The issue appears intermittent but obviously causes some slight headache.

Quick Edit:
We noticed the auth behaviour for azure (possibly others) can cause some slight problems when using a single page.
Assume you have a page mydomain/mypage which contains a sign in button, sign out button and a text element that populates with the supabaseauth’s user email when logged in.
When you complete an azure sign in and redirect back to the same page, the url becomes mydomain/mypage#token.... which is fine. If you then log out using the supabase element but do not redirect or conduct any other actions, the url becomes mydomain/mypage# (note the # remains but the token details clear.)
If you then login a second time, the url becomes mydomain/mypage##token... which is thus invalid due to the 2nd # and the user isn’t actually authenticated. If you try to run the auth again, the url is invalid and azure’s auth page throws an error that the user couldn’t be signed in.

This behaviour is easily fixed, by navigating to the same page (thus removing the # from the url) or to a login page/home page. Just thought it might be worth mentioning :slight_smile:

Added a new update for [2.20.0]

  • Anonymous Login API is now here. Added the options for both Captcha and Metadata. Don’t forget to enable that in your Supabase project.
  • Also fixed some minor bugs, when the Data element fails to return nested data
  • Some improvements to custom schemas
1 Like

Hi @petersas,

Is the “Function Value” able to handle streamed responses? I’ve created an apiconnector “object” for the json that gets spit out from our edge function, and I can see from curl test and from the chrome dev tools network tab that the responses are being created, but the function value itself remains empty (“data with id “undefined” from an api” to be precise).

yeah, that part is not yet this sophisticated. So far it can handle simple responses, but not more complex ones. This I’m working on currently, and hopefully release soon.

Update 2.21.0: Added a New Element: Supabase Sentry Addon. This is useful if you’re using Sentry (highly recommended), to keep track of errors and performance of your Supabase queries.

You don’t have to do anything just drop the element on to the page, and add the DNS, which you’ll find in your Sentry Project settings under Client Keys.

This will automatically track every interactions with Supabase for you.
Also don’t forget to check Supabase GA week happening now, where they’ve announced some really cool things!

Very cool @petersas thanks for building this in!!

1 Like

Hi!

Having an issue with using the Data RealTime fetching in my application. It seems like when i am using the realtime function, Supabase creates a new javascript/json object each time the data updates and stores it in the client browser memory. This does not get emptied, and eventually, after some time the site crashes with a “out of memory” error text.

I am using the realtime v1 version. My database is only 120 objects, but they update rather often. I also put the supabase data object with same settings on an empty page and let it sit for a while. That also eventually crashed the page.

This is my data settings:

This is the memory heap from google console. The “Address” column is my unique identifier. Notice that one single address has hundreds of objects.

I am on the latest version of the plugin, and I have followed the manual. Please help!

FYI: This does not happen when realtime is turned off. I tried using V2 but when a value changes it immediatly changes back to the original value. Really wierd behaviour.

Hi @andre15, many thanks for the detailed report, will look into this thoroughly and send a DM if any more info needed!

Thanks a lot @petersas,

I have checked a lot now. Also trying Nocodegardens similar plugin which does the exact same thing.

A little bit of background to how I set up my app:

I need to display values from different entries all over my page, so I use :filtered a lot directly on the supabasedatabase element to get the exact value I need. From my testing when trying this on an empty page with just data showing in a repeating group vs doing a bunch of :filtered on my actual app- page it seems like both have a memory leak where the garbage collector does not clean older fetches. Yet, the heap memory fills up A LOT faster when fetching on the app page with the filters. Do not know what that is about.

Using the p prefix which only updates the JSON string and not the datatype list seems to make the heap memory grow at a slower pace.

Hi again,

I have done some more research and it seems like this might be as supabase issue. I found this thread discussion a similar situation.

Could this be it? It seems like the plugin has a hard time dereferencing old api fetches and it keeps stored in the heap memory as a string. Almost 90% of my heap memory is a string and everything seems to come from the fetches from this plugin.