What's the recommended command, library or tool for making API calls within react-router?

[binarykitchen]

Hello all,

In short, I'm stuck with HTTP 302 redirects being ignored for unauthenticated users. In my case, I expect a redirect happening back to the login page within react-router.

Sounds like a basic question.

Yet, here is the longer version: when you pick Axios for example, fetch the user resource unauthenticated, it grabs the new location within the HTTP 302 header right-away and does another API call without my will (this within the react-route loader).

Axios shouldn't make a subsequent call. The new location should be passed over to react-router to change the page, in my example, back to the login page.

This makes me question Axios, whether it's suitable for react-router. I've researched, read the documentation, there is no mention of this use case. To me, it feels like Axios is too bloated and shouldn't do subsequent API calls automatically. Should I go back to the native fetch?

How do you handle 302 redirects for unauthenticated users in react-router based apps? Is Axios still recommended?

Just starting a discussion. Thanks for all your inputs :)

[GabenGar]

Do you perform these API calls in client or server loader?
Not to mention 302 is a wrong status for API to return for auth-dependent requests.

[binarykitchen]

API calls are from the client side, within React effects, for example.

Yes, I realised 302 was wrong. Express.js default redirect() function uses 302 which was misleading. Had to add 401 manually to make it work.

[GabenGar]

It's not misleading, it does exactly what it says. The problem is in API design.
In general APIs do not have to be "forgiving" or assume anything about the client. It should return the error directly with a 4xx status code, which is up to the client what to do about it, like show, rerender or perform some sort of redirect.
API specifically should only redirect to output-compatible endpoints, i.e. if you have an endpoint in v1 version, the inputs for which can be reconstructed for a v2 endpoint inputs. Only then you can redirect, which is to say redirects are of pretty niche use in API context.
Redirecting to a login/error status page is something server-rendered pages do.

[binarykitchen]

True, that's what I've just learnt all over again. Thanks for clarifying @GabenGar

Redirecting to a login/error status page is something server-rendered pages do.

Status pages yep (e.g. nginx), but login page, on server side, would be too messy when it's already an SPA. Will do the session authentication server-side and just return a 401 back to a react-route loader. Just haven't figured out yet how to redirect from a loader to the login page ...

I'll go figure it out … if you know a good example, I'd like to check it out.

... trying to implement full user authentication for https://www.videomail.io, which is quite a fun challenge. Thanks again.

[GabenGar]

Loaders can return redirect/replace responses. In your specific case you can just handle your auth stuff in a client loader and straight up throw actual errors and filter for them in the nearest error boundary, no need to bother with statuses and deserialization of server errors.

[binarykitchen]

Yep, I've just realised that myself last week, and it only works for non-302 redirects as these are handled automatically. E.g. works for 401 redirects for example.