Next.js - 400 Error: "Callback handler failed. CAUSE: Missing state parameter in Authorization Response"

Problem statement

With the Next.js SDK, a 400 error occurs on the callback with the following error description:

Callback handler failed. CAUSE: Missing state parameter in Authorization Response”.

This error only occurs on login attempts with the application deployed and does not occur locally.

Troubleshooting

  1. Confirm that the error does not occur locally.
  2. In the network requests, check to see that the /api/auth/callback request does include a “state” parameter.

Cause

Missing state parameter in Authorization Response means that the Next.js SDK cannot find any query parameters on the callback request.

Solution

If the browser has the state parameter in the query string of the callback (/api/auth/callback?state=xxxx), then there is likely some middleware between the application and the browser that is stripping these parameters off. The recommendation is to review any deployment configurations that may be causing the parameters to be removed.