Search code examples
javascriptaxiosnext.js

Next.js redirect from an API route

I am building a back-office app that requires users to sign in. I have 2 external APIs:

  • API A : to manage user accounts and sessions
  • API B : to perform CRUD actions on another database (unrelated to users database)

The problem is that I don't want users to be able to perform calls to API B if their session is not valid. So I added some API endpoints in Next (under pages/api) that do the following actions:

  1. verifying the validity of the session against API A
  2. if session is valid: continue to step 3, if not: redirect to page /login
  3. make the call to API B

Everything works fine if the session is valid but it fails if the session is not valid.

I have tried

res.redirect(307, '/login').end()

and

res.writeHead(307, { Location: '/login' }).end()

but it didn't work. It fails even by specifying the whole path (http://localhost:3000/login). What I don't understand is that I am successfully redirected to my /login page if I make the request directly from the browser (GET http://localhost:3000/api/data). It doesn't work when I make the request with Axios inside a React component.

Any idea how I can fix this?

Solution

  • As @juliomalves and @yqlim explained, I had to make the redirect manually based on the response of the API.