Redirecting after login via POST using Express and Javascript

Question

I'm trying to build my first Node.js App. Right now I'm working on a login site, that should be redirecting the user to /backend after a successful login. However in the console it looks like everything works fine, but the browser just does nothing. I found some similar posts here on stackoverflow but most people were using AJAX and I couldn't find anything that worked for me.

Here is my POST-Method. It authenticates the user first and if succesful, I want to be redirected:

router.post('/login', (req, res) => {
    store
        .authenticate({
            username: req.body.username,
            password: req.body.password
        })
        .then(({ success }) => {
            if (success) {
                res.redirect('/backend')
            }
            else res.sendStatus(401)
        })
}); 

Here is my GET-Method for the backend site:

router.get('/', function(req, res, next) {
  res.render('backend/backend');
}); 

Not sure if needed, but here is the eventlistener that triggers the POST-Method:

const Login = document.querySelector('.Login')
Login.addEventListener('submit', (e) => {
  e.preventDefault()
  const username = Login.querySelector('.username').value
  const password = Login.querySelector('.password').value
  post('/login/login', { username, password })
    .then(({ status }) => {
      if (status === 200) alert('login success')
      else alert('login failed')
    })
})

My console shows something like this: Authenticating user username POST /login/login 302 GET /backend 304

However my browser doesn't show /backend, though the GET-Method is apparently being called. Thanks for your help!

Answer 1

I don't know about the post function and what the options are, but if you would replace it with a fetch function, then you could set the redirect: 'follow' property to redirect whenever the server tells it to do.

const Login = document.querySelector('.Login')
Login.addEventListener('submit', (e) => {
  e.preventDefault()
  const username = Login.querySelector('.username').value
  const password = Login.querySelector('.password').value
  fetch('/login/login', {
    method: 'POST',
    body: JSON.stringify({ username, password }),
    redirect: 'follow'
  }).then(({ status }) => {
    if (status !== 200) alert('login failed')
  })
})

Alternatively you could send the URL you are supposed to redirect to from the server and manually redirect to the page from the client.

// Instead of res.redirect(), use send to send the URL back to the client.
res.send('/backend');

const Login = document.querySelector('.Login')
Login.addEventListener('submit', (e) => {
  e.preventDefault()
  const username = Login.querySelector('.username').value
  const password = Login.querySelector('.password').value
  post('/login/login', { username, password })
    .then((response) => {
      if (response.status === 200) {
        alert('login success');
        return response.text();
      }
      else alert('login failed')
    })
    .then((url) => {
      location.replace(location.origin + url);
    });
})