React UI calling Express API

[rees.watkins]

I have a React app - Single page app on OAuth0 that authenticates using @auth0/auth0-react
I have an express server that provides an API for the React app. Express authenticates with express-oauth2-jwt-bearer - API set up in OAuth0. I can call the API from React and it all works and authenticates. I need to identify the user logged onto the React app at the Express layer. e.g. email address. Is there an article on this or on the best way to configure a React / Express architecture? This article seems to offer a solution but the link gives a 400 error- Learn how to add OpenID Connect authentication to your Express apps, using our just released express-OpenID-connect SDK

[marcelina.barycka]

Hey there @rees.watkins !

Here is a guidance on setting the architecture in question:

React with React Router 6 (TypeScript) + Express.js (TypeScript) Code Sample:...

And here a related topic that may serve as a reference:

Connected Auth0 with React and Express

I created login page in react and user created in expressjs i want to authenticate that user with auth0 but don’t want to use auth0 login page is it possible? if yes how can i do that

[rees.watkins]

Thank you very much - this is the approach I have used. However the thing I need is information about the logged on user. At the React side I can see email address etc. I would like email or some identifier on the express side.

I am able to call the UserInfo endpoint and get the email but this seems expensive to do every api call.

Is there a simpler / better was to get the email on the express side?

[marcelina.barycka]

Hey there @rees.watkins !

Adding a custom claim to the access token* with an email of the user that logs in can be an option.

Your Express API receives this token, you can decode it and extract the email address.

*Adding a custom claim happens with auth0’s actions.

A code snippet:

exports.onExecutePostLogin = async (event, api) => {
  const namespace = 'https://myapp.example.com';
 
 // add a custom claim to the access token
    api.accessToken.setCustomClaim(`${namespace}/preferred_contact`, event.user.email);
  };