# How to route with login form with mysql and node js with react js

**URL:** <https://forum.freecodecamp.org/t/how-to-route-with-login-form-with-mysql-and-node-js-with-react-js/474407>\
**Category:** General\
**Created:** [August 18, 2021, 6:36pm UTC](https://forum.freecodecamp.org/t/how-to-route-with-login-form-with-mysql-and-node-js-with-react-js/474407 "2021-08-18T18:36:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![asifaslam](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/asifaslam/32/229507_2.png) [@asifaslam](https://forum.freecodecamp.org/u/asifaslam)\
**Post date:** [August 18, 2021, 6:36pm UTC](https://forum.freecodecamp.org/t/how-to-route-with-login-form-with-mysql-and-node-js-with-react-js/474407/1 "2021-08-18T18:36:33Z")

</div>

import React, { useEffect, useState } from “react”;

import Axios from “axios”;

import “…/App.css”;

export default function Registration() {

const [usernameReg, setUsernameReg] = useState("");

const [passwordReg, setPasswordReg] = useState("");

const [username, setUsername] = useState("");

const [password, setPassword] = useState("");

const [loginStatus, setLoginStatus] = useState("");

Axios.defaults.withCredentials = true;

const register = () =\> {

```
Axios.post("http://localhost:3001/register", {

  username: usernameReg,

  password: passwordReg,

}).then((response) => {

  console.log(response);

});

```

};

const login = () =\> {

```
Axios.post("http://localhost:3001/login", {

  username: username,

  password: password,

}).then((response) => {

  if (response.data.message) {

    setLoginStatus(response.data.message);

  } else {

    setLoginStatus(response.data[0].username);

  }

});

```

};

useEffect(() =\> {

```
Axios.get("http://localhost:3001/login").then((response) => {

  if (response.data.loggedIn == true) {

    setLoginStatus(response.data.user[0].username);

  }

});

```

}, );

return (

```
<div className="App">

  <div className="registration">

    <h1>Registration</h1>

    <label>Username</label>

    <input

      type="text"

      onChange={(e) => {

        setUsernameReg(e.target.value);

      }}

    />

    <label>Password</label>

    <input

      type="text"

      onChange={(e) => {

        setPasswordReg(e.target.value);

      }}

    />

    <button onClick={register}> Register </button>

  </div>

  <div className="login">

    <h1>Login</h1>

    <input

      type="text"

      placeholder="Username..."

      onChange={(e) => {

        setUsername(e.target.value);

      }}

    />

    <input

      type="password"

      placeholder="Password..."

      onChange={(e) => {

        setPassword(e.target.value);

      }}

    />

    <button onClick={login}> Login </button>

  </div>

  <h1>{loginStatus}</h1>

</div>

```

);

}

/////////////////////////////////////////  
import React, { useEffect, useState } from “react”;

import Axios from “axios”;

import NormalUser from “…/components/NormalUser”;

import Mod from “…/components/Mod”;

import Admin from “…/components/Admin”;

export default function Main() {

const [role, setRole] = useState("");

Axios.defaults.withCredentials = true;

useEffect(() =\> {

```
Axios.get("http://localhost:3001/login").then((response) => {

  if (response.data.loggedIn == true) {

    setRole(response.data.user[0].role);

  }

});

```

}, );

return (

```
<div>

  {role == "visitor" && <NormalUser />}

  {role == "mod" && <Mod />}

  {role == "admin" && <Admin />}

</div>

```

);

}

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [February 17, 2022, 6:37am UTC](https://forum.freecodecamp.org/t/how-to-route-with-login-form-with-mysql-and-node-js-with-react-js/474407/2 "2022-02-17T06:37:11Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.