Routing components in React JS using login functionality - reactjs

Question

I am trying to build a full stack web application using Spring and React JS.
I have created login/register APIs in Spring and have connected them to React. They work just alright.
This is my UserService
import axios from 'axios';
const user_base_url = "http://localhost:8080/users";
class UserService{
createUser(user) {
return axios.post(user_base_url + '/register', user);
}
authenticateUser(user) {
return axios.post(user_base_url + '/login', user);
}
}
export default new UserService();
This how I validate my user in the LoginComponent.
validateUser = () => {
let user = {
username: this.state.email,
password: this.state.password,
};
UserService.authenticateUser(user).then((res) => {
if(res.data === 'SUCCESS') {
//logged in
console.log("logged in");
} else if(res.data === 'FAILURE') {
console.log("NO");
this.resetLoginForm();
this.setState({"error":"Invalid username or password"});
}
})
};
I now wish to add routes to my application so that certain components can only be accessed when logged in.
function App() {
return (
<div>
<Router>
<HeaderComponent/>
<div className="container">
<Switch>
<Route path="/" exact component={LandingPageComponent}></Route>
<Route path ="/customers" component = {ListCustomerComponent}></Route>
<Route path ="/add-customer/:id" component = {CreateCustomerComponent}></Route>
<Route path = "/view-customer/:id" component = {ViewCustomerComponent}></Route>
<Route path = "/admin-login" component = {AdminLoginComponent}></Route>
<Route path = "/admin-register" component = {AdminResgisterComponent}></Route>
</Switch>
</div>
<FooterComponent/>
</Router>
</div>
);
}
export default App;
How can this be achieved? I found solutions using tokens but I haven't used a token, I only check user is entering correct username and password from the database (MySQL) via my REST API.
Any help would be highly appreciated.

Answer 1

There are two types of Routes that are usually defined: Open Routes and Protected Routes.
Open Routes are the ones that are accessible by a user without any authentication and Protected Routes are the ones that require a certain form of authentication to be accessed.
Now, let's proceed to answer your questions.
How to Implement a Protected Route?
First, you need to know whether the user is authenticated or not and for the same, you will need to use a certain "value" or "token" (Like An ID Card) that says that this user is authenticated.
For a simple practise application, you could just store a Boolean saying whether the user is authenticated or not.
You will need to store this value in a place such as Local Storage, Cookies or Session Storage.
For this example, I have assumed that you are storing the value in a local Storage.
A Protected Route will be wrapped around with a condition that checks the Local Storage to find a value that says the user is authenticated.
isAuthenticated === true ===> Show The Desired Component.
isAuthenticated === false ===> Redirect the User to the login page.
// isAuthenticated is extracted from the local storage.
<Route path="/aClassfiedPath" render={() => (
isAuthenticated === true
? <DesiredComponent />
: <Redirect to='/login' />
)} />
You will also notice another practice, that is, to make a totally separate Layout for the Protected Components and inside the Layout, check whether the user is authenticated or not.
// Assuming the required Modules have been imported
const ProtectedLayout = ({children}) => {
if (!isAuthenticated) {
return (
<Redirect to="/loginPage" />
)
}
// children contains the Desired Component and `div` tag represents a custom
// container meant for Protected Routes. Like: A Speacial Header or Side Navigation.
return (
<div>
{children}
</div>
)
}
Recommended Read
An Article on Protected Routes
<Redirect> Reference
Render Prop of <Route>