I need help after logging in of user. I tried to redirect the page if the data has result but if I log in an incorrect email or password, it still redirects the page rather than alerting an error. I'm using tokens from API by the way.

function loginUser(){

fetch('', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        email: document.getElementById("email").value,
        password: document.getElementById("password").value
    })
})
.then(data => data.json() )
.then(data =>  { 

    if(data){
        redirect: window.location.replace("../Sample/home.html") 
    } else{
        alert("Invalid Email or Password");
    }
}) 
.catch((err) => {
    console.error(err);
})

}

function registerUser(){

fetch('', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        given_name: document.getElementById("given_name").value,
        last_name: document.getElementById("last_name").value,
        email: document.getElementById("email").value,
        password: document.getElementById("password").value,
        password_confirmation: document.getElementById("confirm_password").value
    })
})
.then(data => data.json())
.then(data =>  { console.log(data); 
})
.catch((err) => {
     alert ("Error!");
    console.error(err);
})
}

Valid API response:

Invalid API resopnse:

I need help after logging in of user. I tried to redirect the page if the data has result but if I log in an incorrect email or password, it still redirects the page rather than alerting an error. I'm using tokens from API by the way.

function loginUser(){

fetch('http://example_website./api/login', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        email: document.getElementById("email").value,
        password: document.getElementById("password").value
    })
})
.then(data => data.json() )
.then(data =>  { 

    if(data){
        redirect: window.location.replace("../Sample/home.html") 
    } else{
        alert("Invalid Email or Password");
    }
}) 
.catch((err) => {
    console.error(err);
})

}

function registerUser(){

fetch('http://example_website./api/register', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        given_name: document.getElementById("given_name").value,
        last_name: document.getElementById("last_name").value,
        email: document.getElementById("email").value,
        password: document.getElementById("password").value,
        password_confirmation: document.getElementById("confirm_password").value
    })
})
.then(data => data.json())
.then(data =>  { console.log(data); 
})
.catch((err) => {
     alert ("Error!");
    console.error(err);
})
}

Valid API response:

Invalid API resopnse:

• javascript
• authentication
• ecmascript-6
• es6-promise
• fetch-api

Share Improve this question Follow edited Aug 2, 2017 at 1:58 Joseph asked Aug 1, 2017 at 14:03 JosephJoseph 7,8053232 gold badges105105 silver badges228228 bronze badges 6

• when you debug your code, what do you get in the data variable in this line .then(data => data.json()) for both cases successfully authenticated or not – Carlos Valencia Commented Aug 1, 2017 at 14:14
• @randomguy04. I got the response from the api. Like if the user logs in correctly, the response is login successful and it has a token. If not, it will say validation failed. I tried to use console.log(data) to see the result in browser console. It all es from the login api – Joseph Commented Aug 1, 2017 at 14:57
• can you edit your question and post the API response when the validation fails please? – Carlos Valencia Commented Aug 1, 2017 at 15:02
• @randomguy04. Pls check image above. I already edited it – Joseph Commented Aug 1, 2017 at 15:17
• have you tried the answer below? – Carlos Valencia Commented Aug 1, 2017 at 16:41

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

When you are running this piece of code

.then(data =>  { 

    if(data){ //here!
         redirect: window.location.replace("../Sample/home.html") 
    } else{
        alert("Invalid Email or Password");
    }
}) 

data is always a truthy value, because it is an object with content, what you want to do, is to validate data.response instead like:

.then(data =>  { 

    if(data.response){
         redirect: window.location.replace("../Sample/home.html") 
    } else{
        alert("Invalid Email or Password");
    }
})