Authentication, Routers and much more | ReactJS | Part-2

There we Goooo!!

Boring summers ONN!

Don’t miss out part-1 in which i covered how to use Django-Rest-Framework to create basic authentication https://medium.com/p/f431963d745d/

In the last part, we tried to create a backend using Django for our website with Login and signup APi Endpoints for users to create new accounts and to log in. Today we will be focusing on …..

• Create Routers for our website
• Making login page
• Authentication Logic
• Protected Routers

I will skip all the setup related stuff for ReactJs and consider you already have some basic knowledge about ReactJs.

Let’s Build a basic login form with other logics explained below

login.js

Starting with Taking input from user and saving that

We will be using states to save user input. we are using handleChange() that updates the value if the value is changed in login-form by a user. This is where magic is happing, this is a way to handle multiple inputs in one function.

[event.target.name]: event.target.value,

event.target.name gives the value of name of input which we can define in HTML using name=”something” and event.taget.value will give its value. setState is used to updates value in state.

Now that we have saved user input’s, We will make a POST request to server with credentials, ‘axios’ seems a nice library and we will be using that. Submit click is handled by handleSubmit(). If credentials are right server responds with TOKEN which is then used for any other requests to the server so we will save it in our local storage of the browser to do that we will use local-storage using ls.set to save token.

Redirecting to Home page

Now, after token is saved we wish to redirect the page to home page, also I’m using ‘react-router-dom’ to managing routing stuff here.

I have used a new function redirect() inside which we are requesting a token from local-storage and when found will redirect to (‘/’) which is ‘Home’. This function is also called from componentDidMount() which is called immediately after component is mounted. so, if user is logged in already this will push to Home page.

Now Let’s create our main Routing logic

App.js

import React from 'react';
import './App.css';
import Login from './pages/login';
import {Route,Switch} from 'react-router-dom';
import Register from './pages/register'
import { PrivateRoute } from './api/isAuth'
import Home from './pages/home'
function App() {
return (
  <Router>
    <Switch>
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register}/>
      <PrivateRoute exact path="/" component={Home}/>
    </Switch>
  </Router>
 );
}
export default App;

But what is PrivateRoute?

As name suggest these would be like a private component and user have to be logged in to access these components. As you can see they are been imported from ‘./api/isAuth’ so they much be user-defined components, let's see how to create them.

isAuth.js

we are again checking if Token is present in local-storage or now. If Token is not found user is redirected the login page.

Resultssss…..

Now you can create a Registration page just like that.

I have covered a lot of things here which covers so many StackOverflow answers this whole thing took more than 1 day to understand andd guess what I personally hate react for now!.