Next.js redirect from an API route

user_13338629 0
Viewed 5114

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?

axios next.js javascript
2 Answers

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

user_133386290

Faced same problem solve using below code:

Api

res.status(200).json({ success: "success" }) //add at last of the api to give response

page

import Router from 'next/router'
    
let res = await fetch('api', {
        method: 'POST', // or 'PUT'
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
if (res.status == 200) {
   Router.push('/location')
}

Answer is correct as @Jules Grenier sayes,but provided an example

user_169210410
Related