JavaScript Prevent accessing restricted page without login in

Question

I have a login page after being logged to page I move to my next-page (welcome). The problem is that if I copy and paste the URL of the next-page (welcome) my page also open, I want to restrict to open the next page without login access. Guide me What to do.

Script

function click() {
    inputname = $('#name').val();
    inputpassword =$('#pass').val();

    for (i in data.username )      //to match username with provided array
      { 
        name = data.username[i];

        for ( i in data.password){
            pass = data.password[i];

            if (inputname == name & inputpassword == pass ){
                window.open('welcome1.html','_self');
            }               
        }
    }

    if (inputname != name & inputpassword != pass ){
        alert("Wrong Password");
    }
}

HTML

<input type="mail" id="name">
<input type="password" id="pass">
<input type="submit" id="submit" value="log In" onclick= "click()">

This is not possible securely with just Javascript. To do this, you need to create a web server. — pfg, Oct 24 '17 at 19:23
@RajanBenipuri i want when ever a page open it checks whether user login or not. — Danish Saber, Oct 24 '17 at 19:25
maybe start with a simple "LAMP", you shoud find thousands of howtos — john Smith, Oct 24 '17 at 19:28
Dear @DanishSaber we are very low IQ people, we can't assume your scenario without going through the code and analyzing how you are processing login function. So kindly provide the code if you want further help. I don't think it will be possible for anyone to write the complete login script and paste it in your answer. ;) — Rajan Benipuri, Oct 24 '17 at 19:29
@RajanBenipuri have a look please......i m not expert in programming even i m new — Danish Saber, Oct 24 '17 at 19:45

score 4 · Answer 1 · answered Oct 26 '17 at 12:46

This is not a secure method of authentication. This solutions should not be on any system which you want to make secure. Authentication should happen on the server, not the client.

In your question, you never check on the second page if the user authenticated on the first page. In order to check this, you should use session storage.

// LOGIN.js
function click() {
    inputname = $('#name').val();
    inputpassword =$('#pass').val();

    for (i in data.username )      //to match username with provided array
    { 
        name = data.username[i];

        for ( i in data.password){
            pass = data.password[i];

            if (inputname == name & inputpassword == pass ){
                //The user has successfully authenticated. We need to store this information
                //for the next page.
                sessionStorage.setItem("AuthenticationState", "Authenticated");
                
                //This authentication key will expire in 1 hour.
                sessionStorage.setItem("AuthenticationExpires", Date.now.addHours(1));
                
                //Push the user over to the next page.
                window.open('welcome1.html','_self');
            }               
        }
    }

    if (inputname != name & inputpassword != pass ){
        alert("Wrong Password");
    }
}

//addHours to a date.
//Credit to: Kennebec
//https://stackoverflow.com/questions/1050720/adding-hours-to-javascript-date-object
Date.prototype.addHours = function(h) {    
   this.setTime(this.getTime() + (h*60*60*1000)); 
   return this;   
}

<!-- LOGIN.html --->

<input type="text" id="name" name="name" />
<input type="text" id="pass" name="pass" />
<input type="submit" id="sub" name="sub" onclick="click();" />

And then on your second page, check to see if the user is authenticated. If not, push them over to an Access Denied page.

//Is the user authenticated?
if (sessionStorage.getItem('AuthenticationState') === null) {
   window.open("AccessDenied.html", "_self");
}
//Is their authentication token still valid?
else if (Date.now > new Date(sessionStorage.getItem('AuthenticationExpires'))) {
      window.open("AccessDenied.html", "_self");
}
else {
  //The user is authenticated and the authentication has not expired.
}

JavaScript Prevent accessing restricted page without login in

1 Answers1

Linked