How to redirect abc.vercel.app/login to abc.vercel.app/ after refresh

[adamowiczpawel (pawel)]

Hello,

I am facing an issue with a 404: NOT_FOUND error in my app deployed to Vercel (everything works fine locally). My app is a React/Node.js application, and I use a frontend router to handle page navigation.

Here is a simplified version of my routing code:

<Router>
  <Routes>
    <Route element={<ProtectedRoute />}>
      <Route path="*" element={<AppPage />} />
    </Route>
    <Route path="/login" element={<LoginPage />} />
  </Routes>
</Router>

In the app, when the user doesn’t have valid credentials, they are redirected to the /login page where they can enter their username and password.

Everything works fine in the browser when navigating to abc.vercel.app. If the user has the correct credentials, they are directed to abc.vercel.app/, and they see the <AppPage /> component. If not, they are redirected to abc.vercel.app/login where the <LoginPage /> is displayed.

However, the issue arises when I manually type abc.vercel.app/login into the browser or refresh the page while already on the login page (abc.vercel.app/login). In this case, I receive a 404: NOT_FOUND error from Vercel.

What I have tried so far:

Backend Redirection:
I tried setting up redirects in my backend using Express, but it didn’t solve the issue.

app.get("/login", (req, res) => {
  res.redirect("/");  // Redirect GET requests from /login to the root ("/")
});

app.post("/login", (req, res) => {
  res.redirect("/");  // Redirect POST requests from /login to the root ("/")
});

Vercel Redirects:
I also added the following rewrite rule in my vercel.json, but this didn’t work either

"rewrites": [
  {
    "source": "/login",
    "destination": "/"    <- also with /index.html etc 
  }
]

I’m unsure where the problem lies. I would appreciate any suggestions or guidance on how to resolve this issue. Thank you!

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

If you’re having trouble deploying an Express app, this guide can help.

How to Deploy an Express.js Application to Vercel

You can also ask v0 for suggestions tailored to your own project setup.

[adamowiczpawel (pawel)]

Sorry for the confusion, the rewrites in vercel.json file works, but it needs to be added to the frontend, not the backend (where I mistakenly added it). You can close/delete the topic.

[amyegan]

Thanks for sharing the solution!