skip to Main Content

I want to make register and signin form, everything is okay, i can do register. But my signin part is seem not working.

Error during signin: ReferenceError: user is not defined

It is on Signin.js line 40, here:

return response.json(user[0]);

And this is the full code of Signin.js :

import React from "react";

class Signin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      signInEmail: "",
      signInPassword: "",
    };
  }

  onEmailChange = (event) => {
    this.setState({ signInEmail: event.target.value });
  };

  onPasswordChange = (event) => {
    this.setState({ signInPassword: event.target.value });
  };

  onSubmitSignIn = () => {
    const { signInEmail, signInPassword } = this.state;

    fetch("http://localhost:3000/signin", {
      method: "post",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: signInEmail,
        password: signInPassword,
      }),
    })
      .then((response) => {
        console.log("Response from server:", response);

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const contentType = response.headers.get("content-type");
        if (contentType && contentType.includes("application/json")) {
          return response.json(user[0]);
        } else {
          throw new Error("Invalid or empty JSON response");
        }
      })
      .then((response) => response.json())
      .then((user) => {
        if (user.id) {
          this.props.loadUser(user);
          this.props.onRouteChange("home");
        }
      })
      .catch((error) => {
        console.error("Error during signin:", error);
      });
  };

  render() {
    const { onRouteChange } = this.props;
    return (
      <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
        <main className="pa4 black-80">
          <div className="measure">
            <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
              <legend className="f1 fw6 ph0 mh0">Sign In</legend>
              <div className="mt3">
                <label className="db fw6 lh-copy f6" htmlFor="email-address">
                  Email
                </label>
                <input
                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                  type="email"
                  name="email-address"
                  id="email-address"
                  onChange={this.onEmailChange}
                />
              </div>
              <div className="mv3">
                <label className="db fw6 lh-copy f6" htmlFor="password">
                  Password
                </label>
                <input
                  className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                  type="password"
                  name="password"
                  id="password"
                  onChange={this.onPasswordChange}
                />
              </div>
            </fieldset>
            <div className="">
              <input
                onClick={this.onSubmitSignIn}
                className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
                type="submit"
                value="Sign in"
              />
            </div>
            <div className="lh-copy mt3">
              <p
                onClick={() => onRouteChange("register")}
                className="f6 link dim black db pointer"
              >
                Register
              </p>
            </div>
          </div>
        </main>
      </article>
    );
  }
}

export default Signin;

i’ve already tried console log everything i need to, the response from server is look okay, this is what i get:

Response {type: 'cors', url: 'http://localhost:3000/signin', redirected: false, status: 200, ok: true, …}

I’ve expected for this signin part, when user input their data (that already registered on database), it bring them into the app.

2

Answers


  1. user is not defined in this line, return response.json(user[0]); ,
    change some code of lines in onSubmitSignIn method

    onSubmitSignIn = () => {
        const { signInEmail, signInPassword } = this.state;
    
        fetch("http://localhost:3000/signin", {
          method: "post",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            email: signInEmail,
            password: signInPassword,
          }),
        })
          .then((response) => {
            console.log("Response from server:", response);
    
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`);
            }
    
            const contentType = response.headers.get("content-type");
            if (contentType && contentType.includes("application/json")) {
              return response; // Change this line
            } else {
              throw new Error("Invalid or empty JSON response");
            }
          })
          .then((response) => response.json())
          .then((users) => {     //changed this
            const user = users[0]; //changed this
            if (user.id) {
              this.props.loadUser(user);
              this.props.onRouteChange("home");
            }
          })
          .catch((error) => {
            console.error("Error during signin:", error);
          });
      };
    
    Login or Signup to reply.
  2. You should return the entire response as JSON and handle the user data in the subsequent then block.

     const contentType = response.headers.get("content-type");
      if (contentType && contentType.includes("application/json")) {
        return response.json();
      } else {
        throw new Error("Invalid or empty JSON response");
      }
    })
    .then((user) => {
      if (user && user.id) {
        this.props.loadUser(user);
        this.props.onRouteChange("home");
      } else {
        console.error("Invalid user data received from the server");
      }
    })
    .catch((error) => {
      console.error("Error during signin:", error);
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search