Custom Authentication (JSON Web Tokens)

in this video I'm going to show you how to use custom authentication in flutter flow using Json web tokens now before we set this up let's understand how Json web tokens work so here's the process you've got your front end and back end when a user signs up or logs in you'll send that authentication data like an email and password to your backend service so this could be Google Cloud platform AWS xano or any service that supports Json web tokens then the backend will generate a token send it back to flutter flow and flutter flow will securely store it after that any other requests to your backend like getting photos will only work if you also send along that token flutter flow also allows you to set a time for how long this token will be valid and a refresh token so that users can securely stay logged in okay let's set this up so come down over here to your settings and into authentication you want to enable authentication and then choose the authentic ation type of custom next you want to set your initial pages so your entry page is the page that the user will be directed to when they're not logged in so that'll be like the signin page and we have one set up right here and then when the user is logged in the page that they'll be directed to and that's this logged in page that I've got right here okay down here we've got a few additional options the first one is for persisting authentication sessions this just means when the user closes the app and then opens it again if they've been authenticated before they'll be authenticated now that is their tokens will be securely stored on the app this is great so that the user doesn't continually have to sign in every time they use your app and this final option down here allows you to associate your user to a data type what does that mean this is for if you want to store additional information about your user that you can use throughout your app things like a unique user ID or a first name and last name and we'll set this up but not yet because I want to show you it when we actually encounter it when we're building out our off all right so we're ready to start building this out so let's come into our UI here and into our authentication page and let's start on this create account tab right here so we get into get started because we want to bind the logic there we're in our second tab here and let's add an action I want to give ourselves a little bit more space so let's open it in the action flow editor so what do we want to do well you might think that we just want to go straight for our authentication and when we search for it we can see our custom authentication and we want to log in but this is actually the Second Step because remember the logic is to send the authentication credentials to your backend service first then we receive an authentication token back that we give to flutter flow we would put that here so first we need to make a call to our backend and remember that can be whatever backend you're using for this demo I'm going to use Zan so here in xano I've got all of these end points set up and for the sign up one we're going to use this post sign up endpoint so let's go in there and take a look at it it accepts a name email and password and it's going to create an authentication token and then return it okay great so we're just going to need this endpoint right here so I'm going to copy it and we can jump back into flutter flow and we need to set up an API call so let's close this out for now and go into our API calls and I've got this set up already right here then we need to set up our body which I have already done with our name email and password these are coming from variables of course because this will be dynamic data because each different user that we'll sign in the this will be different data so we have those variables set up here and we're just referencing them here so our value for our name is from a variable and that variable is name and let's go into response and test let's change change it to Jane and let's change Jane's email and when we test it beautiful we get that authentication token back as we expected next we want to come down here to our Json path so we can save the path to this authentication token because that's the token we're going to need to store securely in flutter flow this is our Json web token so we want to add this Json path here give it a name we're going to call it jot and save it beautiful so now we're ready to put this call in before we do our authentication action so we can come back over here we can come back into our action flow editor let's add an action here it's going to be an API call and it's going to be our signup call we need to set our variables that is pass in those authentication credentials and so we're going to want our name we're going to want our password and we're going to want our email we're all binding those to the widget States in here so we have first name and we've got our password so that is password and then finally our email beautiful now let's just rename our output variable so it's a little more understandable so we're going to say off response great so now we need to change this order of logic right here because we make this call first and then get the token and then pass that token into our authentication here so we can just grab this and we can cut this action and we want to paste it in here in our true branch and that's because we only want this to happen if this call is successful beautiful now we're ready to bind these values so we want to give it our authentication token which will be from our action outputs and there's our variable right there next we want to say what from that response do we want this to be bound to well it's part of the Json body and a specific Json path that path is the one we already defined our jot and that's it confirm beautiful now you can see here that we've got additional information that we can set for our authentication action now these two go together right here because you've got a refresh token and when the token expires so here's what's going on normally your authentication token will only be valid for a certain amount of time and if you receive that time back from your server you can set that here once you've gone past that time then this authentication token is no longer valid well that's kind of annoying so you're just going to be randomly logged out well no that's what refresh tokens are for if you have a refresh token after this time has expired you can use this refresh token to get a new authentication token so for the user they will have a seamless experience they won't experience anything but the app will be more secure because this means if for any reason that authentication token is compromised or the user's device is stolen their account will still be secure okay but what happens when this time expires and this token is no longer valid like will they be logged out well not exactly there are two things to think about first if they close their app it expires and then they open it again they will be logged out that's provided that there isn't a refresh token or set another way flutter flow will check for authentication will check for this token when the app is opened up flutter flow will not automatically check at any other time in the app like navigating between pages but that's the second thing you can check for yourself so you have access to this so let me show you so if I come into any bindable attribute so I can just see what bindings I have available I've got this authenticated user and inside there I've got all of these options so whenever you want you can check if the user is authenticated so maybe if you have an especially sensitive or secure page you want to double check for authentication there okay let's go back into our logic all right next you can set a refresh token if you have one we're not going to send it for this demo then you can set your token expiration time this is a Unix Tim stamp and we're not going to set this either next we have a unique user ID most of the time this will come from your back endend and you would set that from your call we're just going to leave it blank for now and then we get to set user data this is for storing additional information about your authenticated user so what happens when you click this on is that a user data type is created for you and you can see this here but I want to show you where this lives it's in this section right here and it's automatically populated with three fields that you can delete or you can add more fields too so I'm going to add in a first name field and it's a string and create that there and you can add whatever you want in there so I'm going to go into my off settings and now we've got this user and I want to set that field of our first name because I'm collecting that so I'm going to come in here and I'm going to grab that from our widget State ah there it is first name beautiful okay so that's it that's a basic setup so we've sent our authentication credentials to our backend we've received back adjacent web token and we've given that to flutter flow to authenticate our user so now the user is authenticated so next we want to navigate them to our logged in page so let's come in here let's add a navigate action and we want to go to that logged in page beautiful now let's take a look at this second step in the process that is whenever we make additional calls we need to pass along that Json web token so let me show you how that works and to do that let's first look at the endpoint we're going to be using in xano so down here I've got this photos's endpoint where I'm getting all my photo records and here you can see that authentication is required that means I need to send along that token so let's set this up we're going to close out of here we're going to go into our apis and we've got this get photos endpoint so the URL is correct here and then we just need to add our header so we're adding this authorization and a bearer token right here of course this needs to be a variable because it's going to be different for each user so let's come over to variables here and Define a variable that we're going to call Jot and string and now we can reference that in our header so space and JWT beautiful so let's save that and let's first go over here and test it we're going to include our variable right here and let's just put it in something that we know won't work so let's test our call and we can see we're getting an air because it's unauthorized so let's get a legitimate token and then try this again so let's save this call down here go to sign up and let's go into response and test let's add in Jane e and test our call and beautiful we get a token right here so I'm just going to grab this and go back over to get photos come into response and test and put put in that token now when we test our call it works beautiful and the same process is with all API calls we need to Define our adjacent paths I've already done that I've grabbed this items and you can see the paths we need are going to be the image and URL field just for this demo okay let's go bind those so let's come into our UI here into logged in we're going to come to this list view right here and we are going to add a query it's going to be an API call it's going to be the get photos and we need to set a variable that our Json web token right there and we're going to bind that to our authenticated user authenticated token beautiful let's confirm that and we come over to give these things a name and we call them photos we're going to bind that to our response and that path we defined already let's save that we're making a bunch of children that's beautiful and now we just need to bind it to our images so let's scroll down to the path and we want to go to that photos item and we want to further Json path and it will be image. URL beautiful so now we're all set up when our user signs up we'll get that token we'll store it securely then we'll be navigated to this page where we can make another call with that token so we're ready to test this out all right so let's create an account and get started and beautiful there we go and that's how to set up custom authentication with Json web tokens in flutter flow

Channel: FlutterFlow

Views: 14,122

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, custom authentication, jwt, xano

Id: hnX3CvBtGvI

Length: 13min 3sec (783 seconds)

Published: Fri Dec 08 2023