FlutterFlow Custom Authentication with Xano

hey everybody it's Chris from xano and this video is for all of you flutter flow users out there I'm super excited today because flutter flow has announced support for custom authentication meaning you can use a backend of your choice to power the authentication for your application today I want to show you how you can use the new custom authentication feature with a xano backend we're going to go into Zano and I'm going to show you the apis that we're using and then we'll go into flutter flow and I will show you how to build this functionality so here in xano it's a very simple workspace I just have one table that's a user table and we have one user inside it when you add authentication to your project Zeno can generate authentication API endpoints for you you can either do that during sign up or if you're adding it later you can click on this add API endpoint button and go to the authentication category and you can add login sign up and an off me endpoint this one is just like a test to make sure that authentication is working I've basically kept those end points standard however I did make a couple of modifications just to make my life a little bit easier on the flutter Flow side so in the O login endpoint the only thing I did differently is I added a new Step this is update variable and what this update variable step does is it takes the user variable which is the user record that is retrieved when the endpoint runs and it adds the authentication token to that user object and it removes the password so let me walk through what's happening here so we get the record from the user table and this record includes a hashed version of the password we then check to make sure that that user record was actually returned we make sure that the password is correct and then we create an authentication token when you make an authenticated request against one of your xano endpoints you are required to supply an authentication token to that endpoint and that is so Zano can make sure that that user is authorized to access the endpoint as well as only return information that belongs to that user so this endpoint will typically only return an authentication token but I wanted to modify it to also return that user data in the same step let me show you what that looks like so we go ahead and run this and you can see we are given some user information here as well as that authentication token the same can pretty much be said for the signup endpoint however the signup endpoint because you are creating a new account there's no password return from the get record or add record in this case step so we don't need to unset the password key we just set the O token key instead now the O me endpoint all this does is again it's more of a test or a demonstration on how that authentication works we just get the record from the user table and we can only get that record if this user is authenticated properly by providing an authentication token and we return that record in the response so let's go over to flutter flow and let's show you how to set this up so I have again a very simple application here I have a homepage with buttons that redirect to sign up and login I have a logged in page and this is the page that users will be redirected to once they're logged in successfully I have a login page with a form so a user can log in and finally we have a signup page which is so the user can sign up to our application the first thing we need to do in flutter flow is we need to add a user data type the user data type just defines what data do we need to hang on to when a user signs up or is logged in so we'll go over here to the data types section we'll click create data type and we'll call this user and click create we're going to add a field to this this is going to be username and we'll make this a string we'll add another field to this and this is going to be email you may have more fields that you want to add here based on the data that your application needs to function that's totally fine feel free to add whatever you need here now we'll go over to our project settings we'll go to authentication and we will enable authentication our authentication type is custom our initial page is where we want the users to be when they're not logged in I'm going to choose my homepage for that and then the logged in page for me is just going to be logged in we'll go ahead and turn on this associate user data type and we'll make sure our user data type that we just created is selected now we'll go over to our API calls we're going to add an API call and this is going to be for our users to sign up so we'll call this sign up our method type is going to be post for the API URL we'll go back over to Zano and let's find our sign up endpoint and we'll click copy endpoint URL let's go back over to flutter flow and we'll paste that URL right there now we're going to go over to this body tab for the body type we'll choose Json back over to xano we'll click run and debug let's go ahead and reset this if you have any values here already and then we will copy all of this and paste it into flutter flow we'll go into the variables section and the variables that we need to add correspond with the inputs that are required for our signup endpoint so for me I need a name I need an email and finally we need a password now let's go back over to the body and we can take these new variables and we can just drag them right into the spots we need them so that should be pretty much good to go let's go over to the response and Test Section and let's try it out so we'll call this new user our email will be new user email.com and finally we will supply a password Let's test the API call we get a success we are returned the name email and authentication token as expected so now we need to Define some Json paths the Json paths will allow us to access these individual pieces of data a little bit easier while we're building out the rest of our applications functionality so let's go to adjon path we'll do a name we'll just call that name we'll do email and the name will be email and finally we need that off token there we go so that one is done we'll click add call now let's go ahead and add a login endpoint so we'll create another API call we'll call this login the method type is going to be post we'll go back to Zano go to our login endpoint we will copy the endpoint URL paste it right in there again we're going to be setting up a body as Json back to Zano go to run and debug we'll reset our inputs and then copy everything here and just paste it into flutter flow this is the same exact flow that we did for the signup endpoint let's define variables so we need an email and a password back into our body and we will drag these variables down into the appropriate spots Let's test our API so the email is new user email.com this is the account that we just created and let's test the API call so we get a success which is great let's go ahead and add our Json p paths uh these are going to be the same as the sign up end point so we'll do name we'll do email and we will do off token and we will add that call so now let's go back into our application and we are taking a look at the sign up page right now so let's click our sign up button we'll go to the action flow editor the first action is going to be under backend database and this is going to be API call the call name will be sign up we'll click set additional variables here and let's go ahead and Define our name email and password variables for this API call the value is going to come from widget State and that's just going to be our corresponding inputs so I have name we'll do email and finally we'll do password there we go and let's give this output variable name something a little bit more clear so we know what's happening so I'll just call this sign up so now we have a conditional here that says if sign up has succeeded what do we do when it does succeed and what do we do when it doesn't so when it does not succeed let's add an action here we'll do an alert and we'll just choose an informational dialogue for the uh title we'll just say error and for the message we're going to choose action outputs and we'll choose that signup action for the API response let's just choose raw body text so what this is going to do is if there is for some reason an error on sign up this will just return the entire error message so we have an idea of what we need to address if the signup is successful under true we're going to add a new action and this is the new feature that flutter flow recently added that allows this to work the custom authentication section here we're going to choose login so we can log in the user we're going to set the authentication token so that is going to come from action outputs sign up we'll choose Json body this time we'll choose Json path and finally we will choose off token we'll turn on set user data we'll choose create data type and user We'll add a field the first one is username and we can get that from the action output so we'll choose uh Json body Json path and name we'll click confirm let's add another field and this will be our email so again we're choosing action outputs API response Json body Json path and email we'll click confirm and that's it we are all done we just need to make sure that we navigate to the proper page when the user is logged in so we'll do an add action navigate to logged in and we are good to go so we'll close that and now let's go over to our login page and we are going to do the exact same thing so we'll click our login button we'll go to the action flow editor we'll add an action and this will be under backend database API call this time we're going to choose our login call we'll go ahead and set our variables this time it will be email and password so we'll go widget State email and then we'll do the same for the password and let's change this output variable name there we go let's add a false condition first we're just going to do another alert here we'll set the title as error and then the message will come from the action outputs of login we'll choose raw body text and click confirm if it's true again we're going to add the same action as before so that's under backend database custom authentication log in we'll go ahead and set our Authentication token from that action output choose Json body Json path and off token we want to make sure to set our user data so choose create data type and user We'll add our username and email Fields here so we'll go action outputs login Json body Json path and name and let's add the email the same way and finally let's add our navigation to that logged in screen there we go we're all done we've just added sign up and login with xano to our flutter flow application using the new custom authentication feature Let's test it out and make sure it works when you're testing this you want to make sure to go over into test mode so we'll do that now okay so here we are in our demo application let's click sign up and let's go ahead and sign up a new user we'll call this testing my app and we'll click sign up that just takes a second and we are redirected to the logged in page as expected let's go over to Zano and let's just make sure that that worked as expected so let's go to our database and you can see that new testing my app user is available in our database now let's try logging in as that user again just to make sure everything works as expected we'll click log in and there we go we are logged in again we can verify this on the xano side this time we're going to look at the login API and we're going to take a look at the request history and we can see the most recent request made to our login endpoint and there is that new testing my app user logged in successfully very cool so the last thing we need to talk about is how do authenticated requests work in xano obviously we want to make sure that some of our apis are only available to logged in users and we also want to make sure that they only return information that is relevant to them the way that works in xano is the user is ISS issued an authentication token which we've now stored on the flutter Flow side for that user after they've logged in or signed up we now need to make sure that flutter flow can send that authentication token back to xano when we need to make requests against our authenticated endpoints so for that we will be using the off me endpoint right here let's go ahead and copy this endpoint URL and we'll go back over to flutter flow here let's go ahead and add a new API and we'll just call this me this one will be a get and we'll paste that API URL in there this time we need to add a header this is where the authentication token lives and for this header we'll type authorization we'll do a colon Bearer and then we're going to put some square brackets and inside these brackets we'll just type off token and this tells flutter flow that we are going to replace that value with a variable so let's go to the variable section C we'll add off token and the type will be a string to test this we'll go back over to Zano I'm going to click run and debug here I'm going to use this little selector to choose that user that we created earlier and I'm going to click this copy button and that will give me an authentication token that I can use to test calling this API so we'll choose test API call and we can see that was successful we are returned the user information as expected let's go ahead and add add our Json paths here so we'll go ahead and add name and email and we will add that call let's go over to our logged in page so we want to demonstrate that the user information can be shown here so all we're going to do to Showcase that is we're going to add a button to this page we'll change the text here we'll say get user data let's add an action here we'll open the action flow editor and the action is going to be under backend database API call and this time we're going to choose that me call and we'll set our off token variable our value is going to be under authenticated user and we will choose authentication token this is what we said earlier when we were defining that user data in our signup and login API calls if this is true We'll add an action here let's just display an alert and we'll choose informational dialogue and we'll title this success and our message is just going to be the output of that API let's add a false condition here as well and we're going to do the same alert dialogue but this time we'll just change the title to error there we go so we should be good to go let's go back into test mode and we'll make sure this works okay so here we are back in test mode Let's click log in and let's sign in as that user we created earlier we'll click login and we're taken to the logged in page so we can be pretty sure that the login was successful but let's click this get user data button and see what happens so you can see we get a success and the user information is returned successfully so not only have we set up signing up and logging in in a flutter Flow app using xano as your backend but we've now demonstrated returning user data for the logged in User it's pretty cool thank you so much for watching I really hope this helps if you have any questions please feel free to leave them down in the comments below you can also reach out to us via xano support or join us on the Community community. xo.com we'll see you in the next one

Channel: Xano

Views: 2,582

Keywords: xano, flutterflow, xano flutterflow, flutterflow custom authentication, xano custom authentication, xano flutterflow integration, xano tutorial, xano flutterflow tutorial

Id: kogyWy084d8

Length: 19min 9sec (1149 seconds)

Published: Wed Oct 25 2023