[Legacy] Build Auth in Wized with Xano | Maya - Part 1

the first thing we're going to learn in this series is how to set up authentication using Zano on the back end and Wist on the front end first we're going to start by setting up login and signup forms but then we're going to bring this concept one step further we'll also teach you how to set up loaders while the request is being executed and how to display error messages if the user has a typo from there we're gonna move to authenticated requests which means that only if the user is logged in they can access some data from our backend and finally we're going to cover some Advanced access control rules because we have two types of users in our app we have customers and suppliers and we want to prevent customers from logging into the supplier dashboard and vice versa now I'm super excited to dive into this project with you and without any further Ado let's jump right into it foreign project and if you look at all the elements you'll see that we already have all of the Wiz attributes applied so we're not starting entirely from scratch note that we made a separate video where we're explaining how to use these wisd attributes but you can see here if we look at all the elements that the Wiz attributes are applied but also we're having some hidden elements to which we also added with attributes one of these examples is this loader component which I'm gonna toggle quickly so you can see how it looks and we're going to display that while the user is logging in also we have an error message below here which I'm not going to show you right now but note that it is also there it's just hidden alright so without further Ado let's jump into Wist and let's set this up and running so the first thing we have to do here is we have to add Zano to my apps so here we're going to write Zano and from drop down we're going to select that here you have to add the API Group base URL and this you can find inside of your Zeno account so let's head over to Zano and if we go to API and we click on our default API Group we can see that we have this link over here so we're going to copy that to clipboard and we're going to paste it in here awesome now we can start using Zano to make requests set up our authentication and so on so let's go over to the auth panel and here we're going to start by expanding this accordion over here under app we're going to select Zano which we just added and we can start building our first requests but before we do that let's head over to our sign up page and here you can really see what's going on so if we toggle x-ray mode you can see here that we have all of the attributes from webflow awesome let's turn this off and let's start building our first request we're gonna start with the create new user request and here you can see that if we click on this it creates a request in data out and most of the fields are already pre-filled for us now the only thing we have to do here is we have to provide the input and you can see here that by default we have email and password but if we look at our form we have an additional field this additional field is something we also want to collect from the user and we also set this up in Zano on the back end if we look at our sign up request we can see here that we have this input we'll name email and password so let's add full name to the inputs there okay now that our fields are matching let's provide the values now the values will be provided by the user so all we have to do here is we have to bind the inputs to this field so let's expand this data field and if we go under General input fields we can find our sign up and login inputs so let's choose Here sign up email address for the email sign up password for the password and here under full name we're gonna choose sign up full name awesome note that in this request we only have to provide the input Fields these URL parameters as well as authorization fields are reserved for other types of requests we're going to cover authorization in a little bit all right now our request is already set up so if we add a full name here like and we change this email here we should be able to trigger this request so let's expand this field here and let's look at the response and if we click here you can see we get an auth token in response now what does that mean and how does all of this work so basically we need to have a way of telling the back end that the user is still logged in when they move from page to page and this is where this auth token comes in we get this auth token after a sign up or a login and then this auth token is stored in a cookie so that when the user goes from page to page the cookie is used to tell the back end hey it's still me I'm still logged in so what we have to do here is we have to first create a new cookie which will save this auth token alright so let's go to page data and let's create that cookie we're gonna go under cookies and here we're going to create a new cookie I'm simply going to call it token and here I have to specify a lifetime in this case we want to keep it to something short like one day or one week in my case I want to keep it to one week now that we have our cookie let's head back to our request we have to trigger an after request action here so after request we want to set a cookie now we only want to set a cookie if the request was successful so we're gonna add this conditional here and under condition we're going to write the following we're gonna click on this status code over here and we want to make sure that the status code equals 200 just like in this case status code 200 simply means that the request was successful if you have another number it's usually an error all right let's write equals equals equals 200. awesome and we can see below here that this statement evaluates the true so if this condition evaluates true we want to do the following action we want to set our cookie and we'll set our cookie to the auth Token value so we can click here on auth token and that's it now whenever a user signs up this auth token will be automatically stored in a cookie perfect now we have to do one more thing we also want to redirect the user to the home page once they sign up so let's expand this field over here let's select navigate to and here we're simply going to write the homepage URL now also just like in the first action we want to make sure that the request was successful otherwise if the user wasn't successfully logged in we don't want to redirect the user to the home page so let's add a condition here and again we're going to write status code equals equals equals 200. perfect now whenever a new user signs up they will be redirected to the home page awesome let's set up the same thing for our logging form now so let's go to auth and now we have this template for login user so let's click on the plus sign and we have our pre-build request and we're going to do the same thing we have to provide only an email and password in this case so let's go here under input fields login email and here we're gonna select login password I'll just switch quickly to the login page just so you can see what's going on and if we toggle x-ray mode you can see here that we have pretty much the same setup and just like we did in our first request we have to make sure to store the auth token after the request was successful inside of a cookie we already created our cookie so all we have to do here is add an action here we're going to choose set cookie and we can run this request because these fields are already filled out with autofill and also here you can see that we also get an auth token the only difference is that we have our second request so request number two and we have the auth token so let's expand this field and let's select the auth token awesome and here we have to select our cookie which we created earlier see token and here under is conditional we're going to add the same condition like we did before so if the request was successful now make sure to select the second request here equals equals equals 200 done and also we're going to redirect the user to the home page if the request was successful so navigate to is conditional we can just copy this value from here paste it in and here we're going to redirect the user to the home page so this is the home page path awesome that's it now the last thing we have to do is apply action so when the user clicks this login button we want to submit these fields to the back end so let's set that up and running we're going to go to actions and here we're going to create a new action and also let's create a folder and we're going to call it auth so all of our auth actions will be in the auth folder now we can select this folder and here we can call it submit login and we're going to apply it to our login button and on the configuration we're going to choose on click so it's an on click event and under action we're going to choose perform request login request so when the login button is clicked we'll perform our login request awesome and now let's do the same thing for sign up we're going to choose auth we're going to apply it to our submit button and under configuration we're going to choose on click perform request create new user in this case perfect and we have the basic functionality there so if we expand this field and we refresh the canvas to apply our action we should be able to use this button to log in so let's look at this login user request and let's click on the button so we should get an auth token that should get saved in the cookie and we should be redirected to the home page now all of this will happen really fast there we go and right now we still have to do a few more things we also want to display a loader while the user is being logged in and we want to display an error message in case the user had a typo or they simply didn't fill out an input field so let's set that up and running let's go back to our login page and here we're going to add some more actions so the first action will be called display loader and we're gonna apply this to our button loader and under configuration we're simply going to toggle the visibility set visibility and we want the loader to be visible if the request is currently being executed so we're going to select is requesting awesome now we also want another condition if the request was successful it will take some time until the user gets redirected to the home page so in that period we also want to display the loader so we're going to add here one more condition so we're going to write if this is true meaning if the request is currently being executed or if the request has requested is true and if the request was successful status code equals equals equals 200. so this is our first condition and this is our second condition so we're checking if has requested so meaning if the request was finished and if the request was successful so either if this condition is true or this condition is true we're gonna display that loader all right now note that I added the same attribute on the sign up and the email form so here we have this Logic for our first request which is create new user and let's do the same thing for our other request for login user so we're simply going to copy this same logic and all we're going to do is we're going to replace this number one with number two so our first request has number one our second request has number two so let's add here or and then we choose the same values here so is requesting is true or has requested and status code equals 200. perfect now we can hit save and now if we refresh the canvas and we click on the login button we should see our loader appear and there we go it already looks much better so let's head back to our login request and let's also display the error message here so it's actually quite similar to the display loader logic so we're gonna create here a new action we're going to call it display error message and here we're gonna add it also to the auth folder we're going to apply it to our error dot error attribute and here we're gonna set the configuration to set visibility first visible if and now we have to basically get the error field to do that we can simply close this and right here just anything and now if we try to trigger the request we should be able to receive an error so let's expand this field let's go under configuration and visible if we're going to expand this field and let's run our request and now we can see we got an error so we want to display this field if there was an error and we also want to toggle the visibility if there was an error on our other form because the same attribute is applied to both forms so we're going to write here or and we can just copy this value and write number one so we have these requests which are very similar and this is our first request here this is our second request perfect okay now the error message will be visible but we also have to set the text of the error so we're going to click here on this plus sign and here we're going to choose set text plain text and here we're going to get the text from the error message here we have this message field and inside we have invalid credentials perfect and now let's do the same thing for our first request so we're going to write here or and we're gonna display the message from the first request if there is an error in the first request perfect now we can hit close and now if we refresh the canvas again we should be able to see an error message so let's write some gibberish here let's click on login and now we can see we have the loader as well as this error message at the bottom now that we have our login and signup functionality in place let's head over to our auth panel and here we're going to add another request which is called load user and this load user request basically loads the data of the user that's currently logged in so if we click on this plus sign we're going to create a new data in request and here you can see that we get all these fields populated and all we have to do here is we have to provide an authorization token luckily we already saved our auth token in the cookie so all we have to do here is reference that cookie so let's expand this field let's go under General and here we have our cookie value so remember we're storing that value in the cookie for a certain period of time so let's select this and let's hit done perfect and now if we try to run the request we should get the information of the user that's currently logged in in this case I have a fake email called hates Cliffjumper and you can see here we get the ID of the user the full name the email and so on now we can configure this stuff on the back end however we want but in this case we have just a few fields awesome now we have to set up a trigger here we have to choose on which Pages do we want this request to be triggered and we want this request to execute as soon as the page loads so here we're going to choose on page load and here we're going to select on every page where we have this load user attribute so we have on page load and we're going to execute this request if there is a load user attribute awesome and here if we want it we could add some actions or after this request has been executed we're going to do that a little bit later but for now we can just close this request so now if we go from page to page we can expand the page data field so we can see what's going on if we go to another page we should see that request being executed so it happens really quickly but you can see here it loads the user right at the beginning awesome now let's head back to the auth panel and here if we expand access control rules we can add some access control rules this is used for protecting different pages so if the user is not logged in we want to redirect that user back to the login page so that's the basic functionality that we want to implement here so let's get started first we want to add this Access Control rule to our admin dashboard because we want this admin dashboard to be protected and here we have to add a condition we're going to expand this field and the first thing we're going to check is we're going to check if the user was successfully loaded so we're going to select here status code equals SQL sqls 200 but this alone wouldn't work out of the box because while the request is being executed there is no status code so this statement would automatically redirect the user to the login page which we don't want so we also have to add here another condition here we're going to check first is requesting so if the request is currently being executed we want to keep the user on this page or if the status code is 200 but we're missing here one more piece of the puzzle so here we're going to write also or has requested and status code equals 200. so now we have the same statement that you saw before already so if the request is currently being executed or if the request has finished and it was successful awesome otherwise if that's not the case we want the user to be redirected to the login page so the path for the login page is auth login so let's write that here and now let's do the same thing for the customer dashboard because we have two different dashboards we have the supplier or the admin dashboard and we have the customer dashboard here perfect so let's do the same thing here we're going to write here customer dashboard and the condition is going to be the same so let's copy this value let's paste it in here and let's add a fallback page in most cases this setup will be sufficient but since we're having two different types of customers we have to add some more advanced logic here so if an admin tries to log in and go to a customer dashboard we want to redirect that user to the admin dashboard if a customer tries to go to the admin dashboard we want to redirect that customer back to the customer dashboard so we have to add that functionality as well so let's check here our condition and here since we're setting up the condition for the admin dashboard we have to also check if the user is an admin so we can scroll down here to our load user request and we have this field called is admin so let's select this and we have to check if the value is yes like in this case perfect now don't forget to write all of the text inside of these quotation marks otherwise this whole thing will not work because we have to tell here that this is a string awesome now we also have to add one more thing here to the fallback logic we can expand this field and here we're also going to add a conditional statement so let's hit enter a few times so we have this value here or later and for now we're gonna first check if the user is a customer so how are we gonna do that so we have this is admin field and this can evaluate either to yes or no so if the user is an admin or a supplier it will say yes if the user is not a supplier if they're just a customer it will say no so we have this statement over here so first we have to check if the answer is no so we write equals equals equals no and then we have to create a conditional statement out of this so we can write question mark and that's if if this is true we want this text to happen whatever we're going to write here so the first thing we want to happen is if the answer is no we want to redirect the customer to the customer dashboard so we're going to write here customer and we want to redirect the customer to the my orders page you can see here this is matching whatever we're having here in the pages awesome and now we have to add what happens if the customer is not an admin and the customer didn't successfully log in so this is the fallback logic so let's cut this out and here we're going to put this in a string again like so perfect and now we have to do a similar thing here for our customers so here we're going to write the opposite so we're going to check and is admin equals no and for the fallback logic we're going to do the opposite of what we have here so we can just copy this value paste it in here and just edit it so here we're just going to reverse this statements so here we're going to write yes which means if an admin is trying to get on the customer page we want to redirect them to this page now here we have to also change this so we're going to write supplier all orders so if the supplier is trying to get to any of the customer Pages we're redirecting them here otherwise if another user who's not logged in is trying to reach the page they will be redirected here now we have some really Advanced access control rules in place let's hit refresh here and now if we try to go to any of the dashboard Pages you're going to see that we get redirected so right now we're logged in as a supplier or an admin and if we try to go to any of these Pages we should get redirected immediately and you can see here it's working we just got redirected to the supplier all orders page the next thing we have to build is the logic that handles this loader over here basically we want to hide this loader and display what's beneath if the user is supposed to see the page so let me go to webflow and show you quickly what's going on here if you look at the cloneable project and you open the Navigator you can see that we have this symbol over here that says admin preloader and we also have a preloader on the customer page and the customer preloader is called customer preloader and basically here it's hidden but if we go to layout display Flex you're gonna see that we have this same loader over here and it's just a wisd element now the way I'm handling loaders usually is I hide the loader here in designer so that it's not covering the elements and I can work on the website but then in the custom code section I add the line that says display Plex and I'm basically setting the display property to flex here in the custom code section so that the loader displays by default that's why this page is covered here with this loader alright now let's build our logic that's going to hide this loader when the loader should be hidden so we're going to create a new action for that and we're going to call it display loader we're going to apply it to the same auth folder and here under apply two we're going to select our loader element admin pre-loader and now we have to build the configuration so we're gonna toggle the visibility so set visibility and here we're going to write our conditional so the element will be visible if first we have to choose if this request is currently being executed this is our load user request so we're covering the page while the request is being executed and now we're going to add some more logic or if has requested and status code in this case doesn't equal 200. so if the request didn't get a user if there was an error for some reason we don't want to hide the loader we want to display it still so that's why we have this exclamation mark we're inverting that statement here perfect and now we have to add one more thing we also want to check if the user is an admin so if the user is an admin or a supplier they're supposed to see the dashboard page but if they are not they are not supposed to see it and the loader should be displayed so what we're going to do here is we're going to write or if is admin equals no so if the user is a customer we want to cover the page with the loader still that's why we have this is admin equals no awesome so now let's copy this logic because we're going to build another loader on the customer dashboard and it pretty much shares the same logic so let's call it display customer loader and we're going to add it to our auth folder customer preloader and here under configuration we're going to do the same thing we're going to set the visibility and here we can just paste in our code and here we're going to invert this statement so we want to hide the loader if the user is an admin and they're trying to access the customer dashboard so we're going to invert it and that's it and now I notice here that I just call this display loader I'm gonna call it display admin loader because it's more descriptive so I have customer loader and admin loader awesome now if I hit Refresh on this page basically the loader should just disappear great and if I try to go to any customer page I should get redirected and I won't be able to see the my orders page awesome I get redirected to all orders perfect now the last thing we're going to build here is we're gonna show a log out button so that the user can log out and we're gonna hide these login and sign up buttons If the user has been loaded so let's start with the log out button we can also call it display logout and we're going to apply this to our logout button under configuration we're going to toggle the visibility and we're going to make this button visible if the user was successfully loaded so status code equals 200. and if I refresh the canvas now we should be able to see the logout button perfect now let's do the opposite for the login and sign up we're going to hide them if the user was loaded so we're going to write display login and sign up and here we're going to add it also to our alt folder and we're going to apply it to two attributes the nav login and the nav sign up we're also going to toggle the visibility so here we're going to display the buttons If the request load user is currently being requested or has request that is true and if status code doesn't equal 200. so basically if the user wasn't loaded we are going to display the buttons If the user was loaded we're going to hide them and now if we refresh the canvas we should only see the dashboard and logout buttons awesome and now you can still see that it takes some time and we have some flickering here on the screen so let's add a loader on top of this page as well we can just add a preloader that we already built from before and now I'm gonna extract the elements from the symbol and here I'm just gonna call it main reloader awesome now if I publish the project I should be able to set the loader up on the main page so let's head back to West first thing I have to do is refresh the attributes now and as you can see these elements are above the loader so I'm just going to increase the Z index okay and I'm going to republish the project now if I just refresh the project it should cover the whole page awesome now let's set up the same functionality once again we're going to call it display main loader and we're also going to add it to the auth folder we're going to apply it to our main loader which we just added and here under configuration we're also going to set the visibility and we're going to display this loader if is requested is true so if the request is being executed and if has request that it is false if for some reason the request hasn't finished requesting then we're also going to display the loader awesome and now if we refresh the canvas we should see the loader disappear perfect and as you can see it also doesn't display the login and sign up buttons there we go we successfully masked it and that's it for our first video we set up some really Advanced authentication functionality here first we started by setting up login and sign up forms and we added also bells and whistles such as error messages and loaders Etc then we moved on to some Advanced access control rules and finally we created several loaders for our customer dashboard admin dashboard and the main page I hope you enjoyed this video and if you did please hit the like button subscribe to our Channel and I'll see you in the next part of this series cheers foreign [Music]

Channel: Wized

Views: 9,879

Keywords:

Id: mZNOjBeCR_M

Length: 33min 54sec (2034 seconds)

Published: Wed Nov 16 2022