Setting up Supabase Auth with Flutter

hi I'm Brad cyert and I teach software development topics on my YouTube channel and today we're actually handling a request I had someone reached out on LinkedIn to me uh earlier today and they asked if I could do a tutorial on uh putting together authentication with superbase um for flutter so we're going to do that today uh let's get started I have started a new project already um and I have went ahead and installed the super base flutter plug-in uh so if you haven't yet you can just run um flutter pub at superbase flutter uh I'm using flutter version manager so there's there's an fvm in front of that but if you're not using flutter version manager don't type the fvm um it'll add this to your package and I know sorry it's a little weird not having me do this on camera but the first time I run my flutter application my computer comes to a crawl if I excuse me if I am streaming or recording uh so just trying to avoid that for all of us uh like it might be doing right now okay so let's change some stuff right so we don't want this homepage crap we can get rid of this uh let's go and get rid of all of this and for home we're going to set this to a scaffold um we're going to give this an app bar just to give it a little bit of space at the top okay we'll give this a body I'm going to call it sign up uh we'll create a widget called signup here in just a second um actually let's go and do that now so we can hit new file sign up. Dart uh I want to make this a state full widget we're going to call it sign up um and the reason we want to make it a state full widget is because we're going to use text editing controllers here in just a second so we have a column some children uh we're going to say we want aex text field controller is equal to email controller um and then we want another text field and this one's going to have a controller set to password controller we haven't created these yet we'll create them in just a second and then we want like a material button oops sorry material button with an onpress listener and this onpress listener is going to actually do the thing it's going to log in our user um and then we want to give this a child with some text uh and then this will be something like sign up okay let's add our controllers really quick so we can say final um email controller is equal to text editing controller great we can add another one here for password controller now these are bound up that's pretty good this gives us a really good start let's go ahead and run this make sure oh our main. Dart needs to be saved so let's come back here import sign up go ahead and save it make sure okay cool that looks good enough uh you can obviously design this and make this better on your own um in your own time but for now this should work uh so one thing we want to do is we'll come back to this text field and I'll just mention obscure text if we set this to true it will prevent people from being able to read this value which is a good practice for passwords um now let's talk about setting up super base right so if we come into uh signup we can import package superbase flutter and then we want package superbase flutter superbase flutter. Dart uh we want to get a handle on our superbase instance so we can say something like super base base. instance. client okay and assign that to superbase here uh now we can come down to our material button and do something like superbase do off. sign up um password give them an email too since we have that and the way we're going to get these values are we're going to just take them out of the text editing controller right so we have our password controller and our email controller we'll take the text value for both of those we'll call sign up uh this returns a future so we need to make this an async if we want to use that um so we'll make this an async function final um off response is equal to a wait superbase off okay my uh language server is running a little slow right now apparently interesting let's try that um that should be fine though and then we can actually use this off response right so if we're here we can say something like let's do a scaffold messenger. of context do show snack bar let's do a new snack bar content is equal to text and we'll say something like uh logged in and in our case we have an email address that we're requiring so we can use the email right so we can say auth response. user do email okay uh and then email oh the uh user could be null right am I reading that right because the receiver can be null oh okay sorry so email could be null right oh user could be null they both could be null that's fine um there are a couple warnings here build context is shouldn't be used across gaps so let's go and pull this out we'll make this a scaffold messenger final SM is scaffold messenger of context uh little quick fix for that um same thing with like dialogues and all sort Navigators all sorts of things that you would look up via a context uh if you use it in weight you probably should put those before that okay we're almost done that's how easy this is so if we come back to our main. Dart we need to make a couple changes here we want to you know what uh we want widget binding widget widgets flutter binding do insure initialized I never remember the name of that and then we want to await super base we'll have to make this async if we want to use that a weit so it's superbase do initialize and then we need two things we need a URL and an anonymous key okay uh so let's go get those values right so if we let me just make sure that I'm still streaming my browser okay um we can go to if you log into superbase you'll see something like this uh you might have to create a new project I created one called superbase off tutorial I've already kind of poked around to this to make sure that this would work as we expected um you can hit on settings down here go to API and this is going to give you your url so we'll copy this value we'll take that back to VSS code we'll paste it in the URL section we'll come back to our browser we'll copy our Anonymous key right here it says a non public this is the one you want do not use your service role uh anything that is sent to a client via like a mobile APK an IPA an app bundle whatever you should consider it compromised um don't send secret Keys through you don't hardcode secret keys in your application don't even put secret keys in your application find a way to avoid them okay so um this ensures that our widget flutter binding is initialized um I know that's exactly what it says so that sounds a little redundant the reason I'm mentioning that you have to ensure initialized before making certain calls like initializing super base in this case uh run app will call this for you if it's not already been called um so in our case we are calling this right out here uh so we can do these things before we run our application so now that we've hit this point we can go ahead and hit restart and we have something like brad. cypr plus [e-mail] uh and then some arbitrary password we're going to hit sign up we should see a scaffold Messenger right down here logged in brad. Cy plus [e-mail] we can come back to superbase click on authentication over here you can see there's our new user it used an email to sign up here's when it was created we have not received verification for that user so I've got an email that is asking me to verify my account here's the user ID you should use this value if you're doing stuff with rowle security for that user um it's also like if you have data and you want to attach it to a user via relational database stuff uh use this user ID that is probably what you want your foreign key to be not the email address not the phone number because as it's fairly obvious the phone number is not required emails technically not required um display name's not required so yeah hook on to the ID because that's going to be your best bet um I think that's about it so if you were to do a login it's the exact same thing except instead of calling sign up here you would call login right off well let's check I thought it was login set session sign up sign out oh sign in sorry sign in with password not login U but yeah you would call that instead of sign up and that would get you everything you need to do uh it's also worth mentioning that there are a couple different options with uh super base so you can sign up with an email and password you can sign up with a onetime password so you would just use an email and then superbase would email that individual a one-time code and they would enter that onetime code and it's a little bit more complicated but this is the standard email password flow that you could use with super base um I do think they have a couple other options uh that you could use so I think they have like social providers that you could sign in with as well if that's that's your cup of tea um and then additionally superbase itself has so much more than just authentication in fact they actually started as like a a postgress on steroids kind of solution um I've used them for a couple projects mostly as as postgress on steroids and uh it's been really really great so so it was kind of cool to do another video for them uh well for a person who wanted to learn more about super base um but yeah check them out they do a lot of really great things they're free to get started which is really nice and if you ever wanted a sequel um alternative to Firebase uh superp base is your team so postgress all over the place authentication um they have storage uh database Edge functions real time all sorts really great things um they've if AI is your thing they've baked AI into their um table experience their their postest table experience which is great for someone like me because SQL is not my strong suit so I can ask the AI like hey what does this query do um is this safe to run that type of stuff uh or what are what are the potential potential consequences of running this query stuff that I probably should be a little more comfortable with but it never hurts to have someone or something to ask okay that'll be it for this video uh hopefully this was helpful we got through this pretty quick super base off so easy to use so is Firebase off and I know there are other options but this one hopefully is a little bit more helpful especially for larger projects or things that want to do things outside of the constraints of fir store I think that's about it have a great day

Channel: Brad Cypert

Views: 1,110

Keywords:

Id: aayadfxp-Gg

Length: 12min 21sec (741 seconds)

Published: Fri Dec 29 2023