# Login on a React SPA via ExpressJS backend (express-openid-connect)

**URL:** <https://community.auth0.com/t/login-on-a-react-spa-via-expressjs-backend-express-openid-connect/130710>\
**Category:** Get Help\
**Tags:** configuration, application\
**Created:** [March 28, 2024, 12:47pm UTC](https://community.auth0.com/t/login-on-a-react-spa-via-expressjs-backend-express-openid-connect/130710 "2024-03-28T12:47:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tim4497](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/tim4497/32/54701_2.png) [@tim4497](https://community.auth0.com/u/tim4497)\
**Post date:** [March 28, 2024, 12:47pm UTC](https://community.auth0.com/t/login-on-a-react-spa-via-expressjs-backend-express-openid-connect/130710/1 "2024-03-28T12:47:25Z")

</div>

Hey, I try to implement a backend driven Auth0 authorization for my react app. The backend is written in expressJS and functions as an API but also the “auth handler”. I want to utilize the `express-openid-connect` package.

This is my imagined login flow:

 ![mermaid-diagram-2024-03-28-133836](https://global.discourse-cdn.com/auth0/original/3X/1/f/1ff1fe22d83d7768edace1b7cd74d376ecfcdf39.png)

Is this possible or did I misunderstand the use case of the express package.

I’m porting from KeyCloak and in that case it was handled similar, the frontend got the access\_token and sending it with each api call subsequently to verify itself.

Here is some code to clarify my approach!

Frontend React:

```auto
export const loginDev = ( relayState = null ) => ( dispatch, getState ) => {

  const loginURL = new URL( "/api/auth/login", window.location.origin );

  window.location.href = loginURL.href;

  // send relayState here already?
};

```

express route baseURL/api/auth/

```auto
const authRouter = express.Router();

const configAuth0 = {
  authRequired : false,
  auth0Logout : true,
  secret : config.auth0.secret,
  baseURL : config.auth0.baseURL,
  clientID : config.auth0.clientID,
  issuerBaseURL : config.auth0.issuerBaseURL,
  clientSecret : config.auth0.clientSecret,
  authorizationParams : {
    response_type : "code",
    scope : "openid profile email",
  },
  routes : {
    login : false,
  }
};

authRouter.use( auth( configAuth0 ) );

authRouter.use( bodyParser.urlencoded( { extended: true } ) );
authRouter.use( bodyParser.json() );

authRouter.get( "/login", ( req, res ) =>
  res.oidc.login( {
    returnTo : "http://localhost:3000/",
    authorizationParams : {
    redirect_uri : "http://localhost:3000/api/auth/callback",
  },
} );

```

the frontend and backend run on the same URL, but are two standalone projects in each in their own Pod.

In Auth0 I configured: `Token Endpoint Auth Method: "none"`

My current problem is that the User/Browser is redirected to `http://localhost:3000/api/auth/callback?code=xxx&state=xxx`  
with `BadRequestError: access_denied (Unauthorized)`

And I’m lost on how to redirect the frontend back to the mainpage or relayState page, with a valid session token.

Help with the redirection and the session implementation would be appreciated.

Best regard,  
Tim

---

<div class="post-metadata">

**Author:** ![tim4497](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/tim4497/32/54701_2.png) [@tim4497](https://community.auth0.com/u/tim4497)\
**Post date:** [April 3, 2024, 11:40am UTC](https://community.auth0.com/t/login-on-a-react-spa-via-expressjs-backend-express-openid-connect/130710/2 "2024-04-03T11:40:03Z")

</div>

We decided to go with [API and SPA Configuration (SPAs + API)](https://auth0.com/docs/get-started/architecture-scenarios/spa-api)

---

<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:** [April 17, 2024, 11:41am UTC](https://community.auth0.com/t/login-on-a-react-spa-via-expressjs-backend-express-openid-connect/130710/3 "2024-04-17T11:41:01Z")

</div>

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