Login Authentication in React
Mandatory: first you have to development environment running Node.js recommend version 10.22.0 and npm version 6.14.6 you have to install this on mac OS
Follow the steps:
First you have to create react project
Check npm run successfully or not
Node -ve
if you see the version name that means your node installed successfully
npx create-react-app project_name
cd project_name
npm start
if you want to provide some style so you can add manually css in app.css file
Mycss.css
App-header {
background-color: gray;
padding: 10px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
Every time you have to add the packages as per your project requirement
When your project run successfully on the localhost
Open the App.js file
import logo from './logo.svg';
import './App.css';
function App() {
return (
);
}
export default App;
function App() {
return (
HEllO MY REACT APP
);
}
export default App;
Now create a login page
you have to install the package
$ npm install react-router-dom
After installing the package you see the output like that
+ arereact-router-dom@5.2.0
added 13 packages, and audited 1974 packages in 6s
you have to create two components called which is act as private, user cant access the page until they log in successfully.
Create directory
mkdir src/components/Dashboard
mkdir src/components/Login
import React from 'react';
export default function Dashboard() {
return(Dashboard
);
}
Save the file
Same code for login component
import React from 'react';
export default function Login() {
return(Login page
);
}
Open App.css file and import both component
import React from 'react';
import './App.css';
import Dashboard from '../Dashboard/Dashboard';
import Login from '../Login/Login';
function App() {
return (
<>
);
}
export default App;
now you have to import Route,Switch BrowserRoute
npm install react-router-dom:
import React from 'react';
import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Dashboard from '../Dashboard/Dashboard';
import Login from '../Login/Login';
function App() {
return (Application
);
}
export default App;
if you run the project http://localhost:3001/dashboard
you can see the dashboard page but still, there is no security, dashboard page show after successful login for the security we have to render the page.
Follow the steps :
We have to create a new directory for the login component
mkdir src/component /login_success
Open login page directory in a text editor
Create a login form
import React from 'react';
export default function Login() {
return(
)
}
Open the App.js file
import React, { useState } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
import Dashboard from '../Dashboard/Dashboard';
import LoginPage from '../Loginpage/Loginpage';
import Login from '../Login/Login';
function App() {
const [token, setToken] = useState();
if(!token) {
return
}
return (Application
);
}
export default App;
Have you try to run the project you can still visit the dashboard page that means the token has not yet been set
now you have to call the local API from your login page and render the component after you successfully retrieve the token.
npm install --save-dev express cors
you have to open a new file called server.js but remember that do not add this file to the src/ directory
$ nano server.js
Import express in the server.js
const express = require('express');
const cors = require('cors')
const app = express();
app.use(cors());
app.use('/login', (req, res) => {
res.send({
token: 'test123'
});
});
app.listen(8080, () => console.log('API is running on http://localhost:8080/login'));
you have to set the tokens and set the props as per above the code
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './Login.css';
async function loginUser(credentials) {
return fetch('http://localhost:8080/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(credentials)
})
.then(data => data.json())
}
export default function Login({ setToken }) {
const [username, setUserName] = useState();
const [password, setPassword] = useState();
const handleSubmit = async e => {
e.preventDefault();
const token = await loginUser({
username,
password
});
setToken(token);
}
return(
)
}
Login.propTypes = {
setToken: PropTypes.func.isRequired
};
When you run the project you will create a successful login