Expanding #Supabase User Registration Capabilities with #FlutterFlow

so as you probably know when you actually create an account using flutter flow within Super Bass using the native process you will find you can only actually create user details as far as an email address and an actual password but in this particular video and something that the community has been asking for for some time is how do you store additional details at the time that the user is actually creating a brand new account with inside a flutter flow and of course with inside a Super Bass so I'm going to show you one simple workaround that you can put in place that might be really really helpful if you are introducing this at the point that the user is actually creating an account or you're looking to introduce an onboarding screen for you to capture additional details with inside a Super Bass database so without further Ado let's get cracking so let me then walk you through the steps and the changes that you need to make with inside your flutter flow application so on the screen at the moment I've got this very very basic a create an account screen it's pretty well much vanilla it's out of the box with inside a flutter flow other than a little bit of styling that I've actually added on so let's now make some adjustments to the UI so on the left hand side what I want to do is I want to store a category I want the user to be able to choose a category after the confirmed parser but of course this can be anything you can capture some additional details such as their first name last name all that kind of stuff depending on what you what you want to do but in this example I'm just going to put a drop down in there okay so let me introduce a drop down on here and that will quickly then walk through the process there you go I've spared you the design but what I've done I've just basically just dropped a drop down uh widget actually onto the screen I configured it up on the right hand side I've got some options in there of editor and reviewer so of course the user can now choose that one thing that you that it would be a good idea now to do is actually put a form validator over this as well so just on the column I'm just going to right click here and I'm going to wrap the widget and I'm just going to choose the form validation option there as well so that at least and I'm just actually going to give my former name so I'm going to call this uh create use a form just like that and that allows me to then this go into this validation so I need an email address I need a password I'm just going to select the confirm password of course I need the category as well we want the user to make sure they complete all of these details before they hit the create account button so that's now all in place what we now need to do is we need to go into the create account and we now need to actually now just put the formatted data in there okay just to make sure that that takes hold so if we just go into the actions here hit the open here I'm just going to hit the little plus here add action and of course I'm just going to do a search for a validate form here just move that up to the top and of course on the validate form I'm just going to choose the create user form so we'll know that the form needs to be filled that will stop any further movement to the actual off um to actually create the account but what we'll do is we'll come back here very very shortly because there's some other little tweaks that we need to make so here we are now back in Super Bass and we need to make some changes to our profile table so if you um would like to follow along and get to where we are right now please see the previous video in my series regarding the profiles with inside Super Bass so this is right where we are um I've got I'm just literally on one uh table here called profile and I've got one row actually in there but I'm gonna need to create a brand new column okay so just choose the actual plus up here and I'm just going to call this one a category and I'm just going to scroll down here the data type this is going to be is just quite simply is going to be text so just choose text here and of course as you add more a custom fields of inside your uh your sort of login process you can add them in here as well so you can keep track of them so that's all that I need to do and that's fine just hit the save option my table will now get updated you can see now that I've got this this category column that now can be set with inside my profiles table and that's all that I need to do with inside a Super Bass let's head back over to Florida let's start hooking all of this up okay so now all of that is created we now want to keep a track of the registration process for our user and we also want to keep track of the category that's actually selected because in the way that this actually works with inside flutter flow out the boxes as soon as you hit the create account button you really got no way of kind of putting any custom logic or any custom process within that that's going to quite simply create the user account with inside the Super Bass database and then move you on to the authenticated page the landing page which in our case is our home page and that makes an assumption that our user is all registered and they are authenticated now of course we want to store more details during that process so what I'm going to do is let's create a custom data type you don't have to do this but I'm going to do this I'm in this particular example because I find a little bit more useful to shape a custom data type up that I can then apply to my application state so you'll see the benefits of that but but feel free to just use the app state if you wanted to so let's move over to the option in here on the left hand cycle data types and I'm going to create a brand new data type called a user just hit create now I've inside this user I'm now going to create one called is registration and this will just track um a Boolean indicator that will track whether the user is currently moving through the registration process okay which which is gonna is gonna be set to True which we're going to need to set to true so just hit create and then I'm going to add another field in here called a category this will just keep a track of the value from the drop down list that we set on the create page I just hit the string there just hit create and that's all that we need to do and of course if you would like to put more uh sort of widgets actually on that create page then please do that and then of course create more uh entries here more fields of inside the schema for you to keep a tab of those as well you're going to need to use those later in order to uh to sort of persist those back to the database okay so once you've got that then on the left hand side we can hit this particular option called App State because we now need to actually track this information we need a kind of a kind of keeper a tab of it okay so let's just keep let's just hit the add State variable here and I'm just going to create one called user and this is going to be of the the type data type and of course here I'm going to use the user uh sort of a data type that I just created so just hit create and that's all that we actually need to do so um let's now move over to Super Bass now let's now create this new field that we're going to create with inside our database that's going to hold the category that we've got created and set up within here and of course you could then add more sort of columns into your Super Bass table if you wanted to but I'm just going to do that now okay so now that we just made that schema change with inside Super Bass we now need to pull that information back down into flutter flow so just on the left hand side go to little car care and with inside the Super Bass section here on the left hand side hit on the get scheme option just hit yes and you'll see now that we've got some various details that's now just now appeared and here you can see the category has now just been added but of course if you created more columns you'll see more of those created in your own project so that's great once we've got that we're now in a good position where we can now start now hooking up the actual create user registration uh actual category here so with inside the create account uh sort of actions here just bring up the action flow editor and this is where we now need to actually add in an an updated application state with inside here so just hit the little plus against the validate form because we know that the form will be validated at this point so this is where we will now move in a more positive direction so of course here we just want to do the um the update App State to go to State Management here choose the update App State and we want to add the actual field here so choose the user this is what we just created with inside the application State and we want to then actually update the fields with inside here so just say update fields and then hit the add field here and you want to set the is registration because we're going through that process now we want to set this now to be actually true so let's just go down to constants here let's just choose a true here so we've moved into a true and then we want to add another field here and we're going to set the category and the category is going to be the value from the actual widget on the page that we're actually on so just hit the category option and that's all that we need to do so there those values are now set which is great and then of course now we're going to move on to the create account that will just happen as it normally should do and that's all that we need to worry about because what we're going to now do is with inside the actual home screen that the user will land on after the registration process we're going to put some Logic on there to check to see if the user is currently in a regime creation mode and then of course we can make a decision over what we're going to do at that particular point so let's just hit the close here and I think we're good let's now move over to the home page now let's add that logic in to handle that check so the scenario now that we're on the home page of course which means that once the user is actually authenticated or the application has created their account this is where they will arrive now we need to make some changes to this particular page that when they arrive here we need to check for that App State condition so just select the home page here at the very top move over to the actions let's bring up the action flow editor and now we need to add in a conditional action okay so just choose add conditional action and we're going to select conditions here say it's a single condition this is that first check that we need to make so the first value just choose that let's select that and we want to move into the App State and we're going to check the user app state that we created earlier now where it says available options just select that and say it's a data structure field and this will then allow us to have access to those custom fields that we created earlier so we're looking for this is registration options so just choose that hit confirm and we're going to say is this equal to true now of course this will be true when the user creates their account so that's great going to move in this positive direction down here so let's just make sure that we choose the value that we're looking for here we can just say a specific value here and then just say it's true so we're going to move in that direction and so the simple scenario that we're going to introduce into our application is if if this is a brand new registration then what we want to do is we then want to update the profile with inside our database we want to set the category to what is contained with inside the app state that we saved on the actual registration page okay so just hit the little plus here hit add action and of course at this point we're just going to go for Super Bass and we're going to say update row we're going to choose the table of course there's going to be profile that's what mine's called we're going on a match your row so this is where we're now going to match up the ID so just choose add filter we're going to say field name is ID which is the user ID and we're going to say is it actually equal to and then hit the little value we're going to say authenticated user because we know we're authenticated at this particular point we're going to choose a user ID so we get that match that we need and and then down here we just need to say set Fields hit add and we're going to move down just choose the row that we need here the actual the actual field sorry it's going to be called category the value of course is going to come from the App State so I'm going to go into the user that we created we're going to say available options we're going to get the data structure field we're going to select the field that we need which is category and of course that is what we are going to be setting so that's going to give us our update inside our database which is fantastic and then of course what we need to also do is we then as a final step we need to set the registration back to false because every time that we're going to land on this page in follow-up instances and running over application we know that the user registration is going to be full so it's just going to move down this sort of path where it's going to go to no run our application is just going to continue so just hit the little action plus here hit add action and we're just going to go to update uh or should I say should I State here makes it easy update App State we're going to say the add field we're going to go to user we're going to select the update type we're going to actually um sort of update the fields we're going to choose the add field and of course we're going to set is registration and we are going to set the value and of course that is going to be to false so move down to constants here and just choose false there so we're going to set that back just hit done of course you could clear the category out of this particular point if you wanted to but um in this case there's a very very simple scenario here now of course if you are adding more Fields as I said previously onto your registration page and of course you can then update more rows inside your inside your database but that's pretty good for our example here and just hit the close so I think we are looking good so let's now fire this up in test mode and let's actually see if our brand new user gets some uh gets a category set against their Rose let's give that a go now so here we are then running the application in test mode and you can see here that I've just pre-filled the screen with some basic details here on creating a brand new account and you can see here that I selected editor as one of the lists from one of the options from the list that we had in the ui's hit create account that's great so that's looking good our account is being created but the question is over in Super Bass do we have those details saved and we certainly do there it is editor has now been created so of course you can now use this um in further use cases with inside your application but certainly we are now persisting those values at the time that the user is created let me quickly pop over the flutter flow and just explain another scenario which might be of interest to you so one common scenario with inside applications when a user registers for the first time is it once their actual account has been created they could enter Then an onboarding stage so instead of actually coming to the home page and actually going into the uh the actual database and actually updating these particular details at this point you don't actually need to do this here what you could do is you could actually navigate the user off so if the user registration is actually true navigate the user to a onboarding screen which could then be used to capture more details from the user and of course at the end of those screens you could then actually then make those updates back to the database at that particular time and of course then close that screen down and move the users back to the home screen but obviously making sure that you do make sure the user registration is also then turned off so I just wanted to explain that because that could be a useful addition to your application if you're interested in putting an onboarding screen in place so that's pretty well much it for this hopefully hopefully you found that useful in walking through and setting this up there we go I hope you enjoyed this video of course hopefully in the future Super Bass and flutter flow will get even more support in terms of doing this kind of stuff more direct with inside photo flow but at the moment that's the best that we can do there's probably other techniques of course this is just one as a good example if you do like these type of videos and you do love the no code space then please become part of the community and subscribe to the channel and more importantly what really helps the channel out of course is please do like this video as well so lots of content on flutterflow on my channel and of course there is going to be further no code um videos as well coming in the not too a distant future so thanks for watching and I'll see you the next one hello [Music]

Channel: The Digital Pro's NoCode Academy

Views: 3,318

Keywords: android app development, flutterflow, flutterflow crashcourse, flutterflow marketplace, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, ios app development, learn flutterflow, no code tutorial, nocode tutorial, nocode tutorial for beginners, supabase tutorial, supabase rls, supabase auth, supabase flutterflow, supabase row level security, supabase

Id: dobTSi6EYBU

Length: 15min 22sec (922 seconds)

Published: Tue Jul 11 2023