# React UI calling Express API

**URL:** <https://community.auth0.com/t/react-ui-calling-express-api/119003>\
**Category:** Get Help\
**Tags:** apis, application\
**Created:** [October 20, 2023, 10:19am UTC](https://community.auth0.com/t/react-ui-calling-express-api/119003 "2023-10-20T10:19:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rees.watkins](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/rees.watkins/32/51816_2.png) [@rees.watkins](https://community.auth0.com/u/rees.watkins)\
**Post date:** [October 20, 2023, 10:19am UTC](https://community.auth0.com/t/react-ui-calling-express-api/119003/1 "2023-10-20T10:19:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marcelina.barycka](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/marcelina.barycka/32/56162_2.png) [@marcelina.barycka](https://community.auth0.com/u/marcelina.barycka)\
**Post date:** [October 20, 2023, 1:07pm UTC](https://community.auth0.com/t/react-ui-calling-express-api/119003/3 "2023-10-20T13:07:34Z")

</div>

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:...](https://developer.auth0.com/resources/code-samples/full-stack/hello-world/basic-access-control/spa/react-typescript/express-typescript)**
>
> See full-stack authentication and authorization in action using Auth0, React (TypeScript) using the React Router 6 library, and Express.js (TypeScript). This Auth0 "Hello World" code sample demonstrates basic access control in a full-stack system.

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

> [@Connected Auth0 with React and Express](https://community.auth0.com/t/connected-auth0-with-react-and-express/81231):
>
> 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

---

<div class="post-metadata">

**Author:** ![rees.watkins](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/rees.watkins/32/51816_2.png) [@rees.watkins](https://community.auth0.com/u/rees.watkins)\
**Post date:** [October 20, 2023, 6:15pm UTC](https://community.auth0.com/t/react-ui-calling-express-api/119003/4 "2023-10-20T18:15:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![marcelina.barycka](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/marcelina.barycka/32/56162_2.png) [@marcelina.barycka](https://community.auth0.com/u/marcelina.barycka)\
**Post date:** [October 23, 2023, 10:03am UTC](https://community.auth0.com/t/react-ui-calling-express-api/119003/5 "2023-10-23T10:03:03Z")

</div>

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](https://jwt.io/) it and extract the email address.

\*Adding a custom claim happens with auth0’s [actions](https://auth0.com/docs/customize/actions/flows-and-triggers/login-flow/event-object).

A code snippet:

```auto
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);
  };

```

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [November 6, 2023, 10:03am UTC](https://community.auth0.com/t/react-ui-calling-express-api/119003/6 "2023-11-06T10:03:24Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.