2-Step Verification Based Login System using OTP | PHP Project | JS | PHPMailer | Mysql

hey guys welcome back to coding shorting with nj in this tutorial we are going to learn to implement two-step verification based login system the way this login system works is that first the user enters username and password if those two details have been verified to be correct then the backend sends a particular call which is called one time password to the user either through sms or an email once the user gets this otp it resends back that otp to the backend where it is verified if the user provided otp matches with the one sent to him through email rsms then the user is finally logged in and today we are going to learn how to implement exactly that logic and before we jump into coding coding let me give you a demo of what we are going to implement today so this is going to be the landing page of our project here the user is supposed to provide an email well had this not been a proof of concept project you would have been asked to provide password as well along with the email but in order to keep the tutorial and the code shorter i have just gone for the email only okay before i enter any email which is registered with the backend let me show you guys how it behaves if incorrect email has been provided or no email has been provided so let's start with no email provided but i click on this send otp button now it says email cannot be empty and this message disappears after three seconds now let's put some random email and see what happens you are not registered with us because this email is not registered and and if you notice the error message disappeared after three seconds as well now let's start with the correct email address so currently there is one email registered in the database which is this email address now let me click on send otp now i have been shown another form which is expecting an otp from me so i should have received an otp in my mailbox with which i am registered with this website so i need to go and check out my mailbox to see if i have received any otp or not but before doing that let's click on submit without providing any otp again i get the error message otp cannot be empty now let's put some random values it says incorrect otp now let's go to our inbox and let me get the otp from there now this is the email that i have received which says your otp to login is 35.85 now let's go back to our project and enter this otp 35.85 now i have been redirected to another page which is supposed to be my dashboard currently it doesn't have anything except some random lorem ipsum text and a log out button now this page you can only see this page if you have successfully logged in let me log out and let's try to go back to same page again which was dashboard.http see because i am not currently logged in the moment i entered that url i got redirected automatically back to our login page so you can only view this dashboard page if you have successfully logged in so this is the overall mini project which we are going to implement today so let's start coding sorting we are starting with an empty folder in our visual studio code editor and the first thing that we are going to do is create a folder in which we will put all our front-end related files so let's create three files index.html then script.js and style.css let's start with index.html and i'm generating skeleton code let's change the title now in the body we basically are going to have just three elements one h1 element and two divs within those two divs we are going to create a form with only one input field the first one is going to ask for email and the second one is going to ask for the otp and in the beginning the display property of second dave is going to be none so that second div is not visible second dave is only going to be visible once an email has been sent to the backend server for login process and the login process has started so let's start with heading otp based two-step login verification now let's create first div and i'm going to assign it two classes one is container another is going to be email hyphen container so the reason for assigning two classes to this div is that the first class name container is going to be shared by our second div as well this way when we define styling for the container class it's going to be applied to both of those divs and the reason for having a second class name is that this div is going to be manipulated through javascript and the other div as well so our javascript should be able to uniquely identify each div therefore we need to have unique class names attached with those divs as well okay now within this div let's create a heading h2 which says enter email now let's create a form with again two classes form and email farm the reason for having two class names for the farm are the same that we had forever divs as well with this class name farm we are going to define styling for this farm and the form in the next div however with this class name javascript is going to uniquely identify this form okay and now within this form we need an input field of type email let's give it a name email and id email as well since we are not defining any label so let's define a placeholder enter email now let's define a button and give it a class email submit and the caption for this button should be sent otp because when we click on this button a request is going to be sent to the server which will in turn send us an otp in our mailbox but between this input field and button we should have an empty span let's give it a class name email error we are going to keep this span empty because all the errors messages that we saw with the red text that appear only just for three seconds are going to be displayed in this spam message so when there is no error obviously we don't want to see any text red text there that's why the contents of this spawn are going to be empty and the javascript will dynamically define the text contents according to each error so this is all the logic for our first div we are going to have exactly the same logic for the second div as well so i'm going to copy it the only thing that i will do is that i'll change the class names and the type of input field as well so instead of saying enter email h2 should say enter otp and let's change the second class name from email container to otp container email form to otp form and the type is going to be number because our otp is going to be all digits let's change the name to otp as well and id should be otp as well and the placeholder should be enter otp the class name for spam should be otp error and the class name for the button should be otp submit and the caption should be finally login because this is all our html now let's link our javascript and css files so script and let's go up for the styling so we are all set as far as our index.html is concerned now let's go and open this file in the live server so that we can check out how does it currently look okay so this is how it currently looks it needs styling and since our main focus is not styling so what i'm going to do is that i'm not going to make this css styling part of this tutorial however when i upload the code on github i will include that styling file there so that if you are interested in that styling you can use that styling but i want to keep this video's length shorter and i don't want your focus to be distracted as well that's why i'm skipping this part so what i'm gonna do i'm going to grab in the styling and and put it in my style.js file and then we'll start from there let's go and check so why doesn't our button gets the color oh our button is supposed to have two classes as well one for styling in one for javascript manipulation so button class should also have one more class called btn because this class defines the styling for our buttons now let's go and check one more time okay now perfect okay now we need to work on our javascript logic this javascript file is basically going to consist of two event listeners for each of those buttons in our forms so that when we click on those buttons a fetch request should be sent to the backend our server beside those two event listeners we are going to define a helper function which is going to display the error messages in our spawn html elements but first of all we need references to those html elements in our javascript file so let's get started with those references so let's first get a reference to the first div we have given that the class name email container okay now we need reference to adhere div as well which is otp container now we need references to the buttons in those forms and the unique last name for the button the otp button was submit hyphen otp so submit hyphen otp let's change this to the get to submit otp as well copy paste and submit email now let's get references to our spawn elements as well the class name that we give to the first spawn is email error so copy paste the second one is going to be otp error and the class name is otp iphone error okay now we have got the references now let's define the event listener for submit email so submit email add event listener and the event listener is click so let's pass the even to this arrow function which triggered this event because using that event we are going to call preventdefault method the reason for calling this preventdefault method is that because our buttons are inside the form so when we click that button the default behavior of the form is that the form will try to communicate with the server which in turn redirects us to another page so we want to stay on the same page therefore we have to prevent the default behavior of the form so that's why we needed to pass that event which triggered this because this event actually contains the information about the form now we need to send a fetch request to our backend and we have to send the email that the user has typed in in the body of that fetch request so that means the method that we are going to use is going to be post method and the address is going to be backend server sorry backhand folder so we haven't yet created this folder but we will create this folder when we define our backend logic and within this backend folder we will have a file called login.php so we want to communicate with this file and the second parameter to fetch is an object in which we will define all the attributes so the most important attribute is going to be the method we want to send this request as a post http request now the second most important attribute is going to be the body because this body attribute is going to contain the data that the user has typed in in the form when a normal post request is sent directly from the form all the data in the forms input fields is automatically made available in one of the php's global variables named dollar sign underscore post but since we are not sending this request directly from the form we are sending a fetched request therefore the data in those input fields will not be automatically made available to php in that php underscore post global variable so we have to make sure the data that the user has typed in in the input fields must be made available into that global variables to do that we have to create an object of type form data so we are going to say new form data and we need to pass in the whole form to the constructor of this form data this where this form data will extract all the input fields all the input fields data from that form so document our query selector and the class name that we gave to form was email hyphen form now the data in this form will be made available into php's dollar sign underscore post global variable okay now since it's a fetch request so we will receive a promise we haven't yet defined the backend logic but the way we will define this backend logic is that our backend will always return a json object therefore the first thing that we need to do is that we have to call a method called json which will basically convert what we have received from the response stream into hsn object then we need to call another then block because this json method will return us another promise now we can work on our object over here so this response that we will receive from the server will consist of an object with only one attribute which is going to be named status and the value for that status is going to be either success or failure these status will be set to success only if our backend looked up the email provided by the user into into its database and if a matching email address was found in that case our backend will send us this object with status set to success otherwise it will send that object with the status value set to failure so we need to check if theta dot status equals success if the status is equal to success that means the server has also send an otp into our mailbox so we have to make that other div made visible by setting its display property to block and we need to make our first div disappear by setting its display property to null if that is not the case then obviously no matching email address that the user provided has been found in the database in that case we need to display an appropriate message in this spawn element but let's work on the success part first so we have to make the otp container visible by setting otp container dot style start display set to block and email container dot style dot display is set to none that's it that's all we need to do and if the data status is not equal to success in that case let's call the error method which takes two parameters the first one is going to be the spawn in which we want to display the message and second one is going to be the message itself so we want this message to be displayed in the email error respond so email error and the message should be you are not registered with us we need to define this function though this is helper function however this is all the logic for our submit email event listener we need a similar logic for the submit otp email listener as well since the logic for the submit otp is going to be almost similar to this one so what i'm gonna do is that i'm copy this whole event listener paste it over here and let's start changing the names so submit otp event listener even default again we need to send a post fetch request but this time our form data object is going to reference to otp form then in the response again the response we will receive from the backend will consist of an object with only one attribute status whose value will be the success or failure so if the value is successful in that case we would like our user to be redirected to dashboard otherwise we will display the appropriate error so let's work on the success part let's remove this and since we want the user to be redirected to the dashboard page so window.location dot replace and we want this to be front end slash dashboard.p dashboard.html if that is not the case we need to send an error message but this time this pawn is going to be otp error and the message would be invalid or incorrect otp provided okay now let's work on our error function it takes two parameter the first one is going to be a reference to one of the spawn elements and the second one is going to be message so let's set the text contents of the spawn to whatever message we have received then we need to set text color to be read and next we need it to disappear after three seconds so set timeout now this timeout takes two parameters the first one is going to be a function a callback function that is executed after a certain time and that certain time is defined in the second parameter since our function is going to be just one liner code so we are going to define an error function so i am setting the text content back to none and i want this arrow function to be executed after three seconds so i am putting value threes 3 3000 means after 3000 milliseconds so this is all the logic part of our javascript we have to yet define a file name dashboard.html because this is where we will be redirected in case of successful login so let's create this file so for the time being i'm only defining h1 there once we have defined our backend logic we will get back to this file again and define further logic in it but for the time being we should have a file okay now let's go and verify what we have done so far okay since there is no back end so obviously we cannot send a fetch request to the backend the only thing that we can check so far is that if we click on the send otp button without entering anything over here in the input field we should get an error message displayed over here that the email cannot be empty um actually i haven't defined this part so obviously it won't work okay so let's go back to the script file and so after prevent default we need to put a check now this what this check will do it will make sure that there is some data in the input field if there is no data it will display the appropriate message in in this pan and it will terminate this event listener right there because this if this event listener is not terminated right there the next thing is a fetch request to the server and we don't want to make any request to the server if the user has not entered any email or any otp in the input boxes so since we are working on on the submit otp so that means we need to check if that input field is empty or not so if document query selector we need a reference to the input field and since we haven't given any class names to input fields we have only given ids to those input fields so we are interested in the an input field within id otp and if its value is equal to mt in that case send an error message or call error function and which spawn we want to target we want to target the spawn which is in the otp form so otp error and the message should be otp can not be empty let's make it otp field and then we want to return because if we don't return the next thing will be execution of this fetch request so we want this fetch request to be executed if our input field is omt so we need exactly similar logic for our submit email even listener as well so let me put it over here after prevent default now all we need to do is change from otp to email because our input field has this id now this time when we are calling the error function this form that we should target is email error and the message should be email field cannot be empty and then we return okay now let's go and check out the logic refresh send otp nothing happened cannot read properties of null add event listener on line eight class name is submit hyphen email let's go and check out index.html if this is the exact name that we that we have given to our submit button email hyphen submit okay it's email hyphen submit not submit hyphen email paste let's go and check the other button otp hyphen submit otp hyphen submit okay i hope everything is fine now let's go and verify email field cannot be empty okay so it's working so far now let's go back and work on our back end okay so let's start our backend logic by creating a folder for our backend okay guys it turns out all these files are outside the front-end folder we need to get them inside the front-end folder okay now let's create a backend folder within this backend folder we need two files one is going to be login.php which is our main file the second one is going to contain our connectivity with the database let's call it db.php so before we start any coding let's go and have a look at our database the database that we are using is called otp underscore login and it basically contains only one table named user which has basically two fields and email and otp okay that's it and currently it contains only one one row of data with my email address so that's all the database that we needed it's a very very minimalistic database now let's go and define our connectivity with this database so we are going to store that connectivity net in a variable named connection new mysqli so it takes four parameters first one is going to be the url or where our server is running the database server so it's localhost and port is double three zero six the default port for mysql server and since it's default you can skip it if you like i tend to put it there so that i always remember it's a different server running somewhere else then the username which is root in my case and password is root as well then the name of the actual database with which you want to connect which was otp underscore login semicolon now we just need to check if we have actually been able to connect with database otherwise send an appropriate message and terminate the program right there so if connection connect underscore error number so if there is any error number that means something did go wrong and we were not able to connect with the database server so send this response back to the user json encode because we want to send json data back to the client and let's get its status let's simply pass the error message then exit the program right there if that is not the case if that is not the case the connection is there and we can utilize this connection to make further queries with the database now let's go and work on the login.php file so before i start any more coding in this file we are going to download a package name phpmailer because because we are going to send the otp to the user in his or her registered email mailbox so we need to be able to send an email address to the user through this php program so for that we need to install a package named phpmiller okay i have opened my terminal window and currently i am at the root folder that is otp based login so i need to go into this backend folder because this is where i want to install the php mailer i don't want this php mailer to be downloaded in the top level a root folder because this way it will be accessible to the front end as well and since it has nothing to do with front end that's why i want to be installed in the backend folder because that's its appropriate place so cd backend okay now i'm inside the back in folder now i'm going to use command composer require php mailer forward slash php mailer okay now the package has been downloaded as you can see we have got a new folder in our backend folder named vendor and two composer files so let's get out of this backend folder cd dot dot so we are back into our root folder now let's start coding in our login.php file in order to use php folder eventually in this program we need to import certain packages and importing a package should be the very first thing therefore let's start with that php mailer then use exceptions class and smtp because we will be using smtp server to send email addresses to our users now let's include a database connectivity file with this program so require database.php we also need another file which is in vendor folder and it's called autoload.php this autoload.php is going to handle everything which has anything to do with phpmailer classes now since this project is about login process so that means our server our login.php file should remember between different client requests so it should retain data about the user who is logging in so that means we must have sessions in our program so i'm going to call session start function so that session gets started now if you remember each of the fetch requests that we have created in script.js file both of them are actually post requests so we need to check if the request that received if the request method is paused then we should start executing the code which is going to be defined in in those curly brackets but now since both of the requests that come from the client are going to be post request so however our server is going to distinguish whether it is a request to send otp or whether it is a request with the otp that means our server need to be able to distinguish between those two requests coming from the server so we know that if it is the very first request so that means its post data is going to contain an input field which is named email and if it's the second request from the user then it has an input field which is named otp so that means we should have and and let's define another check which is we want to see if this request method has a variable set and that variable is called post and within this post the name is going to be email so if the post global variable or php contains a variable named email so that means it's the very first request from the user however if it's a second request then it's going to be something like that the request method is going to be post but the dollar sign underscore postglobal variable will have a field with the name otp so this is how the server is going to distinguish between which request has come in and how to proceed further so let's start with the very first request let me comment request from client with email address and this one is request from client with otp code so let's start working on the very first request which is the user has sent an email address so what we need to do over here is that we need to connect with the database check if a matching email address is found in our database if that is the case then generate a random otp store that otp into the database and send that otp as an email to the user's mailbox and send a success reply back to the fetch and if the matching email address is not found in the database then send reply back to the fetch with status set to failure so to do that let extract this data and post global variable into our local variable email okay since this data is going to be received from the user so we need to sanitize it therefore we are going to pass this data to a function called vl escape string which is provided by this connection method sorry connection object now let's connect with the database and search for this email address so let's execute a query select everything from user well user is a table table name in the database where email equals dollar sign email since this query is going to return as a result set so i am going to store it in a result variable now if any result set has been returned from this query at all that means we have found at least one row with the matching email address so in order to check that if result num rows so if there is any data in this num rows that means the matching email has been found so in that case let's create a session variable let's call it email and in that session variable we are going to store the current email address that we have received from the user now generate an otp so i am going to store it in a variable named otp and to generate a random otp i am going to call a function called rent and i want it to be four digit otp so four parameters our four digit number for the first parameter of the random and the second one is also going to be four digits so this random function is going to generate four digit code which will consist of digits between one and nine that means zero will not be the part of this otp code now we need to update this user's row in the database as well with the latest otp so connection query let's put double quotations because we are going to use in string interpolation update user set otp equals dollar sign otp where email equals dollar sign email next we need to send this otp as an email to the user as well so to send this otp as an email to the user i'm going to call a function called send email so we need to define this function yet because this is not a built-in function this function send email is going to take two parameters from us the first one is going to be the email to which the email is going to be sent and the second parameter is the otp which will be sent in that email now since this is not a built-in function so it's complaining so let's go down and let's define an empty send email function for the time being it takes two parameters email and otp let's leave it empty for the time being now let's go up so after sending the email to the user now send the reply back to the fetch api so if you are inside this if block so that means everything has gone successfully we have found a matching email so in that case we want the message that we send to the user is success message so json underscore encode and it takes an array an associative array status is success so this will be an indication to the front end that everything has gone smoothly and front end can proceed further now if we are outside the if in that case the message should be same message but status set to failure and then at the very end let's exit out of this whole first part okay now let's work on if we have received an otp from the user in that case the first thing that we need to do is that we have to extract this data and local variable and sanitize as well so what i'm gonna do i'm gonna go up and copy this line paste it and since it's otp in this case so let's change the name to otp as well for the local variable okay now basically after receiving this otp we need to again connect with the database and verify if the otp is stored with this user email and the one provided by the user this one let's name it user provided otp so if this otp user provided otp and the one is stored in the database with the matching email if those two or two pieces match if they match that means the user can finally login so we need to execute a query the query is going to be select everything from user where otp equals user provided otp and email equals so against which email address row this otp should be checked so that means we should have an email address of the user which had made this request the first one and to whom we send the otp so where can we get that email address from because from the user we have only received otp this time since we stored the email address in the session variable so our session contains this email address so let's extract that email address from the session variable dollar sign underscore session and the variable name is email all capital okay now we can provide where where otp equals user provided otp and email equals dollar sign email since it's a varchar so it should be within single quotations semicolon let me close this okay now again this will return as a result set also let's store it in a variable named result now if result num rows so if some rows has been returned this will return as true in that case we need to create another session variable let's name it logged in and set it to true this indicates the user has properly logged in he has gone through both of those verification steps successfully and now he is a logged in user now send the same message status equals success else send status equals failure and then finally exit okay now let's work on our send email function so we are using php mailer to give our php program the capability to log into our email account pretending to be us i mean whoever's email credentials are provided pretending to be that person from there this php program we will create an email and send it to the user who is trying to log in i have already created a tutorial in which i have explained in detail how to send an email using this php mailer if you are interested i'll put the link in the description down below and i'll put the card up there please go and check it out that later in this tutorial therefore i'll just quickly explain the basic things i won't delve into details so the first thing is that we need to create an object of type php mailer [Music] if we want to receive exceptions we need to pass true to it now we have an object of type phpmailer and at the very end when we actually want to send an email we will call a method called mail on this object but before that we have to set certain attributes of this object so let's define those attributes by creating a try catch block because we can get exceptions so let's just simply create return the exception that we receive okay within this try block we will be setting those attributes first and then we will finally call the method send after setting all those attributes so to set the attribute let me copy paste this multiple times because there are quite a few attributes that we need to set the first attribute is going to be a method called smtp because we want to use smtp server through which we will be sending this email then we have to provide the host we are going to use smtp.gmail.com so basically the smtp server that we will be using is going to be gmail account so there are smtp servers hostname we are supposed to provide which is smtp.gmail.com then we need to provide username so i am going to use my account and password so i am keeping this thing currently dot dot i will insert this password at the end otherwise i will have to continuously blur this part which is going to take a lot of effort at the time of editing so i'm not putting this for the time being now we have to set smtp authentication to true so basically what this username and password is going to do is that this php program login.php is going to log into this account pretending to be me once this login.php program is logged in there then it will create an email address and send it to the user who is trying to login into our project so here it's saying if if smtp authentication is required which is yes true which is set to true now we need to provide the port of that smtp server which is 587 then the second property is smtp secure and here basically you have to provide the transmission security protocol so tls we want to use tls transmission layer security now the next attribute is set from so here you will provide the email address which will be displayed in the email address as the sender of this email to our actual user who is going to receive this email so our recipient will think that this email has come from whatever email you provide over here so you can provide a different email over here if you like but the thing is this gmail does not allow you to provide a different email address so even if you provide a different email address over here the recipient will still see this email address so that's the thing will gmail it it's not any kind of error or php mailers form in the next parameter which is which is optional so whatever name you provide over here is going to be displayed as the sender of the email so this will work so let me write code encoding with nj the name that should be displayed to the recipient the next is who should this email let us go to that means who is the recipient for that we have to use an attribute called add address and let's provide the email address of the user who's trying to login we need few more attributes next we have to define if the email that we are sending is it a html email or simple text so is html we have to set it to true now it is which email is in html email then we have to define the subject so this is going to be displayed as a subject of the email so your otp code is a subject then comes the body which is going to be html so let's say here is your otp code line break and then dollar sign otp we don't need this now finally we can actually send the email by calling the send method okay that's all the logic so far for our back-end we yet have to define the logic for log out but but first let's test out the code so far so we need to start the server first i'm going to start it at port 9000 okay now let's go there let's go to frontend.index.html and let's try it out we have already tried the empty empty email cannot be empty okay now let's try some random value you are not registered with us it's working okay now let's try the registered one so now we have come across our second div it's expecting in otp so let's go and check our inbox it's the code is 63.29 let's enter 63.29 and we have been successfully redirected to dashboard so that means our second logic is also working properly now all we need to do is we have to define the logout logic over here we need a button on this page when you click on that we should be logged out besides that piece of logic the other piece of logic that we want to implement is that we should only be able to see this page if we if we are actually logged in if you are not logged in we should immediately be redirected back to index.html page so let's go and work on that part so dashboard besides this h1 let's use a paragraph and lorem let's say 15 so it's some text now let's create a button let's give it a class btn and log out caption should be log out as well so let's link our same style file so that it looks relatively decent refresh okay now we need to define the logic for this logout page as well as we should immediately be redirected back to index.html if you are not logged in so let's go and work on first that part so we are defining the script in the same file now let's send a fetch request again to the same login file and this time we are not sending any data it's just a simple get request we don't need curly brackets so let's define the then block another then block now again it will check if data dot status equals success let's make it if status not equal to success that means we are not logged in in that case we should immediately be redirected back to index.html so window dot location dot replace front end index.html if not we will stay on the same page so nothing will happen this should be backend okay now we need to define its complementing part at the back end so let's go back to login.php so before this function let's define if that assign underscore [Music] server request my third equals get then following should happen so we will check if this session variable logged in if it's set to true then we are logged in and it's okay to display the dashboard otherwise the user should be redirected back so if is set dollar sign underscore session logged in so if this variable is set [Music] then echo success else send the failure message and then exit okay since we are logged in so obviously we won't be able to verify if we are being logged out so what i'm gonna do so let me put if data type status not equal to success 1 then we should be redirected now since we will get the status success and we are checking against if it's success 1 or not so we should be redirected this time okay so that means our first part is working properly now let me go back and remove this one and this let me come in this wow i put it there just to troubleshoot the problem now the only thing left is this logic for log out button so when we click on this logout button we should be logged out so we need to send another fetch request but only when the logout button is clicked so first of all let's get reference to this logout button and what class name have we given to this button log out let's make it shorter as well log out dot aid event listener let's click let's copy this fetch request paste it over here so we are making exactly the same fetch request okay and we are successfully logged out we want again to be redirected back to the index.html page but now the problem is this the first request was supposed to verify if the user is logged in or not and the second one should actually log out the user but if we are going if we are sending exactly same request to the server the server is going to be confused so we need to somehow distinguish between these two requests so what we are going to do is that we are going to attach a query parameter to this second request which is the actual logout so that the url is different and the server has a parameter in dollar sign underscore get global variable and based on that the server will identify that it's actually a logout request so to attach a query request first of all append a question mark at the end and then we need to append an object of type url search params so new url search params and to the constructor we have to pass in an object and whatever query strings we want to be attached we have to provide within this object as a key value pair so the first query variable is going to be and first and only is car lockout and its value should be set to true what this will do is this will make a variable named log out made available in the dollar sign underscore get global variable at the php and the server will check if that variable is present so that means a logout request otherwise it's a verification request this one the first one so what this will do this is going to create a query string something like this let's say so this will create a url like this so this url search param will attach these attributes as a query string like that and anything which is appended in the query string is going to be made available in our design underscore get global variable at php let's remove now let's go back to login.php let's copy this one and on top of this we have to put this one and we have to append another attribute which is dollar sign underscore get and the variable name is logout so if the request method is get and we have another variable set which is dollar sign underscore get log out that means it's a request to be actually logged out since this one has two attributes or two conditions to be checked so this one i'll this one should come before the second one otherwise this second one will always take precedence because it's checking only whether the request method is kept or not so this will be executed all the times we don't want that to happen first of all we want to check if this is a logout request or not if that is the case only this part should be executed otherwise the second statement should be checked and executed if the if statement is true so in that case let's remove this let's remove else part as well and we need to basically unset the session variables and then destroy the session so we have two session variables this session email and session logged in dollar sign and also session email we have to pass it to unset function copy paste and unset logged in now session underscore destroy and then send the message success message so let's go back to dashboard.html if the data.status success then redirect to frontend.html now let's give it a try so we need to since it's an object so we need to remove those quotations now let's give it a try refresh okay let's the digital nj otp 623 so status is success so we should log out and redirect it to index.html so it should be if status equals success i don't know when did i change this okay so let's try one more time we are logged out and we are trying to access dashboard so we again got redirected back to the index.html page now let's login 23 44 23 44 now log out and we got to redirect it back to the index.html so that's the end of our tutorial i hope you liked it if you want to keep watching tutorials like these please do like subscribe share and comment thank you so much

Channel: CodingShoding with NJ

Views: 11,145

Keywords: OTP, One time password, 2-step verification, OTP through Email, PHPMailer

Id: 4ZIshw5JMNk

Length: 62min 52sec (3772 seconds)

Published: Fri Dec 10 2021