2

I have a react component called "Login".

Upon successful login credentials the backend redirects to user page.

  app.post(
    "/Login",
    passport.authenticate("local", {
      failureRedirect: "/login",
      failureFlash: true
    }),
    function(req, res) {
      res.redirect("/User");
    }
  );

In the browser page though there is no change. This is a picture of the network stats:

enter image description here

On the picture you can see that second request for /User is made but the browser doesnt load the the new page.

This is the Login componnent:

import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import NavBar from "../components/styled/NavBar";
import { UserInput, Label, SubmitButt } from "../components/styled/Forms";
import styled from "styled-components";

const FormWrapper = styled.div`
  padding: 10px;
  border-radius: 5px;
  background-color: #f2f2f2;
`;
const Form = styled.form``;

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: ""
    };
  }

  submitForm = async e => {
    e.preventDefault();
    const res = await fetch("/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password
      })
    });
  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    return (
      <React.Fragment>
        <NavBar /> <h1>Hello from Login {this.props.location.msg}</h1>
        <FormWrapper>
          <Form>
            <Label>Username</Label>
            <UserInput
              name="username"
              type="text"
              placeholder="Type your username here"
              value={this.state.name}
              onChange={this.onChange}
            />
            <Label>Password</Label>
            <UserInput
              name="password"
              type="password"
              placeholder="Type your password here"
              value={this.state.name}
              onChange={this.onChange}
            />
            <SubmitButt onClick={this.submitForm}>Submasdasdit</SubmitButt>
          </Form>
        </FormWrapper>
      </React.Fragment>
    );
  }
}

export default Login;
Hairi
  • 3,318
  • 2
  • 29
  • 68
  • If the backend is working correctly, why don't you show the frontend code? We need a [mcve] of the bit that's not working. – jonrsharpe Dec 22 '18 at 18:43
  • @Alex I saw the post. Didn't solve my problem. I observe the same issue as @ j10 does. – Hairi Dec 22 '18 at 20:02
  • @Hairi you can't redirect the client from an AJAX response, on a successful API call just redirect from the client via `window.location` – James Dec 23 '18 at 02:06
  • @James I did exactly that (as pointed out by j10 in the [Alex's post](https://stackoverflow.com/questions/39735496/redirect-after-a-fetch-post-call/) ). It seems to me as a workaround to something not working. Yes this approach work for me too, but doesn't seem natural. There is a different behavior using Chrome, I am testing it on Chrome **Version 71.0.3578.98 (Official Build) (32-bit)** . – Hairi Dec 23 '18 at 13:28

0 Answers0