Security for React front-end and Node back-end

Question

I'm relatively new to the modern JavaScript web development world. I've built a very simple Node/Express back-end and a separate React front-end. My vague plan is to have users that will have permission to access certain areas of the front-end, and then have the front-end make requests to the back-end. Can the front-end and back-end share the same authentication/authorization scheme? Can they both use something like Auth0? How can I make these two secure?

I'm a little stuck and would appreciate any advice or a nudge in the right direction. I'm mostly stuck because these are two separate applications but the same "user" would technically have permissions to certain React views as well as certain Express endpoints - how they moosh together?

Thanks.

Kevin Qian · Accepted Answer · 2018-03-12 02:31:13Z

1

Although seems not directly related to your topic, but I would actually suggest you try Meteor if you are not planning to immediately start working on large projects (not pressing too hard on scalability).

Meteor has a builtin support for Accounts and interacts with MongoDB nicely, and it also has its own DDP protocol that simplifies API call massively. It also interacts nicely with React.

If you think Meteor might not be a good choice for yourself, you could still learn from its design policies of authorization, etc. It has quite a bit package source code that are not too difficult to understand, and should be helpful for you to learn the basic idea. (Actually, Meteor's Accounts package already implements the basic idea mentioned by another answerer, you can learn from its design principles)

answered Mar 12, 2018 at 2:31

Kevin Qian

2,7201 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rebecca Tay · Accepted Answer · 2018-03-12 01:51:59Z

0

When users log in to your site, issue them with an access token that they keep client side. On front-end, check if user has token and correct permissions before rendering components. On back-end, send the token as request headers to the endpoints.

answered Mar 12, 2018 at 1:51

Rebecca Tay

3311 silver badge11 bronze badges

Comments

Jun Bach · Accepted Answer · 2018-03-12 07:21:16Z

I have implemented a similar case, but with the spring boot kotlin at the backend instead. My solution is using JWT token to validate the authentication and authorization.

User logins by input login form and send POST method to backend via a REST API.Backend validates credential and returns the JWT token including encrypted user_role, expiration date, etc... if valid or 403 exception
Front-end decodes the JWT (using jwt-decode lib or something else), save it to validate the access permission to specific page in the website based on user_role. Eg: role='ADMIN' can access to admin dashboard page, role='USER' can access user profile page, etc.

If you use express as the backend, I suggest to use the feathersjs. It has backend solutions for this and an optional front end version. Refer: https://docs.feathersjs.com/api/authentication/jwt.html

Chamith Madusanka · Accepted Answer · 2020-09-01 06:32:15Z

0

Secure Front end (React.js) and Back end (Node.js/Express Rest API) with Keycloak follow this

answered Sep 1, 2020 at 6:32

Chamith Madusanka

5292 gold badges4 silver badges12 bronze badges

Collectives™ on Stack Overflow

Security for React front-end and Node back-end

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related