/authorized?code complains 404 Not Found

[sharkdeng]

I was previously using http://localhost:3000/authorized as the redirect_uri and it works fine.

Then I tried to ship the frontend ReactJs code to the VPS server and changed the redirect_uri to https://cowpte.com/authorized, but when login successfully, it did go back to https://cowpte.com/authorized?code=Lu5khRyTqn7SsXFipGKUB0YqQgqbuG03ldBJiajVyLrCL4PqxaVVe5XO-IFgbdqrATiLdWpal1kfDrYvX9tBzD9O4ZMz2gXRvS5OACjnO0XdHEGghc2HV883nkyA-YzN (code is for others, just demonstration here) and complain 404 Not Found.

I found similiar case is After redirect back from auth provider with ?code, no token request is made written on the https://www.npmjs.com/package/react-oauth2-code-pkce

The full description is here:
If you are using libraries that intercept any fetch()-requests made. For example @tanstack/react-query. That can cause issues for the AuthProviders token fetching. This can be solved by not wrapping the in any such library.
This could also happen if some routes in your app are not wrapped by the .

I didn't use third party that interface because localhost:3000 is totally fine.
I tried to include /authorized path in the route as well, but it still doesn't work.

I wonder how to solve this? Thank you!

[soofstad]

Hi,
There is some missing information here, but it seems like your identity provider is not correctly configured.
It would help if you posted the request that get 404, and your authConfig.
However, I'm pretty sure that the "tokenURL" in your config is pointing to an address that does not exist on the server.

[sebastianvitterso]

Hey, @sharkdeng!

I tried your auth endpoint (https://cowpte.com/authorized), and as @soofstad says, it doesn't exist. You mention that you tried to add the route to the React app, but the 404 is returned from Apache (probably the web server you're using), as can be seen in the network request screenshot below:

I'd assume the web server is configured for a single page application only working on the root of the domain, and that you need to configure it differently for all other routes to work as well.

I don't have a running Apache server to test on, but maybe this will help: https://webmasters.stackexchange.com/a/107187 .

And yeah, the hash-router would solve the initial problem, but as you say, it might cause some issues with the code. The query segment of a URL needs to come before the hash segment, so by adding a hash router (with /#/ as you mention), the query parameter can not come after it (source: https://stackoverflow.com/a/55339184/11192976). So I would look into the web server you're using!

[sharkdeng]

Hi, @sebastianvitterso, yes I am using Apache. So you recommend me to add /authorized path and the corresponding component doesn't matter.
I am trying SSR recently. This is the sample project I'm working on. https://github.com/tutehub/sample-reactjs/tree/develop/test-webpack-react
Now I can use webpack to bundle JavaScript, TypeScript, React JavaScript (Client) and still trying on ReactDOMServer.renderToPipeableStream. Once the experiment is successful, I will update here.

[sebastianvitterso]

Since you're talking about SSR, I assume you're just using Apache as a reverse proxy or something? I would set up the routes so that all routes are forwarded to the node server (Nextjs or whichever library you use). Looking at the linked project, it just looks like you're serving static html with a node server, and I don't really see the purpose of that, compared to just serving it with the Apache server.

SSR isn't as much about serving static content, as it is about running the javascript on the server, and doing some framework logic there before sending the response to the user. This allows the user to see a fully rendered page from the get-go, but means the request might take a few more milliseconds to go through.

If you really want to do server-side rendering with React, I would recommend using Nextjs. It's built for it!

We also have a guide for using our library with Nextjs.

[sharkdeng]

I'm using a VPS server with CentOS 7, and the frontend is created using npx create-react-app --template typescript.

To deploy the frontend to the VPS, I run npm run build and place the static HTML files in the /public_html/ directory on the VPS. But /authorized is not found. The path indeed does not exist. I've attempted several solutions:

1. Adding a route, but BrowserRoute does not allow direct URL access.
2. HashRoute brings ugly path
3. Adding /public_html/authorized.html, but it only points to https://cowpte.com/authorized.html.
4. Apache redirect doesn't seem correct.

You're correct; serving static HTML with a Node server doesn't make sense. The linked project is an experiment, as I'm still in the process of understanding SSR.

Let me try Next.js.

[sebastianvitterso]

Yeah, I think nextjs might be the best bet for SSR.

---

Just as an FYI, create-react-app has been deprecated by Meta, and they recommend using Next.js innstead. Personally, for projects where I want the single-page application functionality (everything in one bundle), I recommend using Vite, as that is the new way to go (and it's so much faster than webpack).

[sharkdeng]

Hi @soofstad @sebastianvitterso

I've updated the Next.js version and successfully included the route /authorized. The GitHub repository is https://github.com/tutehub/sample-reactjs/tree/develop/test-app. However, it's still stuck at /authorized?code= and only displays the page content.

Kind regards,
Limin

[sebastianvitterso]

Hey! I see your /authorized page only includes:

export default function Authorized() {
  return <div>authorized</div>
}

Note that the route needs to include the library somehow, preferrably by wrapping everything in the AuthContext. I'd recommend adding the context to the layout file, right inside the <body>-tag. I think that will do the trick.

I'm not super-familiar with next.js myself, so I don't know where the App.tsx-file is rendered, and what its relationship with the authorized.tsx-file is. Feel free to enlighten me if this doesn't work.

[sharkdeng]

Thanks! Will try this approach!

[sebastianvitterso]

How did it go? 😄