1

I am trying to register and login through React via APIs using CORS. Registration of user done with email and password now I'm trying to login with email and password from login page (http://localhost:3000/login). I have to redirect to dashboard after login (http://localhost:3000/dashboard).

When I try to do this I'm getting error in console:

login error TypeError: _this2.props.handleSuccessfullAuth is not a function
    at Login.js

Below is my error screenshot:

enter image description here

I'm a beginner in React.

My login file in components/auth/Login.js:

import React, { Component } from "react";
import axios from "axios";

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

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);

}  

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  handleSubmit(event) {
    const { email, password } = this.state;

    axios
      .post(
        "http://localhost:3001/sessions",
        {
          user: {
            email: email,
            password: password
          }
        },
        { withCredentials: true }
      )
      .then(response => {
        if (response.data.status === "created") {
          this.props.handleSuccessfullAuth(response.data);
        }
      })
      .catch(error => {
        console.log("login error", error);
      });
    event.preventDefault();
  }

  render() {
    return (
<form onSubmit={this.handleSubmit}>
    <input className="input-signin-data"
    type="email" value={this.state.email}
            onChange={this.handleChange}
            required name="email"
    placeholder ="Email or phone number"
    />
    <br/>
    <input className="input-signin-data"
    type="password" value={this.state.password}
            onChange={this.handleChange}
            required name ="password"
    placeholder ="Password"
    />
    <br/>
    <button type="submit" className="btn btn-secondary border-signin-btn-search" >Signin</button>
      </form>
);
  }
}

app.js file in components/App.js

    import React, { Component } from "react";
import axios from "axios";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Navbar} from 'react-bootstrap';
import { Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import Dashboard from "./Dashboard";
import Login from "./auth/Login";
import Signup from "./auth/Signup";

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      loggedInStatus: "NOT_LOGGED_IN",
      user: {}
    };

    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.handleSuccessfulAuth = this.handleSuccessfulAuth.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
  }

  handleSuccessfulAuth(data) {
    this.props.handleLogin(data);    
    this.props.history.push("/dashboard");
  }

  handleLogoutClick() {
    axios
      .delete("http://localhost:3001/logout", { withCredentials: true })
      .then(response => {
        this.props.handleLogout();
      })
      .catch(error => {
        console.log("logout error", error);
      });
  }

  checkLoginStatus() {
    axios
      .get("http://localhost:3001/logged_in", { withCredentials: true })
      .then(response => {
        if (
          response.data.logged_in &&
          this.state.loggedInStatus === "NOT_LOGGED_IN"
        ) {
          this.setState({
            loggedInStatus: "LOGGED_IN",
            user: response.data.user
          });
        } else if (
          !response.data.logged_in &
          (this.state.loggedInStatus === "LOGGED_IN")
        ) {
          this.setState({
            loggedInStatus: "NOT_LOGGED_IN",
            user: {}
          });
        }
      })
      .catch(error => {
        console.log("check login error", error);
      });
  }

  componentDidMount() {
    this.checkLoginStatus();
  }

  handleLogout() {
    this.setState({
      loggedInStatus: "NOT_LOGGED_IN",
      user: {}
    });
  }

  handleLogin(data) {
    this.setState({
      loggedInStatus: "LOGGED_IN",
      user: data.user
    });
  }

  render() {
    return (
      <div className="container-fluid app-container">
           <Router>
      <div className="container-fluid main-conatiner">
      <Navbar>
          <Navbar.Brand  className="brand1" >  
          <Link to="/"><Button className="border-btn" >Jobsenlist</Button></Link>
          </Navbar.Brand>
          <Navbar.Toggle />
          <Navbar.Collapse className="justify-content-end">
           <Navbar.Text className="brand2">
           <Link to="/login"><Button className="border-btn mr-3" >Signin </Button></Link>
           <Link to="/signup"><Button className="border-btn " > Signup</Button></Link>
          </Navbar.Text>
          </Navbar.Collapse>
      </Navbar>
          <Switch>
          
          <Route path="/login"><Login /></Route> 
          <Route path="/signup">
          <Signup />
          </Route>
          </Switch>
                <p>Status: {this.props.loggedInStatus}</p>
        <button onClick={() => this.handleLogoutClick()}>Logout</button>
        </div>
        </Router>
      </div>
    );
  }
}

Dashboard file in components/Dashboard.js

import React from "react";

const Dashboard = props => {
  return (
    <div>
      <div>
        <h1>Dashboard</h1>
        <h1>Status: {props.loggedInStatus}</h1>
      </div>
    </div>
  );
};

export default Dashboard;
3
  • 1
    You didn't pass props to your App component in the constructor, maybe that's an issue? Commented Mar 18, 2021 at 9:26
  • tried this still same issue.
    – SkRoR
    Commented Mar 18, 2021 at 10:55
  • 1
    See the answer, I think that's the main problem of it not working. Commented Mar 18, 2021 at 11:00

1 Answer 1

1

You're not calling your function properly.

You're calling this.props.handleLogin(data) while your function is in the same component.

You should do this.handleLogin(data)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.