Redirecting in Next.js from an API route

Question

Redirecting in Next.js from an API route

I am in the process of developing a backend application that necessitates user authentication. Within this project, I'm utilizing 2 external APIs:

API A: responsible for managing user accounts and sessions
API B: utilized for executing CRUD operations on a separate database unrelated to the users' database

An issue arises when I want to prevent unauthorized calls to API B when a user's session is invalid. To address this, I created specific API endpoints in Next (located under pages/api) designed to execute the following tasks:

Verify the session's validity against API A
If the session is deemed valid, proceed to step 3; if not, redirect the user to the /login page
Execute the necessary call to API B

The functionality works correctly when the session remains valid, but it encounters failure when the session is invalid.

I attempted using

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

and

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

Unfortunately, neither solution proved successful. Even explicitly specifying the entire path (http://localhost:3000/login) failed to resolve the issue. Strangely enough, I can achieve successful redirection to the /login page by directly accessing the URL via a browser (GET http://localhost:3000/api/data). The problem only seems to arise when making requests through Axios within a React component.

Any suggestions on how I can rectify this situation?

javascript axios next.js

Answer 1

Answer №1

After receiving guidance from @juliomalves and @yqlim, I successfully implemented a manual redirect using the API's response.

Answer 2

After receiving guidance from @juliomalves and @yqlim, I successfully implemented a manual redirect using the API's response.

Answer 3

Answer №2

Instead of using .end(), have you considered utilizing res.redirect(307, '/login')?

In my experience with Next.js versions 12 and 13, the following code snippet has worked effectively.


// /api/example.js

const handler = async function (req, res) {
  // custom logic
  if (failed)
    return res.redirect(307, '/login')
}

export default handler;

Answer 4

Instead of using .end(), have you considered utilizing res.redirect(307, '/login')?

In my experience with Next.js versions 12 and 13, the following code snippet has worked effectively.


// /api/example.js

const handler = async function (req, res) {
  // custom logic
  if (failed)
    return res.redirect(307, '/login')
}

export default handler;

Answer 5

Answer №3

Encountered a similar issue and was able to resolve it using the code snippet below:

API

res.status(200).json({ success: "success" }) // Add this line at the end of the API to send a 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')
}

The solution is correct as mentioned by @Jules Grenier, but I have provided an additional example for clarification.

Answer 6

Encountered a similar issue and was able to resolve it using the code snippet below:

API

res.status(200).json({ success: "success" }) // Add this line at the end of the API to send a 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')
}

The solution is correct as mentioned by @Jules Grenier, but I have provided an additional example for clarification.

Answer 7

Answer №4

To start the API request, a <form> must be used.

<fetch> cannot handle redirects.

Answer 8

To start the API request, a <form> must be used.

<fetch> cannot handle redirects.

Answer 9

Answer №5

One simple way to make this happen is by employing NextResponse.redirect. Take a look at the following example for reference.

return NextResponse.redirect(process.env.NEXT_PUBLIC_APP_URL + "/login", { status: 307 });

Answer 10

One simple way to make this happen is by employing NextResponse.redirect. Take a look at the following example for reference.

return NextResponse.redirect(process.env.NEXT_PUBLIC_APP_URL + "/login", { status: 307 });

Redirecting in Next.js from an API route

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Arranging icons at the bottom of the post with a text box that changes dynamically

Error: The middleware function is not recognized | Guide to Transitioning to React Redux Firebase v3

Tips for bypassing an argument using the POST method in NodeJS

Using Node.js to Send Emails via API

Is it possible to decrease the size of a div by scrolling both vertically and horizontally?

Ways to incorporate sass:math into your vue.config.js file

There was an issue when trying to process the Javascript data structure with JSON.parse

Tips for sending the setState function to a different function and utilizing it to identify values in a material-ui select and manage the "value is undefined" issue

I continue to encounter the error "Unexpected token b in JSON at position 0" when attempting to parse JSON data

What is the best way to create a universal variable that can be accessed across all routes in an Express/

Tips on hovering over information retrieved from JSON data

Monitoring a specific property within an array of objects with AngularJS

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

The trio of Javascript, Ajax, and FormData are

Leveraging the power of NextJS: Context API for seamless storage and transmission of

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Struggling with making changes to a instantiated "this" object within a pseudo javascript class

Can we set a specific length for an array passed in as a prop?

VueJS Array Index causing unexpected output

"Create a React button component that, when clicked, navig