Build a Basic Login and Signup Flow Using Xano & Wized

in this video we're going to learn how to set up authentication with xano and WIS in this case we're going to be building email and password authentication but the process is very similar if you're building social signings as well we're going to cover that in another video you'll notice that I already connected my wizd instance to my webflow project and here I basically have the same form on both the signup page and the login page we also have the exact same attribute on it I have wiiz form o here on the signup page and if we go to the login page the form element is also having the same attribute note that the attribute is placed on the form itself and not on the form rapper okay inside here I have the email field that's the name field and I have another input with a name of password all right now let's jump into Zano and let's set set up our back end in this case I'm going to call it Zano o tutorial on the front end I'm going to choose web flow and here I'm not going to import the data from any other service I'm going to choose I'm starting fresh with Zano and I'll hit get started for the database structure I don't want to add any other tables because I just want to build authentication functionality I don't want to uh create anything else so I'm just going to hit continue now if you want to to build reset password functionality or magic link authentication you would choose here mail gun or send grid but in my case I'm not going to build any of that so I'm going to leave all of these options empty here you can select Au providers which you want to set up in my case I just want to offer the users to the option of logging in with email and password so I'm going to leave things as they are I'll hit review and I'll create my workspace and that's pretty much it if I go now to the API panel here all of my authentication endpoints have been created for me so we're going to use all three of those endpoints sign up first login afterwards and finally for access control rules we're going to use au. me let's copy our base URL here this is the part of the URL that's the same for each and every endpoint and then we have this part of the URL that gets appended to the base URL later on let's head back to WIS and let's add Zano to my apps under app I'm going to choose rest API and under base URL I'm going to write here return and within a string I'm going to paste the URL that I copied from Zano cool now we can start setting up our request we're going to go to the request panel I'm going to add a new request and I'm going to call it create user under app I'm going to select Zano and here I'm going to write return for sl/ signup that's what we have here we can see here that we have to provide an email and a password and optionally we can send also a username but in my app I don't have a name field so I'm going to leave this as is under method we're going to choose post because this is what we have here in xano and now I can add the request inputs here in the body so we have email and we have password and what we want to do here is return these fields from our app here so basically when a user writes something in this form and submits the form we want to send this data in our request so here we're going to write return and we're going to select our form email field perfect and we're going to do the same thing for our password so return password perfect and now we can already test our form I can add here some details for example I'll invent an email address I'll add a password here okay and now I can submit this form and the problem is that now I can can't submit this form because passwords cannot be submitted so what we have to do here is set up an action for submitting our signin and login forms so I'm going to go to actions under actions I'm going to create a custom action and I'm going to call it submit create user under type I'm going to select element I'll select our form element and under action we're going to choose on event submit prevent default and this will prevent our form from being submitted to webflow and this will also remove the error that we were getting before that passwords cannot be submitted all right and under action we're going to choose perform request create user now the only thing that we're going to select here is that this should trigger conditionally because we have the same form element on both the signup and the login page and we want to check whether the user is currently on the signup page in our case so here we're going to write return andp equals account signup like so now we can try to submit this and we can see if we hit submit that this request is being executed and we in return we get this OD token also if we go to our xano database we can see here that a user has been created now we need to do one more thing we need to take this odd token and save it in a cookie so that we can use it in subsequent requests so here we're going to go to actions again I'm going to call the action after create user it's going to be an event action and here we're going to select request finishes which request well the create user request that we just created under actions we're going to choose set cookie here we're going to create our cookie and I'll call it token and here we're going to select one day all right and under value we're going to return our o token field now we're going to build our login user request and we're going to build actions that are needed for login functionality so let's go to our login page let's duplicate this request I'm going to call it login user and here instead of the signup endpoint we're going to use the login endpoint the rest can stay as it is now we can duplicate this action as well we're going to call it submit login user and here we're going to check if the user is on the login page so we'll change the request to login user and here we're checking if the user is on the login page okay finally we also have to create an after action for our login page as well and here what we're going to do is just duplicate this and we'll call it after login user perfect we're going to check for our other request and here we have to check for our login user request so we'll delete this and write here login user perfect and now let's test our functionality we'll go first to our signup page we'll create a new user and here I'm going to write a password and if I submit this form I can see that the request is being executed a token is being generated and I can also see that the token is being stored in a cookie and now I can try to log in with this same email and password so I'll go to login and if I try to sign in I can see that the request is being executed and I get an off token in return perfect now the last thing we need to do here is when the user successfully logs in or signs up we want to redirect the user to our dashboard so we'll go back to our after create user actions and our after login user action and we'll add some additional actions at the bottom here I'm going to select navigate to and I'll return the path of our dashboard in our case that's the index page and of course we only want to do this if the request was successful so we're going to check if create user was okay now if the request is unsuccessful because the user has already been created or they are using the wrong email address or whatever then they're not going to be redirected after the request but if they authenticate successfully we're going to redirect the user to the homepage now we're going to do the same thing for our after login action we're going to add another action here navigate to same page like so and we want to do that only if the request was successful perfect and now we can try it out I can log in and if the request is successful I'm going to be redirected to the homepage now there's only one more problem if the user is not logged in they can still access the homepage we need to set up access control rules that will redirect their user away from this page if they are not logged in so for that we're going to create one more request which is going to be this o. me request now this is going to be a get request now we'll go back to Wiz and we're going to create a new request I'm going to call it get user under app I'll select Zano and here we're going going to return our off.me endpoint like this under method we'll choose get and under headers we have to add a cookie to our header so we're going to choose authorization here and here we're going to return our cookie value remember a user gets a token and stores it in the cookie when they successfully log in and this cookie gets stored for one whole day so so if the user leaves the page goes back to the same page into our app they will still be able to access the content of our page and in order to get the user we need to send this token in our authorization header perfect and we can see that in action now if we try to get the user we can see here that we got our user successfully perfect now we're going to use this request to set up our access control rules we're going to go to actions and here we're going to create a new action that will trigger our get user request I'll call it submit get user under type I'll select event and I'll trigger this with a custom condition the condition is going to be the path of the page so we're going to check if the path is supposed to be protected in this case I'm just protecting the homepage so I'm just going to write this so if and. path is the homepage now of course if you would have a whole folder of pages that needs to be protected then you could do something like this instead you could check if n. path starts with and then here we could write um a path for example slapp then anything that's in the app folder will be protected in my case I'll just go back to the settings I had before all right and under action I'm going to choose perform request get user now in the data store you can see if I refresh the page that the get user request is going to be triggered on this page cool and we're getting the user as well now what we need to do is set up access control rules so that the user gets redirected to the login page if this request fails for some reason so we're going to create a new action I'm going to call it handle Access Control type is going to be event and here we're going to select request finishes we're going to check for our get user request and here we're going to choose navigate to the login page I believe it's account login and the condition is going to be that the request failed so if get user is not okay if you add an exclamation mark it inverts this value so if the request is successful this will be true if it's inverted it will be false okay cool now we are still logged in so we are supposed to access this page so if we go to the homepage we can see here that our request was successful and we can stay on the page but if we wouldn't have a token stored in our cookie then we would be redirected to the login page now we can quickly build logout functionality we'll just delete the cookie and then we can see that in action so we have our logout button here we're going to create a new action we'll write we'll call it log out under type we're going to choose element we'll apply it to our logout button and here we're going to choose on event click set cook key c. token and we'll just return an empty string and of course we can also immediately redirect the user to the login page so here we can write on event click once again navigate to the login page all right now we can see here that if we click on the logout button we'll be redirected to the login page and since our cookie has been deleted here you can see c. token is null if we try to go to the index page again you can see that we get immediately redirected to the login page now of course there's a flash of content that you can see but we have this video over here that shows in detail how you can set up a loader for your project so that it covers all of the content on your page lastly to check our functionality once again we can try to log in a last time and just like that we access our dashboard we can refresh the page as well we can still access it but if we log out we cannot go back to the index page and that's it thank you so much for jumping in this has been a detailed walkr of setting up authentication with email and password with Wiz and xano thanks for watching and I'll see you in the next [Music] video

Channel: Wized

Views: 2,867

Keywords: wized, xano, nocode, webapp

Id: SGHGNpX_B7E

Length: 18min 12sec (1092 seconds)

Published: Sat Jan 20 2024