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 Supabase to create our database if you haven't used Supabase 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 Supabase 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 Supabase instance is being created let's start with adding Supabase 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 Supabase dashboard so I'm just gonna take this and go to our Supabase 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 Supabase 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 Supabase 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 Supabase 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 Supabase 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 Supabase variable just below the main function so Supabase status didn't start client and we'll be using the Supabase client access to our Supabase 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 Supabase 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 Supabase 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 Supabase 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 Supabase 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 Supabase 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.
![DAX Filter Context Basics [Full Course]](https://i.ytimg.com/vi_webp/Rpa8mDH7mes/mqdefault.webp)
