Flutter & Supabase (Open-Source Firebase Alternative) - Authentication - Part 2

hey everyone welcome back to this flutter and super bass series let's continue on to work on the authentication um if you haven't watched that last video we set up the super bass client uh we get our super superbase url superbase key from our project settings in superbase.io um and then we set up some basic get logic to query the api and get the movies so i'll link that down below if you haven't seen that yet you are going to want to check that out first but today we're going to be working on the authentication piece so we can go ahead and jump into yeah authentication tab right here and um i guess this is all the settings that you can enable so we are not going to do any of the oauth providers or and no none of the external ones we're just going to do the basic uh email sign up and log in uh here you have templates that you can pre-configure that way for example if you want to send your email confirmation you can do some html here to configure what that email looks like for the user i'm guessing this is kind of like a built-in parameter and for go through the library that superbase is using for authentication so you probably don't want to change this right here but you can probably change the rest of the email template maybe add your logo or whatever else you want to do same thing for these other ones down here this is for the i think this is for the row level security policies for your tables so this is our movie stable that we created last time this is a profiles table that i was kind of playing around with and then this is the users tab right now we have no users but it's kind of neat that they have this little invite here pretty again pretty similar to firebase they're kind of trying to keep it consistent and i really like that so we're not going to do this we're going to actually set it up in code so as always we can go down to the api tab and look at the documentations for authentication so this is just the same as we did last time setting up the client and then oh i guess that's it for that um we can probably yep so user management so here's some of the sample code that they give you for sign up login and then we're not going to do the login with magic link or the third party oauth we're just gonna do the basic user sign up and then user login and then we'll probably do a query to get the user and um we may do the log out and all that in a later video but depending on how long this one gets it'll kind of depend on that that'll be the deciding factor and how much we go into the authentication piece on this video um so the first thing i want to do let's get that debug banner off so we got that hidden there and then we probably want to set up a singleton type instance or superbase client um there's a couple ways you could set up a singleton in dart and it's they're all pretty easy but i like to keep it basic and dumb down so upon this injector library again there's if you search singleton up here or something along those lines you'll find several libraries just make sure it looks somewhat reputable and has so we're going to go ahead and pull this in and what injector is it's basically a mini dependency injector library so that way we can set up our singleton by registering it in our main dot dart so we probably gonna want to do something similar to this right here and then we passing the client into there they got some good examples here but basically to get the reference of the injector instance you can just do injector dot app you may need an import app instance and then we can go back to the register dependency so we're gonna do register register singleton there it is i just need to keep typing so we're only gonna register [Music] i'll go ahead and make this a little wider we can pretty much go ahead and move this down here because we don't need these global variables anymore so then whenever we want to reference our superbase client what we can do is do injector let's go back to the example we can do injector.get and then we pass in the type so we get an error here for our homepage and that's because it's it was referencing that final variable the global final variable that we have for this client so now we can do injector dot import app instance dot get and we pass in type semicolon sorry okay so i think everything should be working now if we go here do a refresh maybe it's not quite working let's see there we go just need a full refresh okay we can go ahead and remove our reference here to main.dart and then now we want to get started on the authentication so for that we're going to create another page we're going to call it login page then we're going to create a sign up page and then we're gonna go ahead and create a splash page okay so the splash page will act sort of as a loading screen page where we can pull in all of the information that we need for the application to start if the user is authenticated and if the user is not authenticated we're gonna redirect them to the login page and if they're authenticated we'll go to the home page so splash page then we can go ahead and implement the init state method we will run some of that initialization logic to verify if the user is medicated or not and then the superbase client has this auth variable property here and we can attempt to get the user from here we're calling user and so it says it returns the user data if there is a logged in user so we can assume this is going to be null if the user is not authenticated so if user is equal to no then we can redirect to log in okay otherwise we can go ahead and redirect to the home page okay so we want to go ahead and jump into our login page dot dark file and create our login page and then here we're just going to create a basic form so probably just two inputs and a sign in button or login button and race button has been deprecated uh i'm not super familiar with a lot of these deprecations on flutter 2. let's see elevated button there we go so nice of them to include that on there so we'll go ahead and add the child so i recommend you guys check out some of these form libraries that are here um in pub dot dab so there is there's a really similar one that behaves a lot like angular it is um let's see it's a reactive forms i have played around with this one and i really really enjoy it i highly recommend you guys check it out but you guys can if you guys are familiar with angular q plus 100 recommend you guys check this library out because it is almost one-to-one syntax of how angular reactive forms work but for this we're just going to keep it pretty basic okay so we assign the controllers here so that way on the login we can check we can go ahead and get these values from controller and pass them into our superbase client login method so again we'll do injector dot get to the base client and off we'll need an import on super basis client dot login is it log in or sign it sign in there we go so okay we got string email and string password so email it's going to be email dot tax dot is it just text yep that's the value and password password that's word.text um okay and this is probably yep this is an asynchronous method so we're going to go ahead and want to switch this to a future and add async to our function and i think this looks pretty good we can probably go ahead and copy this well let's just go ahead and start the sign up widget page and we can this is kind of what i mean we can probably copy most of this from the login page the only things that will change a little bit is that we'll have a confirmed password so we'll want to duplicate this password variable on firm so we'll need another input field here we'll call it confirm password we'll call this sign up and then we'll rename that to sign up so instead of calling the sign in method as you can imagine we'll call sign up and it takes an email and password again but this one it's not name parameters it's just index parameters so we'll get rid of the name right there um we should probably validate that these are the same so we can probably go ahead and do that okay so it had been a minute since i had done the actual flutter forms because again i've been using that reactive library um so i went ahead and looked at that documentation here so it looks like we just create this form key and we can go ahead and assign this key to a high level form widget that we can place on top of all our inputs so we can just wrap the column here with form and we'll pass in key we'll give it that form key variable and then we can go ahead and add validation logic here do a basic function here so we'll do value and we'll do if value is equal to no our value dot is empty um again you can go to uh pub.dev and probably find a library that has a bunch of validator methods like for email and all sorts of cool stuff but for now we'll just do a basic kind of is required type of thing so please enter valid email otherwise return null and then we'll probably want to do the same thing for these ones down here um well at least for this one for the uh oh i think we got some syntax off for the confirm password we can actually go ahead and fetch the password variable and compare them so if value is e not equal to password.text return password or actually confirm password does not match we'll just go with that we got some pretty basic validation and what's nice now is we can use the form key to check if it's valid before we send this through so we can do if let's see there it is form key that currents current state validate uh i don't think i have the null safety for dart right now i know it's pretty new and i probably need to start using it but i'm still not super familiar with it i don't want to start implementing that while trying to do videos at the same time so if it's valid returns true if there are no errors so that's what we want because we want to sign up if there's no errors up here if it's not valid then you should see this error message below the input so that should be good enough for error handling now the last thing we want to do here is probably hook up the splash page to be the first widget into the application so that way when the app loads up it goes here and it does this uh pretty basic auth check we have this comment here to redirect log in so we'll we'll do replacement actually you know do replacement on both these because we don't want to be able to hit back into the splash page and the last thing we want to do here before we even hook up the splash pages something i forgot real quick we probably want a button to go to the sign up page don't have an account sign up and we'll probably change this to a text button and let's hook up the splash page on our main and we can go ahead we're probably going to want to do a full restart on this so there we go okay um something weird happened let's go ahead and clear that and do another restart make sure we have no errors nope okay let's see what's going on here okay so we want to wrap this in a future that microtask reload that and there we go we may need to uh wrap our forms here in the safe area there we go so that way it doesn't the status bar up here doesn't hide part of the widgets we could probably add a padding here as well i mean you can start getting fancy pretty quick let's go ahead and do the same thing up here on our signup page let's go ahead and wrap it with a safe area and then add some basic padding and i think i forgot to hook up so i can tell that i forgot to hook up the confirmed password here because it's got the squiggly so it's not used anywhere so we can go ahead and put that in there and it should be ready to go so again we'll refresh and it goes to the splash page we can we can add a delay here just to show that it is doing that delayed duration seconds and let's go five so that way you guys can see that you know technically you could have way more logic here for like pulling in the user data and relation related data to the user etc so let's go ahead and reload and you'll see oh it looks like it's not centered correctly you can probably fix that yep and then it goes to the login page if you don't have an account you can go to the sign up page and then we didn't add a app bar so ios would not work here to go back with so we can add an app bar here easily let me get back and we're back to our login okay so let's see we can go to this website that i like to use mail and you can get a temporary email address which is really handy for just trying things out because you can wipe it out or come back in a few days and it'll be completely different so it's just perfect to not get a bunch of spam on your actual email so we'll do so what happened here guys was that i was being dumb as you can probably tell i was trying to log in where i still needed to actually sign up with this email i tried a couple different things until i finally figured out that i was just being an idiot um so the email is fine the password is fine i added some try cache logic so that i could see the error from go true and the error just says invalid email or password which i think is pretty counterintuitive it should actually say no this is a email does not exist or user does not exist or something along those lines instead of saying invalid email and password because that leads me to believe that it's probably due to like the format of the email or the format of the password something along those lines but i don't know i think that's just in my opinion a bad error from on their end but um we figured out so if you go if we just uh do a snack bar or a toast for that error that comes back from go true then you get some pretty nice basic error handling um and kind of let them do the logic of the error and you can just display that error it's not the best again because the error is not the best but um you guys get the idea so once i figured that out i switched back to the sign up page and then from there i actually was able to create the user successfully so you guys will see here in a second again sorry about that guys without even making an account first so that makes sense uh that that error really should be like email does not exist or something like that i think that would have been a lot nicer than invalid because invalid leads me to believe that it's like a formatting issue um but while we're here let's go ahead and uh obscure the password obscure text through and we'll do the same on the sign up page because why not okay so we don't have an account for this guy so we have to create one and we'll go ahead and paste that email again oh okay i still have that paste it copied we'll do the same password and we don't have any checks there but we'll assume that worked then we can do a login it says email not confirmed okay that's pretty cool so we got that email here that was pretty quick uh confirm your sign up so i'm guessing we just click the link here and so if we were on web this is where it would redirect to and then the user would be signed in with that token coming in okay there we go um but for right now i think we're good so we probably can just add a sign up button here on our home page or sorry a sign out button so we can go ahead and probably instead of returning this list view you can return a column children and then let's return that list view in there and then we'll do a button elevated button which will be our sign out button sign out and i'm guessing it's because we have the list view inside of the column so i think we need to wrap this in a single child scroll view and probably need to wrap oh okay sorry i messed up the the inputs here so we can go ahead and pass that there okay and except we may still have an error we'll just throw it in a container here and give it a max like so i don't feel like dealing with these uh layout issues okay so we got our sign out button and we can just go ahead and navigate back to the splash page so push and remove until we'll do material page route oh i can't see context and we'll return the sign up page and then i believe this function just returns false and then i think that means basically like clear the whole stack of the router so we can go ahead and try that out yep so it went back to the oh that was meant to be splash page okay so we went to the wrong page there so we have to refresh the app and but we shouldn't be authenticated anymore so we should go to the lock-in page yep so we go to the login page and we can go ahead and get the email from superbase so we can log in oh okay did i type it wrong oh i have oh okay so i accidentally tab a lot and on the simulator it adds a space there so you can add a trim there on your text input if that helps so we're signed in we sign out goes to the splash page um so kind of like takes it back to the root of the application and then it goes back to login page um so i think that's good for now um we have our login and sign up working so i think after this we may do the profile or a to-do list or possibly a to-do list um just because i think with that one we can much more easily play with the real-time client which i think is where things can get really really fun um if you guys want me to go more in depth into the authentication i certainly can please just let me know in the comments and i will dive deeper into the documentation um especially with the forgot password or reset password and uh the templates here you guys just let me know how deep you guys want me to go with that otherwise i will switch to the real-time client because i think that's what probably the majority of you will want me to play around with uh especially when we get down to the nitty-gritty with the real level security and doing all sorts of cool stuff with uh making sure that the users are only allowed to fetch certain data or save certain data based on their roles or permissions okay real quick guys please uh like and subscribe if you guys like this content and let me know in the comments what i can do to improve on and what you guys want me to work on next i may create some reusable authentication components and put them up in a git repo so that everybody that uses flutter and superbase can reuse these authentication components i'll just have to clean him up a bit but let me know if you guys are interested in something like that or whatever else you guys would like me to explore so please like and share and subscribe thank you guys i appreciate it have a good one bye

Channel: Alan Negrete

Views: 6,692

Keywords: flutter, supabase, firebase, authentication, flutter meets supabase, dart, flutter login, flutter signup, supabase auth

Id: K_kHWeE0Fi0

Length: 31min 4sec (1864 seconds)

Published: Tue Apr 06 2021