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:
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;