HTML-код
- Опубликовано: 3 авг 2024
- In this video I will walk you through the steps required to get #Supabase authentication up and running within your #FlutterFlow #nocode application. If you have an existing project which contains a login and create account page no worries because I have you covered. If you are new to creating an authenticated workflow in FlutterFlow then I will create three screens from scratch to get you started. This video also covers the changes required within Supabase to get both tools talking to each other.
Supabase: www.supabase.com
If you love my content why not consider buying me a coffee, it's really appreciated:
bmc.link/thedigitalpro
00:00 Introduction
00:47 Setup a new Supabase Project
01:36 Configure our Supabase project
02:55 Creating our FlutterFlow project
08:47 Configure FlutterFlow for Supabase
09:51 Getting FlutterFlow and Supabase talking
10:43 Configure Email Provider
11:40 Connecting our widgets for Authentication
13:52 Testing the authentication
14:31 Outro
_____
🚀 The Digital Pro's NoCode Academy on Patreon: www.thedigitalpro.co.uk/patreon
(official launch in September, but welcome to join today 😉)
🔥 If you love my content why not consider buying me a coffee, it's really appreciated: www.thedigitalpro.co.uk/coffee
👍 Support the channel and grab yourself a free FlutterFlow account by clicking here: www.thedigitalpro.co.uk/flutt...
🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.
![MURDER DRONES Series Finale [TRAILER]](http://i.ytimg.com/vi/p6mhC5Iatns/mqdefault.jpg)
I'm starting to learn Flutterflow and this was definitely very helpful. I can't wait for Supabase to add other forms of Auth. keep up the great work!
Hey Frankin. You are in good company. I am just finishing off my next app which I will use for a new series which will be a build walk-through for Supabase. It will also use some advanced features of Supabase to support how the application responds in FlutterFlow. I'm going to start recording it soon. Thanks for your kind comments.
Thank you very much for your great videos.
Thank you very much appreciate your comment.
Thank u for sharing
Thank you god thank you thank you thank you thank you…infinite loop of gratitudes that I will just crash into my dopamine receptors and smile away to neverland
😂
Very good. I am glad you are excited. Really good news though.
Thank you so much ❤
You're welcome 😊
Good video! Keep up the good work :)
Thank you Victor. A whole fresh series will be coming soon on Supabase and FlutterFlow. Stay tuned!
Thanks for the video, very clear, could you make a video of how to reset the password of a user?
Yes please
Bro did you find that out
This is great! Can you do a version that signs up a user only after they’ve entered in an otp code?
Thank you for the video .. but how can we handle errors from supabase in flutterflow ?
Thanks a lot for your tutorials. I love them and I am really learning a lot. But I don't know why most tutorials are completely ignoring the Email Verification part which is very critical to any app. This should not be optional or something "extra". FlutterFlow cannot deal with Supabase Email Verification out-of-the-box and no one is explaining how to do this properly. Without Email Verification, Supabase and FlutterFlow are not suitable for production ready applications.
I couldn't agree more. It's very annoying and blocking. Some tutorials about email validation tried to get around the problem, but it's far from optimal. And the Flutterflow doc does not seem to be very optimistic: "Due to some Supabase auth behavior, you need to disable the email verification on the Supabase side. However, you can still add the email verification logic on your own in your app if you wish to."
Very good, thanks for your presentation. I was exploring it and I noticed that the only Auth provider available from FF for Supabase is EMAIL. Is there a simple way to use some or all the Auth providers offered by Supabase?
You are welcome. I will need to check but I believe that only email authentication is available at this current time but I was not looking for anything else during the setup and recording of the video. If this is the case I'm pretty confident that it will not be long before other options are available as the FF team are working closely with the Supabase team.
Great video, thanks for the detailed tutorial. Do you have to be on a paid version of FlutterFlow to be able to setup Supabase authentication? I have the free version and I am unable to see this option. Thanks!
Hey thanks. I have just checked this on one of my free accounts and I can see the Supabase option on the drop down menu within the Authentication option. I'm puzzled.
@@the_digitalpro Thanks for getting back to me, as it happens today I have the option! At least is there now. Keep up the good work.
Why you guys not doing how to setup google sign in.. No videos found in youtube for that..
This is currently not supported by FlutterFlow at the moment. Only Firebase Google Auth is supported.
@@the_digitalpro But it is possible to implement with edge functions. I think.
Hi very well explained but can you make a video for
1. Admin module and client module under one login screen if the use is admin it should redirect him to admin page and if client then client module
Also once Authorized from the firestore/Superbase by admin via the admin dashboard then only the client can login -> Firestore/super base-> Admin Dashboard -> users 1. Create /Send password etc basically the admin page for Firestone and supervise within the app from one login page users
2. Logged in users
->Delete users
Hello, Steve!
Congratulations on the tutorial. It helped me a lot!
However, I have a question:
I have a USERS table and a SKILLS table.
After the user registers, I want them to choose their SKILLS (which can be multiple).
I created a SKILLS_USER column in the USERS table and linked it to the ID of the SKILLS table.
But when I mark the SKILLS_USER column as an Array, Supabase doesn't allow me to create this column.
How can I establish a relationship so that each USER can have multiple SKILLS?
I think in your case, each user will select multiple skills and each skill will be with multiple users so you can create a third table "users skills" which will include user_id and skill_id, this table will manage many to many relationship.
Hi!
Thank you for your video.
I have a question.
How can I check if an email account already exists when registering again?
Flutterflow does not return any message stating this.
In Supabase it is already configured to not allow duplicate data.
Thank you so much!
Could you make one tutorial for supabase + flutterflow with graphQL integration. This would be a massive help for me and I believe many others too. I use xano because of its "addons" feature to be able to get information from many tables in 1 single api response. This would be possible in supabase using graphql. I want to move to supabase because of realtime feature which isnt there on xano and im unable to figure out graphql integration on supabase. If you could just make 1 tutorial on that, It would mean the world to me. Thanks a ton. :)
After authentication on reload app do not go to the authenticated page
Yes something is pretty odd here. The auth does actually work but spotted each time you do a reload in test it appears to sign you out. I'll investigate further.
Hello, thank you so much for your presentation. I have difficulties to enable password reset on supabase from flutterflow. It seems, after i run the Flutterflow Supabase Auth feature to reset password, supabase will send email with the link. However the link will lead to localhost url. Would be helpful if you can help to show how to reset password? Thank you
Hi. I do not believe, at this time, FlutterFlow and Supabase directly support's password resets. The only way to achieve this at present is to build a webpage to handle the change. I'll double check but I am pretty sure this cannot be done at the time of writing. As soon as it does become available i'll be right on it because its an essential feature!
Awesome Video. Can you please also suggest #Supabase Phone OTP authentication with #Flutterflow, It will be helpful Thanks
And to accept just account I give permission?
Being unfamiliar with both Firebase and Supabase before, what’s the big difference and who’s behind both systems?
Hey Jim. Thanks for your message. So Supabase is more structured as a relational database with clearly defined schemas (tables). So your data structure is pretty pre-determined. In Firebase (being a more no-sql solution) data is stored in JSON like documents which are organised in collections. These collections can run deep so for example collection within a collection. Technically you can just put what you want in collections (documents) which are not structured and require you to manage these rules yourself. Supabase is based upon PostgreSQL. Supabase does offer similar services to Firebase. Supabase's free tier is really quite generous which is great for growing apps. Remember Firebase has been around for longer so keep this in mind. I must say, being a oldy techy, I do relate more to Supabase. I'll cover more on the channel soon.
@@the_digitalpro Tx for the input on that. So it will depend more on the type of application you have in mind then. Would firebase offer more FF integration or is that equal? I like these short format videos as well. To the point!
Supabase has been a more recent addition to FlutterFlow and it's evolving. Firebase is more integrated at this particular time. It's starting to get pretty close in terms of feature set. If you are looking at making a choice right now as learning opportunity then perhaps Firebase would be more suited. There is more detail floating around about the use of Firebase than Supabase right now. But obviously keep a track of it. Thanks also for your feedback on the short format videos. I'll do my best but trying to cover all basis and learning levels.
Can't wait to say goodbye to Firebase!!! 🎉
This is a massive thing as new options are available pretty much off the shelf.
how to make supabase document search in flutterflow..?
Sure thank you. I have added this to my list of to do videos!
Is Google and other authentication supported yet?
Not yet but I hope the FF team are working on this. I wouldn't think it would be long though as this is quite key for many use cases.
Lol I've been stuck trying to figure out how to authenticate using supabase for weeks. Was it possible before this, just with extra steps?
No this feature has just been added this week. So many people are going to be happy as options have now opened up.
it was possible with some custom functions, tho this makes it way easier now.
Yes Bene sure a correction here on my term No. You are absolutely right it was possible previously with deeper integration but not very accessible to most. This really does bring it more front and centre for most.
I followed this tutorial to a T, and when I run the app in test mode, the gradient background only appears until I move my cursor, then it changes to white, and I cannot click on the sign up here.. It doesn't do anything for some reason. Can you help me figure out why it's not functioning? Thank you! (Browser is safari)
I got it to work, in firefox only. Safari it totally breaks. I had built most of it in firefox, switching to safari when I could not duplicate the password field in firefox. I then continued to build the rest in safari, and have been left with this issue!
I will try building in safari only, and see if it functions in test mode, in both browsers.
Hey Emory. Thanks for commenting. This is extremely odd. You should certainly not see this behaviour in Safari but I have also had the odd weird niggles outside of the regular chromium type browsers such as Chrome. Did you try Chrome by any chance?
@@the_digitalpro I deleted both projects in FF and SB, to restart building in Safari. Once I ran it in test mode it still didn't work. I logged back in using Firefox and it does work now! Do you know why this is the case? I have not tried Chrome, do you suggest building solely in Chrome?
@Emory Olsoff Hi Emory. I do not use Safari or Firefox for my FF development. I certainly very rarely experience any weird browser behaviour so on that basis I personally recommend Chrome.
@@the_digitalpro Good to know. Thank you for your videos and replies! I appreciate it a lot.
It does not work. 1 - Does not keep the User authenticated. close the app or press F5 and a new Login will always be necessary... 2 - Supabase Realtime does not work, even with the user authenticated, Supabase realtime does not work in FF...
Hi Geraldo. I do agree this is strange behaviour but I have not had chance to check if it is happening within an app on an actual device. There is likely a workaround using custom code to validate for the expiry of the token but not ideal. I'll reach out to the FF team to validate if this is known issue or just a strange behaviour within the test platform.
@@the_digitalpro Could you give me the contact of the FF team? I have some information and questions I would like to discuss with them...
I've tested it this evening and it does appear the token is being lost on reload within the TEST mode. I have reached out to my ambassador liaison to find out who I can channel this issue through to within the team specifically. I'll report back. In terms of general FF support this is currently only achieved through their community portal. Have you fielded your questions there?
Hi Geraldo. Just to let you know that the FF team have fixed the issue with keep logging in. All the best.
@@the_digitalpro Sim eu verifiquei. pena que o Real time ainda não Funciona...