How to Set Up @Supabase Authentication in FlutterFlow

in this video I'm going to show you how to set up Super Bass auth with flutter flow also we're going to talk about how to structure your user tables and how to properly link tables together so like if you have a user who has posts how are those connected together okay so we're going to start in Super Bass and I've signed into my account and I'm going to create a new project I'm going to call this poster because you can post password select a region where most of your users are going to be and create a new project now this will take a minute to create and that's because Super Bass isn't just a database but a whole back end so when it's setting up this project it's setting up multiple tables authentication and API endpoints okay beautiful so let's go over on this left side to this table editor right here so here's obviously where you create a new table but I want to look in here for a second to sort of understand the structure of what's going on here in this drop down menu you can see a bunch of schemas and if you're not familiar with that term you can think of them as folders they're folders for your tables they're how you organize your different tables in your projects the tables that actually have the data in them and this is helpful because you have different purposes or use cases for these different tables so we have a bunch of different tables that are automatically set up by Super Bass to handle authentication okay so how are we going to structure our tables well we're going to have a table for posts and we're going to need a table for users well actually we need two tables for users and that's because one is going to handle our authentication and the other one we'll create in this public schema that will have more public facing data so the security rules will be more opened up now why would you want that to be like don't you want things secure well yes but if you think about it on an app like Twitter for instance you have certain user information that's more public like someone's username and their profile picture those are attached to the users but they're not private information whereas this other more secure use users table inside the auth will store things like an encrypted password that should be super secure and this is a common pattern where you'll have two user tables okay so let's make our user table first so we've got a new table we're going to call this users we're going to turn off row level security these are just the security rules for who can access this table and when they access it what can they do now you'll want to set these up properly before your app goes live but we just want to set this up quickly right now so we can turn this off now when you scroll down here this is where we set up the structure or the columns in our table now if you're migrating from somewhere else you can come over here and import that data from a spreadsheet or just paste the text in but we're going to set it up manually so we kind of understand how this is structured so first we've just got the name of our column like the header then we've got the type of data that's going to be in here next we've got a default value and this will be the value that is written when no data is entered so normally you're going to have a value here so for instance each row like a user will have data so for instance they would have a first name and a last name and an email that'll come in when they sign up but often you'll have optional values so for instance maybe in your app you don't have to provide a first name that's where this default value comes in what do you want the value when no value is provided now these are conditional upon what data type you have set up here so we have this Now function available to us because this is a timestamp and you can look at this link here to see all the functions you have available to you so for instance if we've got a text type say a first name and we add in text right here you can see that we've got the options of null or an empty string or the text functions you have available to you from postgres next you have an option to set whether this is the primary key that is the main unique value to identify this row this is automatically set up with an ID and you can add in another one if you want a composite key but we're just going to leave it at its default next you have some extra options whether you want the value to be nullable that is it can accept a null value or not whether you want to enforce uniqueness and whether the value is an array so multiple values okay so what do we need here well we've got a first name and let's add in a last name going to be of type text and set that to null and we're going to add in an email which is also going to be of type text and we're almost done because while this structure is good this user's table has no relationship to that authorization users table that is the table that's used when they sign in and we of course want these to be connected because for instance when a user signs in we want them to be able to see stuff from their account like their posts but right now these two tables are unrelated and the way you relate or link to tables is by a foreign key which is this link icon right here and what column do we want linked well you might think we have this email but you don't want to do that because your foreign key has to be a unique value and if we were to set up the foreign key with an email now of course Super Bass would let us do this but if it did you could have two people sign up with the same email instead we're going to use the ID so just click on that icon and then select the schema that you want to see the tables we want the auth and we want the users table next you want to set what column you want linked to and we're just going to use the ID there finally we've got this action option that we want to set and what this is saying is that when the parent so the parent is the thing we're linking to when that is deleted what do we want to do with the children and what we're setting up right now is the child so if Tom has a row here and that gets deleted what do we want to do with Tom's user row here and we've got a couple options so do nothing set it to null set it back to whatever the default was we set up here restricted which means that the delete operation on the parent table will fail if there are any corresponding rows in a child table this is useful when you want to ensure that there are no orphaned rows in the child table and finally Cascade which means when the parent is deleted all of the children references will be deleted as well and that's what we want because if that main authorization user account is deleted they're probably probably deleting the whole account because they couldn't sign in anymore okay that sounds beautiful and we can just create those and there it is we've got our table set up ready to receive data now this is just giving us another warning about how our security rules are wide open and we can just dismiss that for now okay so our users table is set up it's linked to our authorization users table so now let's just set up our post table so we're going to need a new table it's going to be our posts once again turn off row level security and we're going to keep those defaults and we're just going to need a title which is going to be a text and a body of the post which is also going to be a text and then finally we need to attach this to a user so once again we need a foreign key so we're going to add this we're going to say user and we're going to attach it to our users table we just created and we want to reference that ID and once again if that user's record is deleted what do we want to do with their posts well we probably want to delete those too 2 so we're going to say Cascade beautiful and that's set up awesome so we've got both of our tables set up and the last thing we need to do in Super Bass is to come over into our authentication here go to Providers and email which is the provider that we're using right now and just turn off confirmation email and secure email change this just has to do with how the integration with flutter flow works so this will Auto confirm the accounts if you want to retain that confirmation workflow where they sign up for account they get a confirmation email and then they have to confirm it you can set up that logic inside flutter flow okay so just scroll down and save that and we are all set up here so let's jump into flutter flow and set this all off all right so I've set up a simple project here just with template pages and I've got three pages I've got a sign up page where our user is going to create an account then I've got a feed page that's going to show the posts and then I've got a post where you can compose and then post that post okay so what do we need to do now well we need to do three things first we need to connect to Super Bass second we need to set up authentication and third we need to set up the logic so like when you press this button it'll send this post to Super Bass and when you press the create account button it actually creates account in Super Bass okay so come over here to Icon and scroll down to Integrations click on Super Bass and just enable Super Bass and we're going to need two things we're going to need the URL and the anonymous key so jump back over to Super Bass and come into the gear right here and API and this first one is the URL so grab that and put that in then you want to grab this key right here copy that and paste that in and get schema beautiful and there are our two tables that we set up with this little icon for what our primary key is we've got our field names we've got the data types that flutter flow is treating these as and then we've got the corresponding postgres type here beautiful and we come into the post here and we can see once again everything's come in correctly and we even have this icon for a foreign key all right so we're connected to Super Bass First Step done now come over here to authentication click it on in this drop down menu select Super Bass and specify which is the entry page that is before the user is signed in where do you want them to go and then once they're logged in where do you want them to go so we want them to sign up and then just for our testing purposes let's go to the Post page all right great two out of steps done in under a minute now we just have to set up the logic so let's start in this sign up page so come over here to that widget tree and to our sign up page and let's go to this big fat get started button and come over here to the second tab which is where you set up your logic in the action flow editor and let's just add an action and you can search for Super Bass authentication here we want to create an account choose our provider we've only set up email for now so that's what we want and then we just have to bind these to the values on the page so we can come in here and it auto recognizes and we want the email address and we need a password field so we've got that password and the confirmation and that's this password confirm and if you're wondering where these are coming from they're coming from the actual names of these widgets here so if I were to click in you can edit that up here password confirm beautiful and then you scroll down and this text right here is saying what we already talked about about having two user tables so this is going to make a record and that authentication users table we have to make another action to write in that other table so let me show you how to do that so if you have more than one action set up here you just want to open this up so you get some more space okay so we want to add another action and it's going to be super bass again but this time it's not authentication because we're just doing a simple insertion into a row table so we want insert row select the table so this is reading from that connection from Super Bass and we want users and then we specify what columns we want set right here and flutter flow will automatically recognize these so you don't have to specify them okay that's great so the first one is ID and remember we set this up as a foreign key so this ID should be the ID from the auth users account that we set up okay so how do we get this so we come in here to our bind variable and because in the Last Action we just authenticated our user we can twirl this open and see we've got that user ID available to us so that's what we want beautiful so we've got this created at time and we can just come in here and use this little utility function we've got in our Global properties the current time and close that up first name will be coming from that text field on our page so it's going to be coming from a widget so let's look inside this widget State and we got a first name beautiful the last last name same thing from a widget State our last name and finally our email once again same thing email wonderful so let's close these up and then the last thing we want to do is after we've created these two records what do we want to do with the user we don't just stay on the page we want to send them over to that post page okay great all right let's test this out confirm that it's working here and then see that data come in in Super Bass okay come up here and test all right beautiful there we are and let's create an account so I'm just going to create my personal account here beautiful there we're in all right let's jump over to Super Bass to see this data come in so we can come over to our authentication here and look at that there I am and then let's go look over in our tables here into our users and beautiful there I am and you can see if you double click on this that it's connected correctly so now we're viewing the record referenced with our foreign key here in our auth users table wonderful all right lastly let's set up the logic so that our user can post okay so let's go over to this post page and we're gonna go to this post Now button and set up that logic and what are we going to want to do when we post well we are going to want to insert a row in our database it's going to be to our posts table so let's set up these fields here and the first one is going to be the ID now we actually don't want to set this ID because this is the primary key in Super Bass and so Super Bass handles creating unique values for this ID so we don't want to handle it ourselves now if you do want to handle this in your app you're more than welcome to set this but we want Super Bass to handle that okay next we've got created at which is the same thing as before this nice utility function and once again these are just coming from widget States so we've got our title and we've got our body wonderful and then lastly we've got our foreign key link to our user which once again is from our authenticated user beautiful and then after they post what we want them to do well why don't we send them over to the feed so we can confirm in here that this is actually working okay so that sounds good so let's need another action here a quick navigate action or go into the feed page and then we go over to the feed page and we actually have to connect this to Superbass so we're going to come into our column right here we're going to want to get a back end call here to Super Bass we want our posts table and let's just show everything for now this is just telling us that we're going to generate children from that call that's wonderful and now let's just bind the values so here in our title we're going to bind that to our title and to our body we're going to bind that to our body 1 wonderful all right let's test this out let's make this post and post look at that beautiful so let's jump into back into Super Bass and there's our one post and that's how easy it is to set up Super Bass off in flutter flow let us know if you have any questions below or any other videos you want to see us make and we'll see you in the next video

Channel: FlutterFlow

Views: 20,011

Keywords: No Code App, FlutterFlow App Builder, No Code App Builder, Supabase Authentication, FlutterFlow Tutorial, User Auth Setup, Supabase FlutterFlow, Supabase Tutorial, FlutterFlow Authentication, Secure App Development, Sign In Sign Up, Mobile App Development, Flutter Development, Supabase Integration, Firebase Alternative, Backend Development, App Security, Custom Authentication, Learn Supabase, Learn FlutterFlow, Web App Tutorial, Mobile App Tutorial, User Auth Tips

Id: tL-sLPfWzVE

Length: 16min 5sec (965 seconds)

Published: Thu Apr 27 2023