Flutter Database & User Authentication Quickstart

if you're learning flutter and  want to create an app where users   can log in and store some data on your  database you've come to the right place   today we're going to take a look at how you can  create a flutter app where users can log in and   update their profile information from the app  let's Dive In we'll follow this build a user   management app guide that you can find the  link in the description below the first step   is to create a flutter app which I've already  done here we can then head over to superbase   to create our database if you haven't used Super  Bass before you can head to database.new to get   to this project creation page we can give it a  project name generate a secure password and I'm   just going to change the region to Japan because  that's where I live but you should choose wherever   is close from you and we can hit create while  our supervised project is being set up we can go   to the next step the next step in the guide is to  set up our database schema but we're going to skip   this process because our Super Bass instance is  being created let's start with adding supervised   flyer library to our app copy this piece of  code and paste it into our Pub spec diamo file make sure you run pump get which should run  automatically on Save if you are using vs   code let's go on to the next step setting up  deep links in the app that we're building we   are going to use a magic Link login which sends an  email with a link to the user upon signing up to   the app and clicking the link completes the login  process since the user needs to come back to the   app after clicking onto the link we need to set  up deep links to bring the user back to the app   deeplink's fun app can be anything you like but we  will use this link for today let's take a look at   the instructions open iOS and copy this piece of  code we're going to open iOS Runner info.plist and   we are going to paste this piece of code that  we have at the end of this envelope PLS file great that's it for iOS let's  move on to Android settings   again we are going to copy this piece of code  and this time we are going to open the Android   manifest file open Android app Source  Main and androidmanifest.xml at the end   right before the ending tag of activity we can  paste it in make it cleaner and that is it for   Android there's one final step to completing the  Deep link settings and that is to copy this deep   link into our Super Bass dashboard so I'm just  gonna take this and go to our Super Bass dashboard   which is done setting up open URL configuration  within the auth setting space and just paste it   in as the redirect URL now that we're done with  deep link configuration let's go back to the   database setup step that we skipped earlier we can  copy the SQL file into our Super Bass SQL editor click new query and just paste it in   this sequel is creating a table setting  up some row level security policy   and then also setting up some database function  as well as triggers to automatically insert a   new row whenever new user is created let's  run this code and see what we get but we   don't need this part because this is related  to storage which I'll explain in another video   all right we can confirm that the table is created  by going to the table editor clicking on profiles   table and seeing that our table is right there  note that obviously there's no data yet alright   let's get back into writing some flutter code we  can run uh the app in debug mode and while that's   uh running in the background let's go back to our  guide scroll the way to the bottom where we left   off and start with this main function so the first  thing we need to do is initialize Super Bass let's   go back to our main.dot file and edit the main  function at the top we're going to make this async   and we are going to call Super Bass dot initialize  now we need two parameters for this initialization   one is URL and another is adding key and we can  get both of these from our Super Bass dashboard   go to the top home page of superace  dashboard and if you scroll a bit   there is the project API information we  can copy the project URL and the Anon key we should also take this off flow  type parameter which is set to pixie   this is just sad additional security  layer on top of our authentication system we can also keep a supervised variable just below  the main function so super bass status didn't   start client and we'll be using the supervised  client access to our Super Bass servers such   as authentication and database now let's go back  to the guide and move to the next step which is   creating a splash screen or splash page I like to  call it we can start by creating a new page close   as Android and then go to lib and create a new  file Pages slash slash pays.dart now what this   splash page does it's is it's going to be a page  where every single user lands first and it's going   to redirect the user depending on whether they're  signed in or signed signed out UI wise it's just   going to be a simple preloader so we're going to  have scaffold and then Center circular preloader   and then we're gonna implement the redirection  logic first let's convert to this wizard to a   staple wizard so that we can take advantage of the  life cycle methods and let's Implement day in its   state within this in it say we are going to call  a function called redirect which is going to check   if the user is signed in or not and then it's  going to redirect user depending on the sign in   state now one trick that I like to use is to wait  for a duration of zero whenever calling a redirect   function within the init State this allows us to  safely call the redirect logic after the amount   of the wizard now within this redirect method we  can check the session by surveys.auth dot current   session and basically if this session is not we're  going to redirect the users to a certain page and   if it's not null we're going to use redirect  you the user to a different page in this case   we're going to have two pages one is going to be a  route called account and then the other is called   slash login now we just have to make sure that  the wizard is mounted here with the if statement   and then we can move on to the next step which  is creating the login page so let's go back to   our guide scroll a bit and here we are creating a  login page we can go ahead and create a new file   called login page.dart so we can get started  with creating the content of this page it's   going to be a stateless widget for now give it  a name of login page and change the content to   scaffold and inside that scaffold we're going  to give it a app by with the title of login now this login page is going to have a body of  list view because we're going to have multiple   widgets in it and first wizard is going to be  text form field let's create a controller for   this but before that we need to convert it to  a staple Wizard and create an email controller   of a text setting controller and make sure that  we dispose this controller in the dispose method   now let's give this controller to the controller  parameter of our text form field and let's also   give it a label so that is the creation  input decoration and label of text of email   we are also going to create a elevated  button here which will perform the   login operation the child can be just  a text widget with a label saying login now let's create the login logic we're  going to get the email address from email   controller.text.trim the trim will remove any  excess spaces and then we're gonna pass that   into Super Bass dot auth.signin with OTP now the  sign in with lgp method sends an email to the user   with the login link so let's tell the user to  go check their email inboxes with a snack bar let's also take care of the mounting problems so  we can check if it's mounted and put the scaffold   messenger part inside the if statement well  let's also do some basic error handling we'll   create a try catch block and put the code  inside chai and inside this catch method   I think we can show a snack bar again so copy  over the snack bar code and paste it in there   and we can say something like you know  there's an error occurred please retry   something basic hopefully you get the idea  and we can also change the background color to   air color in this case we're taking the theme data  and we're getting the air color of the theme data   we mean the const and everything should be  good now Super Bass throws some of specific   errors as well and we can catch that with  on off exception every single auth exception   comes with comes with its own error messages  so we can pass that as the snack by content throughout the rest of the video I'm gonna omit  any error handling just because it's not so   exciting to watch as a video content but hopefully  this piece of code gives you a basic idea of how   you can go about error handling sending out emails  working great but we also need to make sure that   we can detect when a user clicks on the login  link and to do that we're gonna set some Outlets   news within init state so let's create a init  State function and we can call the Super Bass   dot auth.on auth State change listener so this  is going to return a stream we can listen on   it and inside that stream we can extract the  session data now this session can be either   no or has have some session data so if it's not  null we can redirect the user to a account page since we're listening to a scene here we have  to make sure that we're disposing the stream   subscription we can copy the type and we can  create a variable up here called auth subscription   paste a type that we copied over make sure  we import um a async and then we can assign   the value up there within in its state and then  within this pose we can make sure to call cancel   and that should be it for the login page and  we are on to the next step which is setting up   account page now before we complete the account  page I want to test out the login logic to make   sure that the user properly gets redirected to the  account page so what I'm gonna do here is I'm just   gonna going to create a account page with some  scaffold in an OP app bar that says account so   that will know that when we land here it's an  account page let's then open main.dide and set   up some routes first we don't need this initial  boilerplate wizard that was created by flutter   create and we can give it an initial route of  Slash and then we can Define some routes there's   going to be three routes slash is going to be the  splash page so initially use lens on the splash   page and then they get redirected redirected  to either login page or the account page once the routes are defined we see the UI on the   right let me just quickly fix the UI a  bit let's give let's view some paddings and let's also get some gaps between the  button and the text form field okay looks great I think it's time to try it out we can  enter the email address Press login   CD snack bar go to the email and click and  notice that we are not redirected back to   the app and the reason is because we haven't  told Super Bass to redirect the user to the   Deep link that we've configured so all we need to  do is go to the sign in with OTP method and pass   the email redirect to parameter and the values  should be the Deep link that we've configured   so copy that over and we should be all good  let's go back and retry this thing Press login   we see a snack bar open our email and  Press login voila it opens up our app   and just like that we landed on our account page  I think it's time to complete the account page   what this account page does is it allows  users to edit their profile information   let's go back to the Super Bass dashboard to see  what kind of information we can use and we see   that there's a username column in a website column  in our profiles tables I think we can use these   two columns for the account page we are going  to start by converting the account page into a   stateful wizard and then let's create the username  controller as well as the website controller the body is going to be similar to the login  page we're just going to start out with the   list View and it's going to have some  text form fields one for the username   and we can give it a label so decoration  input decoration label and text of username we also going to make sure that we properly  dispose these two text form text editing   controllers so username controller.dispose  and then website controller.dispose let's   copy over these text form fields and create  the website website text form field let's also   add a elevated button so that we can submit and  save the information to our supervised database I'm just going to do some minor cleanups  of the UI so give some gas gaps between   text form fields and buttons as well  as give some paddings to the list View now let's go into the submission logic so once the  user presses the save button we're gonna first get   the username from the username controller I'm  also going to get the website from the website   controller and finally we are passing these two  values to Super Bass to be stored in our super   base database so call away super B stock from give  the table name profiles and then call update on it   because we are updating a row now we are passing  the username so we are creating a map of username   username and then website website now on this  update method we also want to make sure that   we are only updating the rows that we want to  update so we can append a EQ filter this stands   for equals and it'll make sure that we only update  the role that meets this criteria so what we want   to do is we want to make sure the ID column of the  table is equal to the user ID of whoever is trying   to perform the update and we are getting the  user ID from Super Bass star author current user   and we are passing it to the E key filter at this  point I think we are ready to try it out so let's   type in some username and also a URL for the  website and hit save okay we haven't implemented   any user feedback but if we go to the Super based  dashboard we can see that the username is entered   and the website is entered as well let's see if  we can update the values as well let's modify this   do something else and hit save and we see  that the value is updated now one thing I   noticed is that if we refresh the app we lose  the data that's because we haven't loaded the   initial data from the database so what we  can do is we can call initstay and fetch   the data inside here let's create a separate  function we can call it get initial profile and load the data in here first we need to   get the user ID because that's the  target row that we want to select   now we can construct a query here so we can create  final data equals away super restock from give   it the table name profiles and then dot select  because we are selecting data from the database   and then we can append the EQ filter to filter  out the one row that we want to select and then we   know that for sure we are only receiving a single  row so we can append the dot single to modify the   return data type from a list into a single map now  since the data is just a single map we can just   get the values from them call set stay and set the  values to the text setting controllers text value   and we should be good refresh the app and we see  the default value being populated and we can also   update the value with any new data let's also add  some user feedback because it's kind of sad that   nothing happens when we press save we can just  create a snack bar saying your data is being saved also the mount check and press save and we should  see a snack bar and the data is being updated   now at this point the app is fully  functional and I only have one last   cherry on top to finish it up and that  is to edit the theme so we can go back   to the guys scroll all the way to the  bottom and copy the Super Bass theme   copy and paste it into our material app and  just like that the app is Super Bass themed   thank you so much for watching and make sure to  check out more flutter contents on this channel

Channel: Supabase

Views: 12,642

Keywords:

Id: r7ysVtZ5Row

Length: 18min 48sec (1128 seconds)

Published: Wed Jun 14 2023