Add another redirect mode for AJAX request

[EdouardPauw]

Hello,
I'm trying to build a front in SPA mode and connect it with an already build oidc server.
When an interaction starts, a form is displayed to the user. I POST the request with an AJAX call in order to be able to make a Client side redirection. The issue is that the response resolve with a cors error. I have added the Access-Control-Allow-Origin and everything else but the final redirection is blocked.
From what I understand it is because the response is sent with the res.redirect function.

Do you think it is possible to add another way to deliver the redirect url to the front end for AJAX calls ? Or is done like this for a specific reason ? Finally have I a way to use SPA front or is it not recommended ?

Thank you

[panva]

Please see the docs for provider.interactionResult

[EdouardPauw]

Omg I can't believe I missed that !

Thank you !!

[EdouardPauw]

Hello @panva,

Even using provider.interactionResult I still have the same issue :

• I make a POST to /interaction
• The server handle the request and respond with the URL (using provider.interactionResult)
• Front side I receive the url (/auth/...), I make call GET request on the URL
• Then I still have a redirect performed and a cors error.

Am I missing something ?

[panva]

You're supposed to redirect to /auth/..., there is no other mode of operation (and will not be).

[EdouardPauw]

Ok so if I understand well I must do a full redirect and using SPA is pointless because I can not benefit of front side redirect.

Thank you

[wzrdtales]

No it is possible,

you have to do this

   const oidc = new Provider(ISSUER, { ...configuration });
    
   oidc.use(async (ctx, next) => {
    await next();
    const res = ctx.response;
    const location = res.header?.location;
    if (res.status === 303 && !location?.startsWith(ISSUER) && location?.[0] !== '/') {
      if (ctx.oidc.route === 'resume' || ctx.oidc.route === 'authorization') {
        res.status = 200;
        ctx.body = { code: 303, uri: res.header.location };
        delete res.header.location;
      }
    }
  });

And in the frontend you need to first redirect with the content from that json and then receive the request as is and then do a subsequent XHR with the same query params to the server.

Additionally, you need to manipulate the discovery doc

    if (ctx.oidc?.route === 'discovery') {
      ctx.body.authorization_endpoint = '/your/frontend/auth/route/that/will/process/the/redirect/and/pass/it/along/to/the/backend'
    }

I already suggested once to support the x-requested-with header, since that isn't in the interest of the maintainer this is your only way.

Also note: you wont be able to use response_mode=post if you serve the frontend spa only over an nginx or a cdn. For that you will need a backend that can process the post payload which you wont have access to in a frontend. response_mode=query the default will work absolutely fine.