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

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

Enhance TinyMCE functionality to permit text as a primary element within <table> or <tr> tags

Is it possible to automatically access the most recent Beta build through package.json and npm?

What is the method to escape from a for loop in Protractor?

JavaScript Class Reference Error

Angular 6 canvas resizing causing inaccurate data to be retrieved by click listener

Tips on generating an HTML element using JavaScript and storing it in a MySQL database

VueJS refreshes components while preserving previous data

Angular displaying undefined for service

Can you provide tips on how to center the title on the page?

Updating pages dynamically using AJAX

When Controller Scope Goes Missing in ng-repeat

Flask caches JSON files automatically

Unsuccessful CORS on whateverorigin.org with YQL

Unable to retrieve an image from various sources

Incorporate the Yammer share button into a Next.js application

Executing a component's function from a JavaScript file

What steps can I take to rearrange my return statement within an asynchronous function?

The method for retrieving values and $id from a $firebaseArray using angularJS

Trouble arises with MySQL query in PHP/jQuery setup