#FlutterFlow + #Supabase - Building a Goals Tracking App + Episode 4

In this episode we continue our series on building a #FlutterFlow application using the powerful #Supabase as the backend. We continue our journey on hooking up Supabase with our FlutterFlow application by configuring the authentication. Next up with then start working on the UI to implement form validation to prevent obvious issues when our users are completing the form. This is always good practice. We then continue by hooking up our buttons to perform both Sign in and Create User account functions. At the end of this episode we will have a fully authentication ready application to the commence our build further.

If you love my content why not consider buying me a coffee, it's really appreciated:

00:00 Introduction
00:50 Location of Supabase config in FlutterFlow
02:15 Configuration of Supabase in FlutterFlow
03:45 Quick overview of the Login Page changes
04:54 Adding a validator to our Login Page
08:01 Adding an action to validate and sign in
11:34 Quick overview of the Create Account Page changes
12:36 Further updates to the Create Account Page
13:48 Adding further actions to valid and create account
15:45 Create page state variable to manage visibility
16:44 Adding the password mismatch error
18:56 Building our conditional password match actions
21:59 Navigate between pages
23:02 Creating an account and signing in!
25:41 Outro

_____

(official launch in September, but welcome to join today 😉)

🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.

[pierremusa]

Excellent content ! Keep going with Supabase !! 😊

[neanda]

amazing, thank you so much. these 2 technologies together are gonna change the game for building apps. I've tried many lo/no code apps and they were too niche or only half the picture. going through this tutorial is like these 2 have seriously completed the picture, and your tutorials are so good, thank you 🙏😀

[Koachie]

Hi Steve! Would it be possible for you to show how to set up the 'forgot password' process and what happens when a user tries to create an account when they already have an account?

[UzAir]

Hey at 15:50 the state management options is not there. Can you please help like where to find it? Thank you.

[ghst_itm]

I like the example of how to hook up that password mismatch text, coming from a normal coding background I find it relatively counter-intuitive - I'd just be looking for a way to manipulate the visibility parameter of that text widget directly, but FF doesn't seem to expose widget parameters in actions (in the UI at least, I guess you can with custom code maybe).

[lyshka]

Great video as always, very clear and comprehensive. I was just wondering if the extra work of creating the page state for the password mismatch message is necessary. When I put in the widget state of the "password" field is not equal to the widget state of "password confirm" field straight as the condition for conditional visibility it worked equally fine. In the action Editor I removed the condition and just added "Update Page State" without setting any fields. And the error message kept showing as long as both fields contained different passwords. Is it okay to do it this way or will I get performance issues along the way?

[stichlynch]

In case anyone else got stuck, my app didn't automatically go the home screen after account creation since my supabase default was set to require email verification which seems to be on by default. This needs to be turned off under Turn off Confirm email.

[SantiagoDigitalDesign]

Made it all the way through this episode perfectly except for the end when I checked Supabase for the user. Nothing is there. I did notice an error message that popped up saying "form validation is not available in Test Mode". Is this causing me to not see my user in Supabase?

Also, I did notice another message when setting up Actions on the Create button it said: Note that this action does not create a user row in Supabase table for you, but you can add an action to create one after the Supabase account has been created. Due to Supabase Auth behavior... etc etc.

Could this be why I am not seeing a user created in Supabase and if so, what additional action do we need to add?

Thanks a million!


Edit: Ok so I decided to come back later after dinner and now all of my test users showed up in my Supabase, yay! Now I can login or create an account, the only problem I'm experiencing is that the app kicks me right back to the login screen after a second of being on HomePage?

I download the clone from ep 5 to cross-check my actions and they're setup the same. Any idea what might cause that?

2nd edit: I just needed to sleep on this to resolve the issue :) Keep up the great content!

[DanVanDamme]

These tutorials are so well done! Thank you for sharing your knowledge! In the absence of supabase social auth natively in FF, is there any custom action code you can share with us to accomplish say a Google or Apple account authentication? Hopefully FF comes out soon with multiple social auth options natively.

[TanzerTel]

I don't see the authenticated user in supabase Authentication section. In video we see the user details in supabase. But I can sign in to the app without error. I am confused.

[alanb]

Followed along successfully until 'passwords mismatch' checking.
@18.34: setting condition for "passwords do not cannot set specific value to true, only specific value/from value are shown again.
Any idea whats wrong?

[GAMEOVER-fsgi]

Hello....Can I do the goals application via firebase

[jesperst]

Another great tutorial, weel done! A question: If I wanted to use Social Auth but still use Supabase as database (I prefer postgresql for databases), could I do something like this? Sorry if this is a silly question, I am not a backend person :) So Authenticate the user through Firebase, once authenticated, create an action in FF that creates a row for the user in the auth.users table using the Firebase UID. Is that something that could work or is this completely wrong approach? Many thanks in advance!

[jean]

Can you make a tutorial on how to make a widget selectable, for example users can only select a container from a list view

[crace]

can u try thunkable because the thunkable is can do it game or web or anything pls

[sansfishing]

I am having an issue. When and hit Get Schema, the Field Name of tasks are displayed on goals and vice versa. I have tried load to many time, but its not working.

[shuteopengco]

is it normal that no errors are showing when login credentials are wrong? Or even when you tried to signup with an existing email?