Auth0 react - login + backend API protection

[rashmi]

Hi, I am using auth0 login for react app. I also have my backend on express, which I have protected using steps mentioned here - Auth0 Node (Express) API SDK Quickstarts: Authorization. I am confused and unable to call the protected backend route from my react frontend. Also I am confused with how to deal with 2 separate auth0 applications on my react front end - one to manage login. second one to call auth0 protected backend API on express. Any help will deeply be appreciated. I am sure it is quite a common use case.

When I try to use this - Auth0 React SDK Quickstarts: Call an API, then the user.email becomes undefined. It happens on adding the audience and scope. Is there a way to still preserve the user.email instead and use this? Also there seems to be a token mismatch between the token fetched using getTokenSilently

<React.StrictMode>
    <Auth0Provider
      domain={domain}
      clientId={client_id}
      authorizationParams={{
        redirect_uri: window.location.origin,
        audience: {audience},
        scope: {scope},
      }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>

[tyf]

Hey there @rashmi !

@rashmi

Also I am confused with how to deal with 2 separate auth0 applications on my react front end - one to manage login. second one to call auth0 protected backend API on express.

In this scenario you only need a SPA and API registered in Auth0 - Your react application should be configured to the SPA app credentials. No other app is required that differentiates between login and calling an API. Your React app should include the access token in the Authorization header of the API call you make.

Have you had a chance to look at the React sample app in full? There’s actually an example external API which could be helpful to see in action.