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

[tim4497]

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:

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:

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/

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

[tim4497]

We decided to go with API and SPA Configuration (SPAs + API)