React JS and DRF — JWT Login and Register

What is JWT?

JWT is an open standard for transferring data securely between two parties. It is used with authentication systems to make authenticated requests. It is mainly composed of header, payload, and signature. JWT is a stateless authentication mechanism i.e it maintains sessions in the client-side itself instead of storing it in the server.

I have already demonstrated how to create a simple JWT auth API with Django Rest Framework which will be used here as the auth API Endpoint.

  1. Creating React App and Initial Setup

Initially, let’s create a new React App. Also, check if everything is fine with the created project.

Now let’s install all the required packages.

a. react-router-dom — For routing

b. react-bootstrap — For Styling our components

c. Axios — For making Request

src/index.js

Once installing every package, add the below line in the index.js file which initializes bootstrap.

Now, to begin with, I am creating Four pages inside the src/Pages folder.

a. Dashboard Page — Page where the user will be redirected after login.

b. Login Page — Page to check if the credentials of the user are correct

b. Login Pag

c. Register Page — Page where the new user stores their data to the server.

d. 404 Page — Page which is used to handle garbage routes.

Once done, create the routes inside the main file which is App.js.

src/App.js

2. Creating Our Views

We need an App bar to navigate within pages right. So I am using the basic Navbar by react-bootstrap.

src/App.js

Also, here I am using the basic login and register pages provided by bootstrap. You can style it in your own way if you want.

src/Pages/Login.js

URL — http://localhost:3000/login

Login Page UI

src/Pages/Register.js

URL — http://localhost:3000/register

Register Page

3. Making Auth Request to the API

To make a request to the API, I am Axios which is a React library that helps to make all types of requests. Pass all the value to the URL http://localhost:8000/account/api/register with the required parameters. This stores all our data to the server.

src/Pages/Register.js

Do the same for Login also. Just change the URL to http://localhost:8000/api/token/. This will check if the credentials are right.

src/Pages/Login.js

Now we have logged in, but other pages should know that we have logged in right. To do that, we can store the token in the local storage of the device. In the handleSubmit function, I am storing both the token and the user details to the local storage. So that I can access the token and user details anywhere within the project as I did below.

src/Pages/Dashboard.js

Dashboard Page

Feel free to contact me for any queries.

Email: sjlouji10@gmail.com

Linkedin: https://www.linkedin.com/in/sjlouji/

The complete code can be found on my Github: https://github.com/sjlouji/JWT-login-register-Medium

Happy coding…

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store