Document vs Fetch redirect in middleware

[jezikk]

Hi all,

I know that this question is not valid for this repo, but I'll try my luck.

I build auth middleware using my own openID solution. If there is no session, a redirection is made to the IDP for login.

    tokens = getTokensFromSession(session);

    if (!tokens) {
      const url = await getAuthorizationUrl(c, session, options);
      return c.redirect(url);
    }

Is it possible to redirect always from document and not using fetch from Hono middleware? It is works ok for initial load of course.

[rphlmr]

Hi! I think you’re facing the Single Fetch issue with React Router :(
I would suggest to try reactRouterRedirect instead of hono c.redirect

[jezikk]

The problem is that it doesn't work for initial load. :)

[["SingleFetchRedirect",1],{"_2":3,"_4":5,"_6":7,"_8":9,"_10":7},"redirect","http://localhost:8080/realms/hektor/protocol/openid-connect/auth?redirect_uri=http%3A%2F%2Flocalhost%3A5174%2Fauth%2Fcallback&scope=openid&code_challenge=kGuEPX4tuNjGJ4PS9dY1VIarnKWOiHFplLv7AlRXczM&code_challenge_method=S256&client_id=organizer-dashboard&response_type=code","status",302,"revalidate",false,"reload",true,"replace"]

[rphlmr]

Arg, this is really not a good developer experience.
Maybe we could check the the request path.

  if (!tokens) {
    const url = await getAuthorizationUrl(c, session, options);
    
   if (c.req.path.includes(".data")) {
      return reactRouterRedirect(url);
    } else {
      return c.redirect(url);
    }
  }

The idea is to send back what a .data fetch expects (Single fetch) or use a normal redirect.

It should not happen in production mode, but it should not happen at all. In dev mode, Vite is loading the route even if the browser has started a redirect :/

Thanks for your feedback 🙏

[jezikk]

Yes with these helper functions it is ok:

function redirect(c: Context, url: string) {
  if (c.req.path.includes(".data")) {
    return reactRouterRedirect(url);
  }

  return c.redirect(url);
}

function getPath(c: Context) {
  return c.req.path.replace(".data", "");
}

I dont know, maybe it should be integrated into reactRouterRedirect.

[rphlmr]

Thanks! I will try to update it in the next release 🙏

[rphlmr]

Should “getPath” be included too?

[jezikk]

I think so.