Add authentication for React app

1

I started learning React two weeks ago. I made a simple project, navigating with react-router between the pages.
I have Node+Express+Mongo as backend API and it’s working with Android app which I developed.
It is an admin panel with login by password[only]. After the admin is logged in there is a panel with a sidebar displaying information from my server.
I developed most of the view (the home page and login page).
I am using Webpack and Webpack-dev-server so that I don’t have a Node-Express server with server.js file.
I have searched for ways to authenticate the admin login, I tried to make Passport.js working with my React web app but I don’t know where to authenticate the user.
Simply put, I find a lot of tutorials using Node Express, checking if the user is logged in and displaying home.html or login.html page but since I am using React, displaying index.html with static content (components) with no Node server - I don’t know where to make the authentication.

Here is a screenshot of my project folder:

show.png839×579 37.3 KB

1 Like
2

What you usually do is the following:

  1. Create a form, in which the user is able to write his email/username and password, send the data as a POST request to your API (Express), which would then hash the password and compare it with the hash stored in your database.
  2. If the credentials are correct, you send a JWT, then the React application would store it in the localStorage of the browser, so subsequent requests would add a header like Bearer: /6das#hkhsad%m=1$n4432 or something similar.

I’ve just found this article, but seems like it uses Express and React, check it out https://vladimirponomarev.com/blog/authentication-in-react-apps-creating-components

3

Ok, I checked out the article. It indeed uses React with Express and I tried to add Express to my project.
I couldn’t do that and I don’t understand how can I add now Express after it already runs on Webpack-dev-server.
Could you point out the changes I should apply in order to move from Webpack dev server to Express server?

4

In theory, webpack-dev-server is an Express.js server, which serves a webpack bundle, but without the code I can’t tell but guess.

5

I am in the same boat. I tried the Auth0 authentication service and got nowhere fast.
Also tried doing the authentication with just Node but I feel lost in a quagmire.
I think the 2000 hours will be spent on this one project.

2 Likes