How to Use Supabase and Firebase Together in FlutterFlow
Вставка
- Опубліковано 5 лют 2025
- 🚀 All the code for the method:
kealy.studio/b...
🚀 Need some guidance on your next Flutterflow project?
kealy.studio
Struggling to combine Supabase and Firebase in FlutterFlow? I’ve got you covered! In this video, I’ll show you how to use both platforms seamlessly with one simple custom action and one cloud function. Keep Firebase’s magic (like push notifications) while unlocking Supabase’s row-level security.
It’s quick, easy, and game-changing for your FlutterFlow projects. Watch now and follow the step-by-step guide in this description!
Love your Content John.
Good to see someone asking the right questions and going in the right directions to use supabase and flutterflow more efficent.
Can you make a tutorial on how to set up the notifications with this combination of sb and fb?
A lot of people would need this :)
Thanks in advance.
@@paso_sb thanks! So the point of this method is that things like notifications can work without modification, just follow the flutterflow docs 😄
If you’re having issues, try this video: ua-cam.com/video/rFTO-cN5PyI/v-deo.htmlsi=wmWdONAJnkpQ0K8I
Very informative! Thank you for your contribution. 😊
Great video. I didn't know or think about that technique. Definitely something I want to try in the future. 🎉
Thanks 😀
Thank you for your contribution. ❤
Welcome!
This is so helpful, thank you for taking the time to do this. 🤓
Glad it was helpful!
So .. the question that remains is, how does one sync the firebase user ID with supabase in order to associate data with specific users? I've tried a backend action call to insert the UID and email from the authentification, which, if bound to text blocks, print the firebase data, yet the action doesnt seem to insert the rows into the supabase table which contains two string fields for the uid and email. So perhaps a video on how to sync that up would be neat.
Extra actions on the signup and login flows. I also have a backup sync button in my admin panels, and for optional added peace of mind, you can set syncing cron jobs in case any of the above fails. But you want to set the primary key in the supabase users table as the firebase auth UID, rather than having a separate UID field
Early next week I'll release part 2 of ua-cam.com/video/PKVG3GWFFDI/v-deo.html, in which I go through it.
Thanks! So, we don't need to add a policy for INSERT?
Of course you do! RLS policies work the same, this method doesn't affect how they work 😁
@@johnckealy It’s working perfectly! Thanks!
Thank you very much for this, I'm about to start working on a project and was hesitant to use Supabase auth because of all the issues that come with it.
Any ideas on how to navigate permission based access control, currently I'm thinking of just storing that data in Supabase then fetch to App State and manage the access that way.
You mean Role-based access control? I made a video on this topic recently.
ua-cam.com/video/u3W9hZWzA4M/v-deo.html
You can create roles in Supabase, and then embed these roles into the firebase token. If you want a role other than admin, you can just adjust the firebase function and mint a supabase token that carries the appropriate role.
@ Not role based as I’m building a store a management app that will have a bunch of boolean fields for different access and multiple users can belong to different stores
It can’t be role based because the permissions are custom for each user for every store
@@flyingB2 Ah, more like Attribute-based access control? I don't have much experience with ABAC, but as I understand it you'd create a table called something like "user_permissions" and create the complimentary RLS policies.
@@johnckealy great, I’ll look into it
This is great. John. I do have one question. if I already have an app out in the wild using supabase for auth is it possible to crowbar this method into my existing project without telling my users they have to reset their passwords or setup new accounts?
I'm afraid not - you'd be fully switching auth system. There's no way to do that without forcing users to sign out and reset their passwords. But it's not the end of the world to do that if you warn them. Still, I'm a fan of "if it aint broke, don't fix it" 😀
@@johnckealy I am too 100%. but they have been asking for notifications and I'm at a loss on how to try to actually do that with supabase and flutterflow :(
@@brianschaiper7500 This is on my list, to work out an accessible solution for that. But there are already resources involving OneSignal and a little custom code. I think James NoCode had a video on this. But personally I need to find the time to dig into the topic.
@@johnckealy That's awesome. I will do some searching for it. Again... thank you for everything you do for the community. Your tutorials have been so helpful.
while saving it showing this error "Custom action updateSupabaseToken cannot be parsed" how to fix?? also it showing this error in the cloud function step "loud function is named "mintsupabasetoken" but this cloud function name does not appear in the code."
Same issue
Yes apologies, I’ve updated the code. It’s a line break that happens on line 55 in the debug statement, the
gets taken literally when copying.
For mintSupabaseToken, the case is wrong (mintSupabaseToken not mintsupabasetoken)
Hi, John! A very usefull work you are doing on your chanel! Thanks a lot! I've made all according to your instructions, but I'm facing an issue - Error fetching/setting Supabase token: NoSuchMethodError: 'httpsCallable' (in console). I see the JWT token in debug console in test on FF and I see the content inside token is ok (as shown in your video). What could be wrong? Thanks in advance!
Sounds like an issue with imports. Here's what you can try. Create and deploy the cloud function (mintSupabaseToken) first. Then, in the Flutter custom action, use the boilerplate generator. Then, add the code from my article but without the imports, only the stuff below the "DO NOT EDIT ABOVE THIS LINE".
It sounds to me like you created the custom function first, but cloud functions need to exist before Flutterflow will import the library needed to make them work in the custom action. Play around with the imports, try to understand them, use the AI, use the autofix tool in the custom code editor, and you'll get it eventually.
@@johnckealy Thanks for advise. Actualy I've tried to create custom function first and after that cloud function, but failed. Then i read your comments below and deployed cloud function first. And after that customfunction saved perfectly. In test mode I've tried to insert a new row but failed, while I was still unauthorized. In console (Network-Fetch) I could not see connection to Supabase as you have shown in video. So I've tried to delete cloud function to redeploy everything from scratch, but now FF don't want to deploy in anyway( Nevertheless, thanks for your assistance, you are making a great job, John!
Hi, I made it from scratch twice and both times I got the "cannot be parsed" error. I applied exactly what you explained in this video. Did you add anything to the project in the video beforehand?
Shoot, yes totally my bad thank you for pointing this out! Line 55.
debugPrint('Error in updateSupabaseTokenAction: $e
$st'); When you copy paste it takes the
literally and it creates a new line that causes the parse error. I'll fix it now. I never realised because I never need to copy paste my own code from my own article 😂 Apologies.
Wait so you're saying I don't have to disable row level security anymore?
Yes, indeed I am!
@@johnckealy okay what about when i want to work on tables using tools like zapier how do I go about this? Cause then there wont be a auth table (id or email) for the users in supabase
That’s the main caveat of the method, please read the article to the end.
Basically you extend the users table to Supabase and create the records using the firebase UID as the primary key in Supabase. It’s common to use a similar approach when using any third party auth system alongside a decoupled database.
@@johnckealy alright appreciate you. I am already using the method in a project.
@@brickflowsawesome, and it’s working okay for you?