Flutter Supabase Authentication - Full Course

yeah hello there and welcome back and let us continue with our lesson over here and let us go and learn how we can create the flutter application using a Super Bass as a backend service so if you don't know what is a Super Bass Super Bass is actually a backend as a service where you can utilize like the database I like the edge functions like you can create a lot of the service that you actually do with your backend here we will be creating our database first of all and it also provides the authentication Service where you can just easily integrate the authentication to your application as well so what you can do is you can go to the superbase.com over here and just go to the sign up and what you have to do is you can just log in using the GitHub or you can also use your own email to sign up and I have already signed up over here and once you have sign up and log into the Super based dashboard over here what we will do is we'll go and create the a new project over here and what you can give is you can just give a name over here so what uh what is the application name that you are going to build so let's say uh flu tdf Ledger app uh demo over here and next is we need to create the database password since it is using a Pros SQL so we need to set up a password over here so for that let's go and generate the random password over here and then the region which is of your um the data center location so you can select the your uh closest location if you want to get a faster like the response time and for that so let's go and select I'll be selecting as the southeast Mumbai over here which is quite near to my location as well as if you can find the rest of the location you can just select from here you can also select the Singapore which is also quite near to me and for now let's go and select the free plan over here you have the free and the bit for this demo the free is completely fine for us so let's go and create the a new project over here and once the project is created we are good to go so what we have to do is you have to remember this uh you can just remember for now uh you need to get this URL as well as the uh Anno and key over here which is of the API key that you will later require the setup in the flutter project so you have the JavaScript as well as the um the dot over here so later we'll see how we can set this up over here and once we have that let's go to the database over here and currently we don't have any tables in the database over here so since it is a SQL or the process SQL over here you can create the tables right and you can also use the SQL script to generate tables and if you are already familiar with the SQL queries it will be much easier over here so you have the tables you have the Tigers you have the functions extensions role replication web hooks wrapper which is of the alpha backups and migration so we'll be looking at some of this once we are going to create our flutter application so we'll be also looking into the tables triggers functions and I guess we'll be also looking into the uh case a Web book as well but let's see but we will be sure using the tables over here tigers and the function for now so uh let's go to this particular authentication so first we need to create the authentication so we can log in from our flutter application and if you go to the uh providers over here and you can see by default the email out in the email and the password authentication is already enabled for us so the minimum password length you can set up over here and then you can enable the provider confirm confirming email right you can send the email confirmation like once the user sign up you you just have to go and click the link to enable that account and you can also use the phone authentication and you have a lot of the authentication actually it supports so there is a Google Apple and you can also use the old 40 like the Discord Facebook bit packet so whatever you can find online I guess they have the sign up over here so it's pretty cool over here that they have a lot of the option for your authentication so by default the email is Led enabled for us and um if it is already enabled we don't have to do anything over here and currently we don't have any of the uh tables over here as well and later we will go and create the table first let's go back to our project on the uh let's go and open the vs code over here and what we have to do is we need to go to the I have already created the empty project or the flutter project over here you can see it's the empty flooded project over here so what we'll do is we'll go back to the pubspect.di yaml file over here and let's go back to our um the above that Dave will be here and we'll find the a Super Bass a flatter package over here and let's copy the dependencies so I'll just copy it from here and let's go back to our project over here and let us paste it on to the dependency over here so we have the uh super best dependency so let's go down over here and it should be not here it should be over here so the Super Bass fledger and current dependency of this one over here so once we have that you can just go and run the flutter public gate over here to get the add dependency and you can also go and read the uh documentation over here so they have the pretty good documentation to have the authentication and then the database real time and then the uh listen to the change over using the channel so let's uh you can go and read this particular augmentation but later we'll see some of this how we can utilize in our application once we are going to build the chat application so let's go back over uh here and let's go to I guess we have done over here and let's go to the main over here and first thing is that we need to initialize the Super Bass over here so for that uh what I'll do is I need to make this one as the async function over here and what we'll do is we'll go and set the widg Wicket flutter binding over here dot the NGO initialize so we need to run this one because we are going to call some native functionality using the uh Super Bass over here and next is I need to go and I'll wait over here and use the Super Bass over here super bass dot the initialize over here and what we have to pass is the Anon key over here as well as the URL over here so let's go and set that up over here first thing is let's go and set the uh I guess the URL over here and URL will be of this string and also the another one is of the Anon key over here and if you take a look you have the uh this properties that you can actually set up over here and you can also set up this schema and currently we are only able to by default it's always using the um the public schema over here and later we'll see uh what is the schema in our um the dashboard on the super base so let's go back to the uh Super Bass uh over here and what we need to do is we need to get the API key and then the URL so if you remember at the beginning we have already got that how we can get that one so let's go down over here and we will see the project URL is of this one so just copy this one and let's go back to our project over here let's paste the URL over here and then we need to get the and on key over here so let's go back over here and let's go copy this particular and on key from here and this key is safe to be used in the browser also if you have exposed this particular API key that is not a problem so if you want to protect it it's also a good practice but they have mentioned that it is safe to be used in the browser as well as to hard code in your application so let's open up our device again and let's paste that particular key over here and with this we are good to go so now our Super Bass instance has been initialized what we can do is we can use this one in our application so for that I guess we can create one const variable so later we can um we don't have to every time in slides or get the instance of this one so for that what I will do is I'll just go and create the new folder over here let's create the new folder and let's call this one as the UTI lsuj deals and inside this let's go and create the new file of the Azure and SDA NTS constants dot the dot file over here and let's go and create the final variable of the issue super base over here super uh Supa BSC super best which is of equals to the uh super base that we have super uh base over here dot the instance and then we'll get the client not the cluster CLI ENT client over here so this will give us the instance of the supervised or the client that we are going to use to connect to or call the Aquarius Oracle to the functions in our Super Bass instance in our back office or the backend so let's say this is of the sup ABS super based uh client say CLI en declined over here so now we have this we can access it in side of our application and then we can utilize it later so that's cool so once we are done with that we are good to go and next thing is that we need to create the uh let's go and create the new folder over here and let's have the um scr and screens and with this or let's have the page for now and with this uh Pages let's go and create some of the pages so first we will have the auth over here and with this alt let's go and create the the two file that will be of the logi and login unders login page start the dot file and also we will have one more that is of the assign up or the let's say this is of the Regis register underscore the page over here dot the uh dot file over here I'm calling this one as the page instead instead of the uh this screen previously if you can remember I was always using a screen over here but uh we will be running this project on the web as well so I guess it's better to rename it as a page over here so once we have the login and the uh sign login and the register page and what we will do is I will create the uh let's create this state full so let's say uh s is stateful over here and that will be of the Eraser page and let's import this one from let's import this one uh flutter material over here and let's go over here and let's also create a stateful and that will be of the login page as well and let's import the Metro package so I guess I can just remove this underscore for now and uh let's do that and let's go to the rest of page and let's also remove it from here as well so that should be fine and we are good to go so let's go to the uh this eraser page first we need to create the rest of page over here and I'll use the uh scarf fold over here and let's have the app bar which is of the app bar over here and let's have the title and that will be of the uh let's set the uh cons of the text over here not the tab so d e x t text over here and let's see our GIS TR register over here and I guess the next option will be of the uh Center title to be of the true and then we will have the our body over here and in the body let's have the uh single child scroll view over here and and then we'll have the uh child and in this channel I guess let's add the uh let's start with the padding over here and padding let's have the um the const of the edge insect of of the all and that will be of let's say of the 16.0 over here and we need to have the child for this one as well right so let's go and have the uh new child over here and child with the of the uh form over here and once we have this particular form so let's go down over here and let's have the child and let's add the uh column over here so we will have the column and inside this column we'll have the children over here so that's cool and let's go on to the top and we require some of the uh the things that that properties like the um currently we require the form key over here so let's create the uh Global key that will be of the uh form State over here and that will be of the underscore the form F4 are inform key over here and that will be of the global key itself so we are good with that and once we have that let's go to the form and let's have the key over here that will be of the form key that we have later we'll use this particular form key to validate our form over here and once we have this particular let's go down over here and let's create some of the text field over here that we will require over here and I have already created our text form field so let me just copy from here and let me paste it over here so we don't waste the much of the time so just copy I'll just copy the code over here and if you take a look so we have this particular text form field and the keyboard type is of the email address and the input action will be of the next and the maximum Max lines I have set it to D1 auto focus to be of the false controller so we haven't created that controller we need to create that one and I have uh enabled a simple input decoration over here and then the um the let's go down and you have the simple validator rule over here and we'll just say that of the email advantage of empty or you can just return any of the error text from here so this is the text form field and next is we require another one will be of the we will send the email and we will also send another one will be of the username so let me just copy that one as well over here so let me erase this one properly and let me just go and paste it below over here so I have the another text form field over here which is typist of the text and input action is also of the next MAX Line autofocus and then the controller currently we don't have that we need to create it and then we have the simple input decoration over here and then the uh the validator rule for our the username over here so we have the few validation rule over here and then one is off to check whether it's the empty ordinal and another one is to validate uh the length and the alpha numeric over here and once we are done with that we will require to set up the password over here so let's copy the another field over here as the password over here and let's go and paste it below over here so this will be of the another field which is the type each of the keyboard type is of the visible password input action is of the next and up security text is true because this is a password and then we have the controller which we haven't set it up we need to set that one up and then the input declaration and then the validation rule over here so we set the the length should be of the 6 or the more over here and then after that we'll have the one button over here so let's copy the I'll copy the another code from here and paste it uh below over here and that will be of the button so we will have one button to sign that up so currently we don't have this fill as well as this function so we need to create that and then we I have the another text button that is to we will have to navigate when we press on that we'll navigate to the login button so at the login page so let's import that login page.file and currently we don't have that route later we will go and create that and over here we have the one text which is up if you have this is the particular text I have an account already so once we click on that we'll navigate back to the login page so let's go on to the top over here and what we need to do is we need to have some of the text field or the controller that we need to create so for that let me just copy the code from here and I'll just paste it over here so now we have the text editing controller all right so we have the email controller password controller and the use username so let's go and create the init State over here and in the inner State we need to initialize all of this so what I need to do is I'll just initialize all of these uh text editing controller over here and once we have initialized don't forget to dispose that one so what let's go and before we call the super dust this post over here we need to go and dispose all of the controller that we have over here and I guess that should be a fine and once we have that next thing is that we will require the function right so let's go and down and that will be of the uh voyage and we require the Sig and sign up over here and this will be of the asynchronous function over here and if you go down now uh your form should be uh pretty good and then once we we require another which is of the loading and then the we require the set of the uh login page route so if you don't want to do this one over here as well so what you can do is you can just pass in the Metro Route object directly over here so I can just remove this one as well and pass in the uh material a page route over here and then the Builder can leave it on have so we'll just go and return from here the logn login page over here and that will be of the const over here so that should be good and and you have the two options once you set up this one over here or you can create a static variable on the login page itself to return on this particular route over here and next is we will require this uh loading state so let's go on to the top over here and let's create the one more variable over here so that will be of a let's see uh boot over here and that will be of the underscore the loading over here and by default it's of defaults and why that is false is if you go down to this particular button over here and with this button we are checking whether to enable or disable that particular button based on the loading State here we are not utilizing any of the State Management solution so that's why we have to do everything in this particular page but if we are using this statement management solution then you have to maintain that state on the separate page so once we have this loading instead or we if it is of the loading then we'll say that disable this particular button or I'll just call this particular sign up over here so let's go on to the top over here I guess we have fixed almost most of this stuff over here and I guess that should be fun and now we don't have any error on the register page but what we need to do is let's go on to the top over here and we need to set this sign up function over here and currently uh what we will do this we'll just go and simply try to create the account without any validation we also need to do a validation later on like if the user already exists if the username is already exists if the email address is already exist over here and then the we will have to do the validation ourselves and the Super Bass currently um I don't find any of the example where the um the Super Bass itself does that one but we have to do that one currently by ourselves and I hope in the future that that they may do that but currently we have to do the validation also but for now uh we don't have any record and in the in our database so we can't do the validation for now so later once we create some account and we'll come back over here and do redo the validation over here so for now I'll just go and try to create a counted directly so eight of a weight over here and we can call the super base the client that we have previously generally created with the superbase dot the auth over here and I'll use the sign up over here and sign up request the email or the phone and then the password so the password is the required field so we'll be using email not the phone over here so let's go and set that one up over here which is of the email as well and let's go and set up as the password over here and let's then close it over here so email and the password will be we will getting this one from here and that will be of the uh the email controller dot the text and then we'll have the password controller that we have over here right password controller.d text we got it and the next is we'll also send the uh username So currently there is no option to send a username over here but we can send it through the data over here which is of the map of the string and the dynamic so let's go and set the data over here and with this data I can send the map over here the map will be of the user and name over here uh sorry this should be on the code over here username and this will be of the username that we have over here in case this is the one just copy and set get the text over here so username that detects and I will convert it to the uh to the lowercase so we just want to have it to the lowercase for the username in case if user have entered the uppercase or in the capital or uppercase on the front or middle they have some uppercase so we just want to have this standardized to make it to the lower case so it will be easier for us to do the validation with that usually exists in the database record and so on so once we have uh set this up uh what we will do over here is I guess we will set the loading instead first of all so once we call this particular function we'll go and set the instead over here to the um each loading so that we have over here I guess each loading 2B of equals to D2 over here and this will go and update this state and once we have created the account over here and we'll just go and set that one to be of the uh false over here and next we'll create the one more function over here to Alicia and uh avoid we will go in navi navigate to LOD login page over here and with this what we need to do is uh once the registration was successful we have to go and call the let's make this one as the private I so let's make this one as a private call over here and once we have successfully registered we need to navigate back to the login page so for that we can just uh copy the code from here as well so once we press that one we'll just navigate uh sorry this one we need to call the navigate to login page as well from here so what I will do is I'll just go and paste the code over here and that will be up to navigate to the login page so that should be fine and our arrested page is ready and the next thing is that what we need to do is we need to go and sign set the login page over here so let's go to the uh login page and currently this resident page is not completely done we haven't done the validation over here later we'll come back over here again so let's go to the login page over here and let's also return from here the uh scaffold as well and scaffold and I guess we can just copy some of this stuff from here so we don't have to redo much of this stuff over here so I'll just go and copy this particular content from here and uh let's go and paste it over here so what we need to do is we just need to close it over here and that will be of the column and then we just have to close the another one for the form and then we again have to close the another one for this and again for another one and I guess we require one more to be closed over here so that's cool and the form key we haven't generated so this one will be of the log in over here and our design in or the login so let's go and have the form key over here as well so for that we can just go and copy some of the things from here so let's copy the login and this particular uh login key forms key as well as the controller or the text editing controller over here and we are going to paste it over here so that should be good enough and then let's have the uh init State over here and also we'll have the on uh this sorry the dispose over here so let's call that particular function as well over here and let's just remove this one from here and also let's remove this one and let's go and get that one from here so what I need to do is I need to copy these two from here and paste it over here so we need to dispose this uh sorry we need to initialize it after initialization we need to dispose it on our on this post function callback so let's go and dispose it over here and we are good to go over here so I guess I just need to errands a bit over here and and then we are good to go and then we have the form key I guess that should be already set it up over here and in the column will have the children over here and uh let's go and see what we have done so currently we have set up these uh properties over here and then we have initialized the controller and dispose it and we have this car fold and I guess that should be fine so now we need to add the field over here so for that what we'll do is Let's uh I'll be copying some of the contents so let's go and copy the text form field over here and you can just copy it the uh same thing from your register page so you can just go and copy it from here we just require the email and then the password so let's go and paste it over here and I have copied the email all right so this is at the email form field and then next is I have the uh the password field over here so we have two one is of the email and one is of the password so I guess I just need to address the intent for this one a bit over uh here so let's try to see if I need to arrange this one and okay so currently is there so I just need to move it I guess one more over here and that should be a fine I guess over here and once we have that we also need to have the uh Button as well right so just I'll copy the button over here and also we need to have some text over there so let me just copy the uh the content of the over here and let's paste it below over here so now uh what we will have over here is we have the after the the password field we'll have the one button over here and that is of the field button and once it is of the loading we'll disable it and if it is not then we'll go and call this sign in function currently we don't have that and uh we are going to create that in and then we have one row where we we have the um we set one text which is if you don't have account and then we have the text button you can just go and click on that one and navigate to the register page so just import the register page over here and we are good to go so let me try to arrange the intent over here so just copy this one from here and paste it over here so now uh it looks fine and we just need to create the one function that is of this one and let's go over here and let's go and create that one over here so that will be of the sign in function and this will return the void for us and the next thing is that once we have this particular loading State enabled what we can do is we can actually go and Source the loading state so for that I'll just go and copy this encode and paste it over here so you can see that if we have the loading State then we are going to show the circular progress indicator over here and for that I guess let's have the a size box over here so let's add some spacing over here vertical spacing over here so I'll do the same thing over here on the registration page so if there is a loading state I'm just going to show that particular loading the circular progress indicator over here so that's what we find now one we will also have the loading State over here and in the login page what we need to do is we just need to go and log in over here so for that let's go and let's go on to the top over here first thing is we will do the validation so for form validation final let's go and have the final and let's say uh each VL light is valid we need to validate our underscore code the form key that we have that the current state RDC U current state and then we'll do the validate over here and I need to now check over here and once we have that I go need to go and check the condition over here so that will be of the uh each vli the valid is not equals to the null and also each valid so if this condition is true then we are going to set the state first of all that is of the H underscore the it's loading it should be of the true and this will give us the loading instead and now we cancel the progress indicator and the next thing is that what we will do over here is we are going to login over here right or we are going to sign in over here so for that I'll just go and call the our width over here and this should be of the asynchronous function over here of it and we have the Super Bass instance or the client that we have already created over here so auth and then we'll go and use the sign in with the password over here and here we'll use the password as well as the email so if you take a look we can pass in the email ending the password over here and for that let's go and set the uh email over here email will be underscore the email controller dot the text over here and then this one will be on underscore the password controller dot the text over here so once we have that uh we are getting close and if you go over here in the register and then we have this sign up function call over here and here we are calling the sign in with the password over here once it is done what we have to do over here is we are going to go and update this state over here that will be of the uh files over here so we need to disable the loading instead over here and then we again need to navigate to the another page so let's say avoid any let's make this one as the private and avology navigate to uh we need to go to the another screen So currently I guess uh let's go to navigate to the spoa Rd dashboard and apparently we don't have dashboard so for that we need to create a one more uh screen over here so let's go and create the one more page over here so dshpoa are the dashboard underscore page dot the dot file over here so d a r d dot file and let's go and have the uh if stateful uh we get over here and let's import the a flutter a material package over here and let's just make this one over here so currently we just will return the scaffold is scaffold from here and I guess that should be fine so let's just keep it as an empty for now and let's go back over here and what we need to do is we need to navigate from here so how we can navigate is the navrg navigate chart dot of context we need to push this one I guess we will post and remove until over here because what we need to do is once we have successfully successfully login we can remove the current uh the route step and move on to the uh the dashboard because we don't want to come back to this particular login page right so what we have to do is we need to remove that current stack and move on to the another page and in the new route what we need to do is uh we need to metal page route over here and then the route Builder Okay so currently we don't require this and then we'll go and call the uh dashboard uh not the base so d a s s dashboard page over here and let's make this one as the const over here so we'll just go and call this one from uh here right so once we have successfully login we can call this want to navigate and currently we are not uh catching any of the air so what we can also do over here is instead of just calling the API or the um the super base over here it can also throw us the error so to prevent that or to prevent the application crashing we can use the error handling over here and I'll just catch this particular error two times over here the first one will be of the uh on so let's use the on exception which is from the uh super base so we need to import that and then we will have this another one so what I will do over here is I will just cut this section and I will move inside this particular try block over here and that should be the one that we are have to do over here and on the out exception what we can do is uh we need to show some okay so first of all let's go and set this state so if that each of the false or do we have the some exception we also need to set the loading instead to be of defaults over here as well and next is we need to show some message to the user so for that I guess we'll create some extension to sort the error message maybe we'll create the extension to uh let's create the extension for the snack bar so for that let's go to the um and create the new file and that will be of the uh let's see uh SNS CK snack bar uh snsc key snack bar let's say uh extn extension dot the dot file over here and let's go and create the extension over here and that will be of the and I here we'll show the S and as you can snap uh not this number it's a scaffold right so SCA scaffold messenger over here dot of this particular context is of this and then the uh we'll just go and call this so This snap bar over here and we need to call this particular let's have the uh snack bar over here and we just need to pass in the content over here so the content will be of the uh let's erase this one properly and this one will be of the content will be of the text over here and text we need to pass in the sum me SSM message over here so here we'll just go and pass in the message over here and that will be of the I will pass in the required field of the string that will be of the message over here so we can show that and in the stack bar you can also do this some formatting over here so uh let's add in one more option over here that will be of the background content and the background color right okay so this will be off here so I I close it wrongly and this will be of the background color over here so you can just pass in some color uh to depending on what color of the background you want over here so for that uh let's also pass in the uh Prime over here so see yellow our color that will be of the background color over here and by default we'll just pass in the uh let's see a default color will be of this ulr s colors dot the I guess are white so let's pass in the white over here and we'll use the background color over here and that should be a fine over here and in case if you want to pass in the different color and and that should be fun so let's go back over here and what we can do is here we can call that context starting context.t are so the snack bar over here and then we can pass in the message and the background color which is the message will be of the E dot the message as well and then the background color since this is of the air so I'll just go and pass in the culo arts college dot the red over here since this is of the error and let me try to okay so I guess that should be fine and let me just copy this one as well and let's paste it over uh here as well so this one will be I guess we don't have a e so we just say e.2 string directly over here and that should be fine so now we have all of those and what I can do is I can do the same thing for our uh let's go back to our register page and I can have the same thing so just copy this content from here and let's go over here and instead of just directly calling this one over here we will just go and implement the this particular function which is to try cats over here and for that I'll just cut this section from here and what I have to do is uh let's go over here and I need to replace it from here so try to replace this one over here and let's try to do the proper intent over here and that should be fine and let's import the uh super best flutter Super Bass over here and we also need to import the snack bar over here and I guess that should be the one that we have to do over here and we have the error handling as well now and we are good to go okay so finally we can run our application and so let's go to the um here over here and we'll create the launch.json file so it will be easy for us to run our application so let's go and run the application over here and currently we don't have any of the dependency we just have the Super Bass fluttered so it can run on the uh any of the packages I'll sell any of the platforms so we don't have the platform specific dependency so let's try to run in the Mac OS you can also run in the web or you can run in the iOS and the Android as well so what we have to do over here next is um because we are using the Mac run time over here so the next is let's go to the Mac over here Macos over here and let's go to the uh runner over here so in the runner what we have to do is we need to connect to the Internet so that's why let's go over here and let's add in the Internet Security over here so let me close all of this over here and what I have to do is let me just copy this one from here and let's copy below this one and this one will be a com.apple.thesecurity.thenetwork and this will be of the client decline over here to access the internet over here so I'll just copy this one over here as well as on the release over here so that should be good enough so once we have done this one what we have to do is we have to close this one and uh what we have to do is let's go to the main over here and now we currently we have this particular body we have to replace this one with the let's see uh login page for now and later we will try to replace that so for now let's go and try to go and run it one more time over here and now we can see that we are on the log in okay so we have the spelling error over there so let's go back to the login page over here and let's try to fix that one and that will be of the log in over here and we are good with that and I guess we also need to have this one over here as well and let's try to uh hot hot reload over here and once we are done we are good to go so let's try to go to the register over here and do the navigation back so we are good with that and what we'll do is you'll try to register a new account so let's go and create the new account over here and I have fill in the form already so let's try to erase your wishes so now you can see a loading State and this is disabled over here and now we have got that uh navigation successful which means the account was created so let's go back and take a look over here in our uh the Authentication and in the authentication now we should see one uh the user is over here so which is of this particular and it is waiting for the verification so what we need to do is we need to log into our let's go to the Gmail over here we'll go and confirm our email address so let's go and confirm it over here and if you go back over here now and if you try to reload it over here you will see that the uh it has been um they validate or the email has been confirmed over here so now you can see that currently we can't see much of the information over here so currently we just have one user over here and for that if you go to the uh the tables over here and you can select a schema over here So currently we are using the public schema over here and don't worry about the schema let you will go and check more about it and let's select the odd schema over here and if you go to the users over here and you should be able to see that particular user over here we have the user ID authenticated and then we have this email and then if you've got that there is a password right and then we have the uh let's go over here and we should see some uh the um the username that we pass in so raw user metadata that we had previously passed and this is the Json B format over here you can see the username and this is of the demo which we send it from our app over here so this is the user information stored on over here and currently what is the problem with this is that from the flutter we can only use the public schema uh which basically once we set up our uh the super base it's going to directly connect to the um whenever we are accessing the data database table it always goes to the public schema and if you are using the superbus.aut then it will come to the uh odd schema over here so if you take a look over there and now if you take a look over here on the sign up function over here or the login function that we have we are calling the odd over here so this will access that particular uh schema over there on the um let's go over here and this is going to call the schema on the auth and rest of the if you are using the if you are just calling the um the API on the other databases other database tables it's going to call on the schema of the public and I hope that they will fix that one if you go and take a look on the GitHub repo they have the open uh decision for that uh open discussion on that one over there and um that's the uh the drawback over here you can just create a new schema and a call it from the uh flutter but I I guess that will be solved when you are watching this video and the schemas are the ways to organize your database uh tables like you can organize for the authentication you have the auth right and you can create the another schema like the chat and that is only and that will only hold the chat related tables and you may have the sales schema where it will only hold the sales related table and you have the uh product schemas where you have only the product related on the tables over there so in this way using the schema you can organize your uh the database table in more structural way just like a box or the container where you put in all of your tables so later we'll see uh how we can create the more tables over here on the public schema and we'll also try to see how we can create the new schema over here and then create the new table on that particular schema but currently flutter doesn't support to switch the to our different schema that is the current uh issue with the uh Super Bass uh flatul SDK that we are currently using so once we have that let's go back to our device and let's try to log in so let me try to log in over here and then the password and let's try to log in over here and now we are good to go so now you can see we are already on the dashboard over here that is what we have set up in our application so that's cool and uh we will continue with this on the next lecture it's quite long already and in this session we'll learn how we can do the authentication with the email and password and on the coming up lecture we will be building up a chat application which is of a one-to-one chat as well as the group chat so uh let's meet up in the next lecture till then have a great day yeah hello there and welcome back and let us continue with our lesson over here and we already have the users table over here on the Athen out schema over here and if you go to the uh schema or the public schema over here we don't have any table over here so what we need to do is uh since I mentioned previously that we need to access the user information in our flutter app but currently we don't have option to read this particular uh the art schema from here the user table so what we have to do is we need to plug some information from this particular user table back to our public schema over here so for that let's create the new table you can either create the users table or you can create a different table so for me let's me create the Pro File profile and let's say this is of the profiles over here an option let's say so you can give some description let's say store sdor store the user Pro File profile over here and we'll enable the row level as security which is the recommended option over here so you can restrict the access to your table enabling the RLS and writing the uh progress policies so this basically means that you can write some policies to the uh row level or who can rate like whether you want to allow only to the authenticated user to read from this table who can insert these two particular the table right you can set the policy over here and this is the security policy that you can Implement in your art table itself and currently we don't want to enable the real time and later we'll see how we can enable that and what is the use case and how we can get the information or how we can read information back in our flutter application so for now let's just uncheck this one and we'll create the ID over here and let's change the type so there are a couple of the types that we can use I'll be using the uh let me go to the universal unique identifier over here and um another thing is let's make this one as a level for now and it should be of the primary key over here and the primary key is the we we will require this one ID should be of the primary key later it will be easier for us to link it to the uh like create a table relation and all of the stuff and also next we will require the uh let's add the one more column over here and let me drag this one over here and this one will be of the let's say uh user name over here so we'll try to store the username and let's make this one as the text over here and I guess we will make this one as the nullable over here for now or you can just change to uh empty string for now but I guess it should be fine and if you can click on the setting icon you can set it as a nullable and also you can make this one if you want to make it as a unique right so if you don't want to make it a nullable uh you can just uncheck this one so that that means that it's not the nullable so if you take a look if we click on this one you can see that this is if you check this one it will be nullable but if you uncheck this one it is on you can insert the null value over here and if you are not familiar with the SQL it may be quite difficult to understand so make sure you go and check out or read some documentation about the uh the SQL also or you can go to the uh postgres official documentation and read about the data types that it provides and once we have this username over here I will create the one more column another one let's set this one each of the uh full name over here and you can also insert the full name over here so this one will be of the text as well over here and let's make this one as the nullable and if I will add the one more column that will be of let's say uh Avatar Avatar and this will be of the let's make this one as it takes itself again so this will be the uh the Avatar that we are going to store so that is the link of the profile image that we are going to provide over here and now we will also require the another one more column that will be of the email over here and just drag this one over here and this will be of the type is of again the uh the text over here and let's add the one more column that will be of the each underscore online so let's say we are going to check it over here so whether the user is online or not we can use that one so this will be of the type each of the Bulls so let's go down over here and we'll select the Boolean to all the false over here and we can set the uh some default value over here so the default value let's go and make this one as the uh just uncheck I guess we don't want to set it as the level and by default I guess let me move this one over here and uh here we'll just set as the fal as a false the default value over here and I guess the username uh full name uh can be of the nullable and then the Avatar also can be of the nullable email I guess we don't want to make this one as the nullable and the username uh what we want to do over here is we want to make it as a unique and the username should be of the unique and we don't want to make it as a null so you can insert the nullable username over here so I guess that should be fine and we just have one primary Cube which it will be useful later when we want to create the table relation uh also it will be helpful for indexing and all of other purposes and let's go and go and create this one over here and let me try to create that one over here once we are so it's adding the seven column over here and here you can see that we have created the tables so for that let's go to the database over here and if you go to the table now we have the uh on the schema public we have the one new table which is of the profile so you can just click on the column over here and you'll see the list of the columns that we have and the data type and the format over here as well so let's go back to the uh table over here and you can also edit this one and you can edit the information over here so what we can do over here is uh we need to create the actual uh table relation over here so we can link or one table with the another table so let's open up the column over here and what we need to do is we'll go to this particular ID over here which is of the type which of the EU ID they'll try to link it with the uh Earth and the users table and we'll select the ID over here and what we want to do is once we delete the user we also want to delete this particular um the profile so for that we'll set the Cascade over here so delete the record from the deleting the record from the auth.uses table will also delete the record from this error reference table which basically means if you delete the user it's also going to delete the profile data over here though so that's is what we want over here so let's create the uh this particular relation over here so the following is the foreign key relation added over here so just go and save this one over here and we are good to go so now we have the relation and if you go back to the tables over here and you will see the profile and you will see that there is a link over here and this is the primary key and there is a foreign key relation over here this ID is has the relation with the authority users.id over here and once you delete the users it's going to delete this particular ID and next things once we create the user once we create the user we want to automatically add that particular user back to our this particular profile table which means that we don't have the option to add the user from the um the mobile app on our flutter project currently so what we'll do is we'll create the function over here so whenever there is a new record added to the uh our auth user tables we are going to add that particular to our profile itself or the profile table so for that let's go and create the function over here and currently we don't have any functions so what we can do is we can write some script over here and you can see there are already some of the script that is available for you so you can see how to create a table add a comments and all of those stuff over here so if you go down over here we have some script like the user management and uh then um I I guess you we will be using the user management over here and if you click on this one there is a script already for you so what we are going to do is I guess we don't want to use this one it's quite complicated over here if you are not familiar with the SQL query it will be a quite difficult to understand so what we want to do is we already have this a profile table over here and we don't have this particular um the um the policy over here the row level policy later we'll go and create I guess we also don't require that one over here and I guess what we require is this particular function over here so this is the function so let's copy this particular function from here so I guess I'll let me copy the uh function begin from here create the user and let's go to the new query over here and a new blank query over here and let me paste that one over here so let's try to erase this one over here and what we are doing over here is create a new function so we are going to create the new function or if you are familiar with the uh the square SQL procedure so this is the procedure that we are going to create in the MySQL you can MySQL or the MSS grill or any other SQL you will see that it is a store procedure actually but here we call it as a function over here and create a function over here and that will be of the public dot the handle new user so this is the table schema that we have so this is on the public and we want to have the handle you handle new user and this or you can say rename it to a different one that's up to you but let's keep it as a handle new user over here so written a Tigger so it's actually going to create the Digger over here as the dollar over here so what it is actually it is returning a type is of the Tigers if you go back over here and if you take a look over here so actually it's also creating a digger over here you can see that it is creating a tiger action so you can either create the trigger uh from this particular SQL query or later you can go and create it from the UI itself or the graphically so what we'll do is we'll also copy this one from here and let's go back to our uh the script that we just have over here and this is going to create a digger over here so let's go create uh let's say our t-r-i-gga Tigger when new user is really created over here so what we want to do over here is if you take a look at the Tigger so Tigger is basically means that you want to trigger some function call over here when there is some event so let's say uh you created a new user and once the user is created what we want to do is we want to call this particular function over here so if you take a look over here so create a Tigger right so this is the trigger that we are going to create on the odd user created over here so this is the Tigger name that we have over here and you have the after so after the user is created so after insert on the auth dot the user so basically what we are saying over here is after we insert a new user on the Earth or the user table we want to trigger it and for each row execute the procedure so we have this particular procedure as I mentioned previously this is the function that we have so execute means that go and execute this particular function which is a public then they handle new user so this is the um the function that we have over here so if you can see function to uh insert insert to the pro f i l e profile d a b l e table over here and uh so now we have that so we are going to insert it to our on this particular table so insert into the public that the profiles over here we want to insert the sum of the uh we want the instant ID and we also want to insert the username over here and then we also want to insert the email right and also we want to insert the Avatar so I guess for the Avatar we'll use a default one and later we'll see how we can set the default value so now I'm going to get the new that the ID so new is the value that is actually the auth table or dot the users table so from here I can get the new DOT the ID and for the uh the user I need to get it from this particular metadata so I can just copy this uh metadata over here if you remember we are sending as the uh that one as the in the hash map all right so we are sending in the map format so from here we are going to use the user name over here so let me try to arrange this one over here so we are going to insert the username and then the email so next is after the username we have the email so for the email I can get it from the new DOT the email itself so this is going to give us the uh the auth.the users.the email property and we can use that one and over here we have the third is the full name and then the Avatar URL so this full name and the Avatar URL is not we are sending so what we will do is let's go over here and uh so that should be fine I guess so for this particular method that uh we are not sending the URL um later we'll try to see how we can upload it from different application but for now we want to have the default Avatar over here so for that we need to create the bucket over here or the storage where we can store the image or the profile image so let's say this particular query over here so for this one we will say uh h a n d h n d l e handle a new user and this will be of the uh if you can see it handle new user function and also this is of the trigger right so r t r i g g r trigger over here and just rename this particular query and also uh I'm going to make it as the favorite so it's going to Ping it over here so handle new user and a new user function and then the trigger so let's go back to our uh storage over here and in the storage what we are going to do is we need to create the new Bucket over here and in the new bucket we are going to store our image over here and for that let's go and create the new bucket and for this I'll just go and make this one as let's say a defa uld default Bucket over here and you can you can see the lowercase letter number Dot and the hyphens the the format of this particular bucket name and uh I will check this one to the public one so basically Publix means it can be accessed without any of the uh it can be accessed with anyone so user can read the object in the public bucket without any authorization so basically it means that even the if the user is not authenticated or if you have a login he can still read that particular information from this particular bucket so I'll just go and you can also add the other information but let's just keep it as a simple and I'll just set it to be a readable for the public so anyone can read it without the authentication over here so just click on that one and once the bucket is created what we need to do is we'll go and upload the a new file over here so what will this will add the new profile image over here or default image so let me add the New Image over here and now I have uploaded the new profile image over here and now you can see that we can get the URL of this particular profile image so you can either download delete or you can get the URL so if you have the uh if you what if you create the private bucket without the public one that means the the URL will be expired on the certain time you can set the time limit over there but since this is a public we can get the um the URL that doesn't expire if you want to create the the URL that's going to expire after a certain time you have to make use of the private bucket so we'll just copy this one from here and what we'll do is we'll go back to our script over here that we have created and here we are going to insert that script over here so for that let's go and insert it directly over here so I guess we don't need this one for now and I'll just directly insert the string value over here now this is the URL for our profile or the default profile so that should be the uh one that we currently have over here and and now I can go and run this particular script so it's going to create us the uh so fill so we have some syntax error over here so let's try to see I guess this is the comma syntax that we have over here so let me try to run this one again and so it is successful without any error so once we go back to our let's go back to the tables or sorry the database over here and if you go to the function we should see the one new function is created for us which is a handle new user and the written type is of the Tigger over here so if you go and edit this one you can see that what we are doing over here so you can update this particular command over here or the store procedure and I guess that should be uh fine so if you go back to the Tigers now you will see that we have created one new Tigger so that will be of the if you go to the uh I guess this is on alt user created this is going to call the handle new user over here so the event type is up after the insert so this is on the on off so if you go to uh let me go and edit this one over here and you can see that the you have the option so this is of the origin so you can just select some of this but let's keep it as a default behavior of the origin over here so just close this one and you can also manually create the trigger from here you have to give the Digger name so previously we created uh with the SQL command but here you can also uh or create through the GUI over here so you can select some of the uh like the art user and the event type like the when it is inserted or when it is updated or when it is deleted so you want to dig out some function over here so once you select that one so Tigger type before the event or after the event which means if you select insert before insert or if you select the after which means after insert over here and the uh or uh all these orientation over here so you can just select the row or the fire once once for each process row or this statement over here and if you go down you can choose the function that you have defined so this is the uh the function that we have defined so when if you want to trigger that one you have to return the type as the um the trigger so if you go back over if you go back so just confirm this one and cancel it if you go to the function the written type should be of the trigger if you want to run it as a trigger so the written type that we previously mentioned each of the uh Tigers I guess we don't have that but if you go to this script we should get that one over here so if you go over here the written type over here you will see that the written type is of the Tigger right so if if you want to return a text or you want to return it as the uid so you have to make this as a written time but current written type is of the trigger that's why we are able to process it through this particular article so once you create a new trigger you can manually add that function call over here so these are the our default one that is generated for you and we are good with that so let's go back to our Bucket over here this is of default Bucket over here and what you can do is if you go to this particular default and currently if you go to the policies over here we don't have any of the policies so this is another good practice over here so you can just go and create the new policy over here and you can set like who can access it or who can create it over here so for now let's just keep it as the simple without any of the policy and next thing is that we also created the a table over here and if you go over here with this particular profile table you will see that no active um the um the row level security policies is enabled over here so if you don't have the rollable security policy enabled by default you can read or insert it over here so what we have to do is we need to set some policy over here because before we can insert update or delete or select a record from this particular table so let's go and add the new user over here and we'll try to okay so what we have to do is we can copy this email address and I'll just try to add the new user over here and I'll just select the uh plus one over here so it's going to go to my same email address and let's add the password so let's see uh once I add the password over here okay so sorry for that I need to create the new user over here and that will be of the uh let's add the plus one and this will be of the APC one two three four five six over here and let's go and create the uh so let's Auto confirm for now this is just a test case over here and once we have that so database error creating a new user I guess we have some error over here and uh I'm not sure why this error is coming over here but let's go and not Auto confirm it okay we still have error over here so I guess if you go back to let me close this one from here you can go to the log over here and go to the Post case over here so you can get the unlock information from here so we are interested on the uh severity over here and just the error just save this one so it will give us the all the error log that we have over here so currently we have the uh okay so now we have the water URL over here and I guess uh this is the one so let's go and see this is the one that error that we have uh so let's go and see what is the area so column Avatar URL refers to the profile does not exist so I guess if you go to the uh column table over here and in the table this should not have the Avatar So currently we have to make this one as the air water and the score the URL over here so that is the table name was mismatch with our the tiger that we have generated or the function that we have generated because if you go to the function we have the uh this particular function if you go to edit function we are inserting it to this particular uh the Avatar URL but we just had a water so that was the issue and now if we go back to our tables over here and let's create okay so we need to create a new user for that let's go and grab the new user over here and let me add the uh plus one over here and let's create the user over here and we still have the username of the releasing profile Wireless null constraints So currently we are not sending the username so that's why it's not able to create from here so we have to run that one from our application itself because if you go to the register page we are sending the username and username can't be null right so that's why so what we have to do is we'll run this one on the uh so let's try to run this one and create the new user over here and let us try to register a new user from here and I guess that should be the one so it was able to generate and let's try to go and reload it from here and now we are getting a new user and if you go back to our table over here and in the profiles we should get that one over here so now you can see it has automatically inserted that particular Row for us which is the cool feature that we get from our function as well and function together with the diggers so we created a function over here or the store procedure and then we trigger it when the new user was created on the auth table it's going to create that one it's going to insert a new record to our profile table so that's cool right so now we have the profile information over here so you get the username full name is nullable so we are not passing that information you can pass that information as well and then the email and that is online to the false over here so now uh we have the profile table ready over here and the next thing is that what we need to do is um we need to also check whether if we delete this particular user from here it's going to delete that record in our um the profile table so let's go and delete the user from here so if I I'm going to delete the user from here and that should also delete the user in our profile table over here so now we can see that the profile table is empty so the um the table releasing is working perfectly fine so next thing is that what we need to do in our application is we have to validate before sending the uh before sending the information like we need to check the form validation we need to check with the user is already existing our database we need to check whether the email address is already exist in our particular database so I guess we will be doing that on the next lecture so uh till then have a great day yeah hello there and welcome back and let us continue with our lesson over here so the next step let us go and do the form validation first of all and I'll just go to the register underscore page. and I'll go to the sign up function over here and final I'll just go and say each valid over here which is of equals to the underscore the uh formkey that the current state that we have and then I need to check the level type and I need to do the validate over here so the next thing is I'm going to check for the if condition over here and condition will be of the uh each value that we have is not equals to the null and also if it is of the each valid over here so which means that our form is perfectly valid so what we'll do is we'll just cut this section from here and we'll try to move this one inside is of our if conditional over here so that should be fine over here and let me try to erase this intent over here let me try to erase the intent over here so I guess this should be fine and try catch it over here so let me try to erase this one properly okay and once we have the form validates next is we are going to before we are going to call this sign up we need to check whether the username exists and the email exists on the database already so for that what we are going to do is I'll just go and create the final uh each Alicia email each email uh I think so each email exists over here and that will be of the uh our weight and we are going to use the super base so sub a super based over here dot the are from so I'm going to call the table over here table will be PR f i l e s profiles so this is the uh travel uh the profile that we previously created and now I can just go and call the in like I need to select the I want to select only the column over here that will be of the email so I'm going to just select the one column over here that will be of the email and you can also select the multiple but the requirement is just to select the email to check whether the email exists already in the table or not and we need to also check the um the so I need to remove this one from here and EQ over here which is of the equals to the column is of the email and the value will be of the uh underscore the email controller dot the text and now we are going to check whether the email or each of the equals to this particular the the email that you have or the user have inserted so I'll just go and select the uh limit to just a one row over here and then the I'll just say single single or maybe single so this will give us a null if the record was not found so we are going to use uh it's the written type will be of the null if uh it doesn't find the email address that is equal to the controller dot the text and the same thing that we will do over here with the another one over here and another condition that we are going to check is is a user exist to the user exists or the user name so we want to have a unique username right so we are selecting from the same table which is of the profile and we want to select the username over here and then the username will be of equals to the underscore the username controller dot detects and once we have this what we want to do is we want to check the condition over here so we'll check for the if condition over here if the uh each email exists so if the email exists over here is not equals to the null so this may return a null value so that's why you want to check it so if it is not equal signal which means there is some record and uh also it should be of the each email exists and if it is not null then it's going to give us the map over here so I'll check that the email so it should be of the email over here and uh dot the two string I guess we'll make it not empty so if it is not empty that means there is a a record of the email so what we'll do over here is we are going to um throw the error over here so let's go and throw the uh AUD exception sorry it should we throw the AUD is odd exception over here and then the message is lesser em email already exist over here so just go and close it over here and I'll make this one I think turns over here so I have to do the same thing for this particular uh the user exists so if the user exists I'm going to throw an exception or the odd exception over here and this will be of the user name over here and this should be of the we'll just say the username already exists over here so that should be fine over here and what we can do is we'll try to reload the application over here and let's go back over here and let's try to register with the new one over here and uh so what I need to do is I'll go back to the over here and I'll just copy the email address and let's come back to our device over here and I need to create the new users first of all so before we can validate and I can just go and say that it's of the plus one and I'll just go and say the username will be of let's say uh it should be of let's say uh Ric ORD Richard or let's see we just give a user you a user one so user one over here and the password so let's create the username and the password and let's try to register this one over here and once it is registered what we will do is we'll try to go and register with the same email first of all so I'll just get plus uh one over here and this will be of the same user right it was the user one I guess and then the password and once it is set what we'll do is let's go back over here and let's put the breakpoint over here so what I will do is I'll put a breakpoint on the uh condition over here and let's cut and try to register this one over here so each email exists over here we are still getting another over here and why we are getting null is if you go and take a text value this is of this particular email address right so this is already present in our dbo versus if you try to reload this one you will see that it is already present over here as well as if you go to this particular profile table you will see that that is already added over here but the problem over here is that we don't have the active the row level security policy so since we don't have that it's not going to able to read it from here so we'll click on that one and we are going to add a new policy over here and you can select it from the um the starter template over which here or you can go and create the new one so if you go back and customize it yourself and you can just go and for the select what you want to do is only the authenticate user so you have the role over here this is the role that they provide so I'm going to select the authenticator so if you set the none over here I don't means that nms user so without the authentication they can access that but we don't want that so we only want the user with the authenticated user will be able to access that one and here we need to return it true or defaults and the policy name you can just keep the any name so I'll just say what we have is the user read the rpro file Prova profile data [Music] each only availav available for a u t h e n d i authenticated right that's indicated uh users so I read the profile data profiles data is only available for the authenticated use so I'll just review this one so I guess we forget to provide using expression over here and that will be of the one and just review this one and you are going to see that create this particular policy right on this particular table which is a public 30 profile and the permission for select is to authenticate using one so just uh save this policy over here and I guess we have some error so that's funny so I guess I uh forgot to I guess this the this is not correct so what we'll do is we'll go back over from here so let's go and create a new policy and quick starter guide over here and okay so it should written as this particular policy over here so let's just use the okay so I need to return it true or false um I just said as a zero or one which is of the uh it should be on the true off also over here sorry for that one and I guess enable read access for uh a u t h e n t r c a t e d authenticated users over here so this will select and from here I'll select the authenticated and this should be of the true and I guess that should be fine so let's just review this one and here we are using the truth so make sure you you if you are using the customization just pass it as a true um so just save this particular policy and now we have that particular policy over here which is to read it so now you can also add the same policy over here which is to go and uh the uh access the inset so this one should be only available for the authenticate user so enable insert for authenticated users only so you have to do the same thing for the rest of your uh insert and then you have to have a new policy that is of the uh I need to use for the uh update over here and this is only available for the authenticated users over here so review this one and it should be only available so permission for update to authenticate user is true so just save this policy over here enable a read access to all user I guess this is not correct so uh this is update update this one so I will delete this one I guess I selected the wrong template over here and I need to go over here and this is the update so it's going to create this one so here I'm going to tell select the authenticated over here with the email and then the auth.jwt is emailing check it's go it's going to check that one so here you can see two authenticated users permission for update to authenticated user using the email and then also it's going to use the uh with check so just save this policy and it provides a lot of the default configuration so it's pretty cool over here so you don't have to write it by yourself so delete so it's also for only for the authenticated user so I'm just going to set that one and uh let me review it and then just save that particular policy over here and I guess that failed to create the policy panel which I did doesn't exist so uh I guess the user ID doesn't exist over here so if you go over here and I'm going to use this one and it should be able to delete using odd ID all the uid is equals to the user ID so we don't have this particular column over here uh I guess we will be using this as the okay so I can't edit this one over here so actually it should be of the ID over here cannot add it over here so okay so use this template so it should be over here not there sorry for that it should be of the UI ID over here review it okay so back to edit and this one should be for only the authenticated user so uh currently we don't have the user ID in the by default it's uh ex expecting that your profile table should have the usual ID but we have the ID over there so you can just use that one and then save that particular policy and we are good to go so now once once we have this particular policy enabled we'll go back to our application and just go and run this one and I guess we are going to use this one over here and now you can see that we are still getting now so let me try to reload the application over here and let's try to log in over here so let's let's try to register and I'll try to register with the same account over here and then the I user one over here and let's set the password over here and just register it and now we are over here so email exists over here so let me see what is the value so email is already active so now you can see we are able to and now what we can do is we can uncheck this one and if I try to go back over here and if I try to register we should get the the snack bar over here email already exists that's cool so let's try to change this one to our different email over here and uh let's again try to uh okay uncheck this one over here and uncheck this one so let's try to see if you are able to get the username as well so let's try to register over here and now you can see that username already exists as well so let's try to make this one as D2 over here and let's try to register it over here and we should be able to register by now so if we go back to our table over here and now you can go to the user over here or the authentication so now we have the two uh user that is um pending for the um the verification but you can't log in now so if you try to go and let's try to log in to our user over here and if I try to say if I try to login over here we can't log in because email is not confirmed that's correct so what we need to do is we need to confirm this email so let me go back to my email and confirm this particular to email address and once we have successfully confirmed our email address we should be able to log into our application and let's try to log in over here and now we are navigated back to the dashboard over here so that's cool over here and now we have such successfully implemented our the validation over here we are able to validate our email address and as well as we are able to validate the user so we can check now whether the user exist or whether the email exists in our database itself and also we have done some form validation over here so I guess that should be the one that we have to do over here yeah hello there and welcome back and let us continue with our lesson over here and the next tip what we would like to do here is let's go back to our dashboard page over here and let us try to add some of the components over here so first of all I'll add the app bar over here and that will be of the app bar and let's try to add the title over here and that will be a frequenced off the text over here and let us call this one as DDA ss-boer the dashboard over here and also I'll make this one as the center tile to be of the true over here and once we have that let's also go and add the accents over here so in the actions we'll add the one button so the user can click on that one and log out from the application so let's go and create the icon a button over here let's go and create the icon button over here and then we have the unrest over here so that will be of the function call and then we'll have the icon over here so icon will be of the cons of the icon and then the icon start the log out so we will find the log out over here and that should be good to go over here and we can just use the Super Bass over here super best that we have already created dot the odd we'll use the r dot the assign out from here so if you take a look this is going to sign out we sign out the current user if there are if there is a log in user so this is also a future so what we'll do is we'll make this one as the async over here and we'll call this one as the await over here and what we need to do is once we log uh log out or design out we also need to navigate back to our word login page as well so let's go down over here and let's create the one function that's what we have devoid and then we'll just see the um navi navigate to the log in page right so we'll uh okay so I guess the spelling is not correct so log i n log in page and here we'll go and call the navi Navigator dot the first and remove until so we are going to push and remove until we need to remove the current route and navigate to the login route over here right so for that uh material page route over here and then the Builder over here so the Builder will be of the login page over here and this should be of the const over here and then we are good to go so now we have this uh navigate to the login page function and let me close this one over here and now I can call that from uh here right so let's go and call that one and we are good to go so next thing is that on the uh let's go after this we'll have the body right so in the body I guess I will just have the um Center over here and with the center has the child and let's add the um currently I guess we don't have anything so let's just add the column for now and then uh currently we don't have anything to add over here next is I will go over here and we'll add the um okay so let's add The Floating Action button over here so The Floating Action button Floating Action button so let's say the extended one and let's go and add in the function call over here and then we have the label over here so label will be of the const of the add text over here and that will be of the chat over here and that should be a fine over here and uh also we can have the icon over here right this is extended so icon will be const of the icon and icon will be the icon start the chat over here and that's it be fine so we have that already and on pressed we are going to navigate to the another page so let's go down over here and let's create the uh void over here and Navidad navigate to the chat page over here and with this chat page let's go and have the new folder over here and let's call this one as the chat and let's create the a new file over here that will be of the chat underscore the page dot the dot file let's create the uh stateful uh we get over here that way we have the chat page and let us import the Metro package over here and I guess we can just remove this one for now and this one as well so from here we are just going to return the uh scaffold for now and then the scaffold and then the uh app bar over here and then the app bar will be of the uh let's say the title and that will be of the cons of the text and the text empty XD text over here that will be of the chat over here and let's make this one as the center title to be of the true over here so we have that and I guess that should be fine over here and now let's go back over here and we need to call that one so let's go and call that function so uh and if not this one so NF is here navigate uh Navigator so t o r Navigator dot we can go and push the route so let's go and push the context and the route will be of the uh and just copy this one from here and then we'll just pass in the uh chat page over here right so that should be fine and let's just try to erase this one okay so I guess we'll try to balance it from here and this will be of the second line and let's move this one from here to here and that should be fine so now we can use this navigate to the chat page whenever we click on this particular button or The Floating Action button over here and uh I guess in the center over here uh we will add in the um let's say a const of the text for now and let's add in the um number n u m b n u m b e a number of users users and let's go and create the one available on the top that will be of the uh string and that will be of the num be a number of our users users which will be of equals to the uh let's see a zero over here for now and and then we'll just go and put it over here as the um that will be of the number of users that we have right and I guess that should not be of the const okay so now we are good with that so let's try to uh run this application let's try to rebuild our application and let's go back and try to log in over here and once we log in you can see that we are on the dashboard over here and what we need to do is we need to remove the debug check Banner so let's go to the main over here and let us go and remove that one over here from the Metro Banner debug check Banner that should be of the false over here and let's try to uh hot reload over here and then we are good to go so once we click on this particular chat we are on the chat page currently we don't have anything that's working fine and then the next thing is once we log out over here let's try to log out from here and we are back to the login page that's cool and let's try to log in again and one two three four five six over here and let's try to log in and once we log in and if I try to now re uh restart the application it will take me to the login page so the next what we need to do is we need to check whether the user is already logged in and if the user is logged in then we need to navigate to the dashboard otherwise we need to navigate to the login page so I guess we will do that on the next lecture till then have a great day yeah hello there and welcome back and let us continue with our lesson over here so the next step is let us go to our page over here and let's create the new page over here and let's call this one as the svlas it's slash page over here dot dot file and let's create the uh State full over here so if the stateful Wicket over here and let's import the uh flutter material package over here and then the next is let's say make this one as this car fold over here that will be of the uh let's add the app bar over here I guess we don't want to have the app bar for now and we'll just make this one as the body over here so let's just make use of the body and it will be of the center and in the center we have the child and in the child I'll load the uh circular progress indicator over here and let's make this one as the const over here so why I make it as a the circular progress indicator is once we load this particular screen we want to show the loading instead over here so we can check for the condition whether the user is logged in already or not so here we will have the uh let's have the init over here so you need to stay over here and let's go and remove this one from here and let's go and create a one function over here so void so she can check over here so okay so what I need to do is I need to make this one as a function and here we are going to call the uh let's go and say the final scss iron session which is of equals to d uh Super Bass that we have right and then we'll use the alt over here and then the current session so we'll try to get the current session over here and we'll check for the condition over here so that will be of the if and then if an else visual condition will be the uh session that we not the super base that will be of SCS sorry it should be of this session as essential that we just created each of equals equals to the uh null so if this session is of the null so if you take a look this can be of the null right so we are going to check if the session is null that means we are not logged in here so we need to go to the login page so for that in navigator that we have Navi G80 Navigator dot will go and call the push and remove until so we want to remove the current route and navigate back navigate to the login page over here since we don't want to come back to this particular loading page again so this will be of the route will be of the material pH route that we have and then we have a builder over here right and then we are going to call the login page over here and that should be fine so let's try to make this one as the const over here and then if it is not then what we want to do okay so if you if this session is null then we are going to login page and if this session is not null then what we want to do is the user is already logged in so what we have to do is we need to go to the dashboard page over here so that should be fine and what we need to do is let's make this one as the private function over here and let's go and call this one after we in initialize it so let's go and call it check the user session over here and I guess that should be the one over here and let's go back to the main over here and we need to replace this one with the uh first of the SPs plus page over here and I think this is not the constant over here okay so let's remove that and let's go and remove this one as well from uh here and we are good to go now and let's try to um let's try to open up our application so let's open this particular application over here and what we'll do is we'll try to log let's try to reload the application and okay so we got some error over here and during the overlay we get cannot be markers needing to so that maybe because of this last piece that we have over here right so that is the one so what we need to do is I guess we need to some delay put some delay over here so let's go back to the uh let's go back to this plus page over here again and I guess we have to make this one a function called as the future so we can add the uh future dot the delay over here or what we can also do is we can also make use of the uh WIP we get binding so we get binding over here so widg 80 Wicket binding over here dot the instance over here dot the add the add the post frame callback over here and let's try to uh use this one over here and let's try to see if we are able to fix with that over here and let's try to move this one over here and let's try to see if this will fix this particular error so let's try to hard reload over here and let's try to see okay so now that is working already and this should be fine or often if not then you need to make this one as a synchronous function and put some um manual delay over here but I guess this should do the this is the better uh way of handling that one so let's try to hot reload again and now we are on the dashboard page over here and if I try to log out over here and if I turn the hot reload I should be on the login page over here and now if I try to log in again with this particular user over here and let's try to log in with that and let me put in the password and let's try to log in now and we are on the dashboard so let's try to hot reload again and we are again back to the dashboard so that's cool and I hope this is the one that we are doing for the authentication and the authentication flow is currently working fine and the next step would be to work with our chat so let's meet up in the next lecture till then have a great day yeah hello there and welcome back and let us continue with our lesson over here and the next tip let us try to add the material theme over here and for that we will be using the uh Flex color scheme over here and you can go to the pub.baboo here and copy this particular dependency over here and let's go back to our uh project over here and let's add the dependency over here and you can run the Fletcher Bob gate so fluted flutter pop the kit over here and let's get the dependency and once it is done what you can do is let's go back to our main file over here and we need to add the uh our theme over here so for that let's go and add it over here so let's go and add the let's add the theme first of all and the name will be of the flex Flex 10 data let's import the uh Flex theme data over here and dot d we will use the light first of all and in the light what we can do is we can use the uh scheme over here and the color scheme we can select from the pre-built scheme over here so flx Flex uh scheme that we have and you can see there are a lot of the preview I guess there are around 54 or something so uh you can just select any of the preview theme from here so let's select the uh the purple or deep orange M3 and then let's remove the cons from here because we can't use the const over there and also I'll go and select the I use the Metro 3 over here to be of the true because by default it's not using the material three and also use the Metro 3 errors color that will be of the true over here and if you go back over here and if you read the documentation over here and here you can see that you have the 52 pre-built color uh color schemes over here maybe they have been added more you can go and check out on the official documentation over here so you can just go to the home page over here and you can go and take a look on the home page over here and you can just go to the examples and they also have the playgrounds over here and you can just go and read the documentation over here so if you see all the things over here you'll find all of the temp services so currently there is a 50 52 over here so you can just go and select any of the pre-built them that you require so let's go back over here and I'll just copy the same thing from here and let's go and add that one below over here and that will be of the Dark theme so dark theme will be of the we'll use the pre-built Dark theme over here and we'll use the same color over here and once we have that uh we will use the theme mode which is c h e m e 10 mode over here and I either you can use the uh theme mode dot the dark light or the system over here so let's select the system and I guess we don't have to make use of let's remove this one from here and let's try to remove this one so we don't need a scaffold because the there is already scaffold in the uh splash page over there so that should be fine we have added the uh we have added the flex color scheme over here and we set up the theme over here and what we can do now is let's try to reload the application and let's take a look so now we have a different looking UI over here which is using the material 3 over here so if you go over here and you get a different okay so we don't have any of the E1 but you can see that the app bar has a different color over here and that should be pretty good over here and if you can log out and you will see that we have a different looking UI and it's beautiful by default so you can just go and try to run some of the properties if you like but let's just keep it as a simple over here so I guess that's all for this lesson and we will meet up in the next lecture till then have a great day

Channel: Mobile Academy

Views: 1,822

Keywords: flutter, dart, android, ios, supabase

Id: tnbIbMVcUDg

Length: 122min 21sec (7341 seconds)

Published: Tue Jul 04 2023