Using open and closed parts of React site with the same API

Help
1

Hello. I’m creating a React web app for a business whose customers can generate quotes without logging in (ie. no login required). And now I’m adding an internal dashboard with Auth0 login, where the employees can manage quotes, see statistics etc. I’ve got a Node backend with an API called from the frontend. The API has so far only had endpoints available openly, but I now want to add specific endpoints that should be limited by an Auth0 login.

How can I have both open and closed endpoints in the same API, called from a React frontend?

2

I figured it out after following a more extended tutorial on setting up Auth0 in a React environment: React and Auth0 Crash Course and Workshop - YouTube

EDIT: Just to add some more information, the solution was the JWT middleware used in the backend. By adding a helper function using the express-jwt and jwks-rsa packages, that helper function could be added to the endpoints you want protected. The endpoints without the helper function still works fine without any authorization.

messagesRouter.get("/public-message", (req, res) => {
  const message = getPublicMessage();
  res.status(200).send(message);
});

messagesRouter.get("/protected-message", checkJwt, (req, res) => {
  const message = getProtectedMessage();
  res.status(200).send(message);
});
1 Like
3

Perfect! Thanks for sharing that with the rest of community!

4

No problem. Just glad I found it out. :slight_smile:

1 Like