#Supabase User Profile Creation on App Sign-up - Full walkthrough

foreign [Music] so welcome back to another Super Bass video in this particular episode what we're going to do is we're going to create a profiles table with inside our Super Bass project and what that means is it means that when a user actually registers and creates their account with inside a super base we're going to create a profile for them straight away that's going to allow you to then extend that to container further details depending on what use case it is for your particular application we're also going to implement row level security as well we're going to make sure that only authenticated users and this specific user can actually update that data as well and of course I'll use photo flow here as an example but you can use any front-end stack for this the same rules apply so without further Ado let's get cracking so the idea with inside my flowflow project is that we are creating an account successfully of course we're actually creating the user with inside Super Bass But what I really would like to do is I would like to actually create an entry with inside a profile table which I can then add more profile level information at a future point with inside my application so what we're going to do is we are going to make some changes we're inside Super Bass to make all of that happen so that's where the action is and then we'll come back to flutter flow very very shortly where I will demonstrate how all of that works so let's go to Super Bass now So within one of my previous videos on row level security within Super Bass this is exactly where I was we literally had a single post table with inside our database we now need to create a brand new table called profile let's now do that with inside the actual table editor hit the new table option up the top here just type in profile we're going to take off row level security just for the moment okay we'll come back to that shortly and then down here we now need to create some additional columns for our actual table itself so we're going to put in here one called display name and then that's going to be a type text it's just going to contain some simple attacks there hit add column we're also going to put email in here as well because it'll be useful to actually include the email address of our user with inside the actual profile table and of course you can add more columns in here as your application grows or whatever you need to put in there you can go ahead and do that we do need to make some other changes though okay at the moment the ID is currently just a primary key indicators to start one two three four Etc we need to change it we want our ID to be our user ID that actually will be part of this record okay and it's going to be unique so it's great for a primary key so we're going to keep an idea here we're just going to change the type though to uuid here so just choose a uuid and we now need to create an actual foreign key relationship we need to connect our our user with inside a user's table up to this particular table itself here so of course if you need to learn more about sort of foreign key relationships please do go and have a look at the Super Bass documentation just hit the little option up here the little um sort of Link we need to choose a schema so choose the off schema and then within the table select we need to choose and just scroll down here to the actual users okay and of course the a column that we're now trying to link is actually going to be the ID so it's the it's got the uuid type but it's ID with inside this particular table so just choose that and of course that's all that we actually need to do hit save and then of course we're now good as gold to then hit the save on here as well and hopefully fingers crossed our table should be created for us very good we've got the table all created so we're in a good place so let's move on to the next bit so next up then now we've actually got our profile table created we need to find a way to actually create some profile data something needs to happen with inside the database to add an entry into this profile table so of course that's going to happen when the user actually registers with inside our applications because what will happen is is the user will be created with inside a super base but at that point that that user is registered we're going to also want to create the entry with inside the profile table that then sets us up nicely with inside our own application to then manipulate the data with inside that particular profile or table so we now need to configure up a particular function and that function will be triggered by a trigger which will then happen and of course our record will then be created so let's now go and create that function now with inside the Super Bass project so let's now create our new function move over to the left hand side choose a database go to functions and we're going to want to hit this button here called create a new function just select that now at the top here we now need to give it a name so we're going to call this create your profile for new user the schema is going to remain a public and the return type is going to be of type A trigger okay so just move down now this is where we now need to focus our attention on the actual definition itself this is where we need to describe exactly what we want this function to actually do so of course in postgres here in Super Bass we need to always start with a begin and we always need to end with an end and inside here this is where we're now going to put our key details so we're going to say insert into okay so we're going to insert into this particular table called public dot profile we're going to do an Open Bracket if that's space there I'm going to say ID and I'm also going to say email okay like that hit a return here and I'm going to say values and these are the actual value use that we're going to insert so of course new is the database record that we've actually got at this particular stage because of course the insert is going to actually happen after the actual user has actually been created with inside the users table Okay so we've got hold of that so we've got a hold of the ID and then we also now need to say new DOT email to get access to the actual email address as well so just a little semicolon at the end of that on the values and then down here we just need to Simply say return and new so just going to sort of continue the uh the actual function of that particular stage so quite simply then we're just going to insert into the into our profiles table with the ID of the user this is the user ID and the email address and of course values are just specifying them in the correct order you just need to make sure that these are actually in order here and return you and that's all that we need to do here now we just need to just go down here now a few extra Little Steps we need to go to show advanced settings and just down here we need to make a little tweak just down here so these are all the uh all the same that's no problem at all but we need to choose um the security Define okay so again please do refer back to the documentation for uh more sort of deeper dive information into this particular section here but if you had security and vocal set then you'll probably find that actually your database record wouldn't be created so just make sure that you do security definer now that's all that we need to do for our function just hit confirm and fingers cross it will be created which it is so of course it's great that we've got a function the function needs to be invoked and this is where we now need to then focus our attention on actually creating the trigger so let's hop over and let's work on the trigger now okay so let's move over to the triggers option here choose a triggers with inside the database section don't worry about these particular ones that's actually already set by the system we're not really worried about them hit the create a new trigger up here let's just put a name in here of create profile on Startup now the table that we need to actually create the trigger on is of course going to be the users table okay so when something happens which in our case is going to be an insert of a brand new record that's the table that we're looking for okay so just select that scroll down to the bottom here and you'll see one called users auth just choose that and of course you need to check the insert because it's any operation that is related to an insert here we're going to do the trigger now um the trigger type is going to be after the event so actually the user is going to be created with inside the database and then of course once that's created we're going to get a hold of that particular record and of course we want to make sure that we now actually call the function actually after that user has been creative inside the users table now the orientation here we need to change to row and then down here we actually now need to choose the actual trigger that we're going to sort of kick off and of course it's going to be the create profile for a new user just choose that and then that is all that we need to do just hit the confirm and we should see there that our trigger is now being called that is fantastic let's now go and test this out with inside Super Bass to see if we actually get a profile record created with inside our table with inside uh Super Bass directly by creating the user within Super Bass let's go do that now so all we've got to do is go over to the authentication option here on the left hand side we've got users already selected up here you can see I've got no users in my database at all if I go to add user go to create a new user and I'm just going to type in here the digital Pro at outlook.com I'm just going to put any old password in here one two three four five six just for good measure just say create user and that is all looking good for us it looks like we've got our user created now the question is is have we got our sort of profile created so let's go to the actual table editor let's go to profile Kaboom there we go we got our user ID which is now our primary keyboard inside our database we've got the email address and we've got a timestamp here of when that user is created so excellent that's perfect we've got everything in place now of course in terms of actually causing that you know making that trigger to actually do what we wanted to do let's now move on to the next bit now and focus our attention on actually locking down these particular database tables let's go and do that now so if you've not seen my previous video with inside my channel on actual row level security with inside Super Bass please do go and check that video it's got lots of good information in there on securing your database using row level security but we're gonna quickly introduce that in this particular video as well so I hope you will find this of interest of course our profile table is great our post tables inside this particular database is all locked down using row level security but our profile table is not we at this moment in time have a very open table of course if somebody was to kind of get hold of our our sort of our keys our API keys they can actually invoke our database via an API and they can pull down information we don't want that to happen we only want authenticated users and certainly more importantly we only want the actual user of themselves to actually only access the data that they're entitled to see of course which was based on the user ID so we now need to now put some policies in place we need to enable Road level security first but then we're going to implement some policies on our profile table so let's go and quickly do that so here we are on the profile table we just need to quite simply click up here and say RLS is not enabled just choose that of course and then we're going to say enable RLS and just hit confirm so we now know that our database table right now is completely locked up okay we can't now publicly access the information sort of inside it okay so we now need to open up to certain individuals which in our case is going to be our users okay so what we need to do is we need to actually create some policies now for this particular profile table the first policy that we're going to actually create is going to be more around accessing just from a more read-only perspective this particular date of inside this table so just choose the new policy option at the top right here for the kind of things we don't use the template in this particular case here we just need to put a a new sort of title in here I'm going to say can only view own profile data of course the allowed operation is going to be a selected just going to be a query into that particular database we don't need to make any changes here but we do need to put this using expression in and let me just paste something in here and I'll just talk you through it okay so if you've seen my previous video on row level security I really did go into quite some depth actually on what all this means but just quite simply in this particular video and we've got this JWT token this kind of this secure token that is passed in on the request actually into our database okay now with inside that we've actually got a value in there which actually contains the user ID okay which is Tech so this is what this sub text is okay it's a piece of text it's sub uh kind of the sort of the name with inside that JWT token that we're lifting out so we actually have the user ID passed into this particular point and we're saying here it does it equal the ID within this particular database table so of course if you remember when we create our policies at uh sorry our our profile table we actually had that primary key called ID so here what we're doing is we're just saying is the token that with the user ID passed in matching the ID the primary key of this particular table of course in our case that would be true so this will return back a true which means that the uh the operation is now allowed with inside this particular table so this is all that we need to do so if I just hit the review option here this will just give you a bit of an overview of the statement that's actually going to be executed with inside Super Bass hit the save policy and everything should be golden for us we've now got that policy so our profile table is a net is now allowing select operations for that particular user on this particular table okay so that so certainly we have a record there with the ID then that should be returned back to the user so really good from that perspective but of course select is not it's not enough for us we need to also provide the ability for our users to actually update the data that they're entitled to update as well so of course um because his row automatically gets created when a new user registers in our application we're going to want to update the the data of inside that that database table so you might want to update the display name or anything like that so of course that's going to be linked via the actual user ID so we need now need to create a brand new policy so choose new policy up here choose the option down the bottom here and of course what we're going to do is just going to put another name in here now so it can only update own profile data of course now we just need to choose the update option and then with down inside these using Expressions we're just going to put basically the same thing in there again as we did previously so we got the same statement in there we've got the uh we've got the just the check there to make sure that the IDS match up with the uh the actual token that's actually passed in just hit the review here just hit the save policy and that is created successfully for so let's now test this out now I'm going to go over the flutter flow now to actually test this out with inside our updated project let's go and do that now so here I am in run mode with inside a flutter flow project this is just a straightforward um pretty well much almost out of the box sort of sign up screen with inside a flutter flow here I'll just keep some details in there as a new user let's hit the create account option magic our account has been created let's flip over to a super base there we can see the row is just landed with inside our profiles table which is fantastic now I want to update this display name here so I'll just put that in here really just as a quick exercise inside our project to actually do that so I've got this option down the bottom here called a profile just like that I've got this very very simple profile screen that just loads up I'm just going to type in my name here Steve and then hit the little option here to save it if I go back into the database you can see now the display name has now been added so of course as I said on the almost at the beginning of the video you can create as many columns as you like now with inside this profile table depending on what your use cases with inside your application of course um so that's fantastic so just as a quick bonus at the time of recording flutter flow itself does not support any kind of the social media logins but if you're implementing these features with inside Super Bass for your own project that is maybe authenticating and signing up users via social media platform what you can also do is there's a little tweak you can make to the actual function that we've got here where you should be able to then pull in the actual uh the the user name actually as the display name actually when the user actually creates their user account okay and the way that you do that is if you just go actually in and actually edit the actual function itself we can make a little change here we can say display underscore name like that and then on one of the values if you just do a little comma here and then you paste this into it as well you can say that the raw user metadata is actually then is actually then pointing to the actual username is itself now chances are that actually with inside the actual uh the the users table there's going to be some raw data some raw Json data that you can actually hook onto and that's called raw user metadata now with inside that it's highly likely that you're actually going to have the username of the actual user so what you can do is you can actually put that in here that will actually then pass that across as the display name with inside your profile table now of course I'm a flutter flow user I primarily use a Super Bass within flutterfly of course but that might be a really handy technique at the time of recording if you're using this in other sort of platforms but of course um this would also come into a fruition when flutter flow does actually support social media logins as well so just a little quick tip there that you might want to include in your own projects just hit confirm and that should all update for us and um that should be good to go and of course you can put that in there right now it won't have any effect with inside your project it will probably just put an uh it would just be null so um don't worry too much about that um but that's pretty well much it there you go thank you for watching this particular episode of course if you are interested in the flutterflow project please do check the link in the description of course you're going to make sure that if you clone that particular project you're going to want to make sure you pass your API key and all that kind of stuff into flutter flow and of course but you want to bring in the actual schema as well and once that's actually creative inside a Super Bass so of course if you love The no code space and you love watching these type of walkthrough videos I love to have you part of the community please do subscribe to my channel and most importantly if you're watching this video please do hit the like button I really do appreciate your likes on the video gets out to The Wider Community who will also then enjoy this content so until the next video I'll see you soon thank you foreign [Music]

Channel: The Digital Pro's NoCode Academy

Views: 6,522

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, jwt, json web token, supabase triggers, supabase, supabase authentication

Id: efNX5x7O0cY

Length: 18min 17sec (1097 seconds)

Published: Tue Jul 04 2023