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!

Is the `post` function a library or self made wrapper around a `fetch` call? — Emiel Zuurbier, May 26 '20 at 10:02
I hope I understood you right, I am pretty new to node and server stuff. I did not make a self made wrapper, I think the post function is provided by express. — Carina Baur, May 26 '20 at 10:13
That's okay :). Express.js lives on the server. I meant the function in the event listener that makes the request to the server. — Emiel Zuurbier, May 26 '20 at 10:52
Please have a look at [this answer](https://stackoverflow.com/a/75188418/17865804) — Chris, Apr 07 '23 at 17:01

score 3 · Accepted Answer · answered May 26 '20 at 11:31

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);
    });
})

Thanks for your help! The first suggestion didn't work for me, but the second one fixed the problem! — Carina Baur, May 26 '20 at 14:17

Redirecting after login via POST using Express and Javascript

1 Answers1