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=v3Exg5YpJvENOTE: 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.