OAuth2 Provider Callbacks Do Not Preserve Custom Query Parameters

[aryanjangid]

Environment

  System:
    OS: macOS 14.5
    CPU: (11) arm64 Apple M3 Pro
    Memory: 105.05 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 9.6.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 127.1.68.137
    Chrome: 127.0.6533.100
    Safari: 17.5
  npmPackages:
    next: ^14.1.3 => 14.1.3 
    next-auth: ^4.24.5 => 4.24.5 
    react: 18.2.0 => 18.2.0 

Reproduction URL

https://github.com/dr15/auth-callback

Describe the issue

When initiating the OAuth2 authentication process with a callbackUrl that includes custom query parameters, these parameters are not included in the callbackUrl after the authentication process completes. This behavior is observed when using OAuth2 providers like Google with NextAuth.js.

For example, if the callbackUrl is set to http://localhost:3000/authorize?org_id=123&redirect_uri=http://localhost:3001/ before initiating the OAuth2 authentication process, the user is redirected to http://localhost:3000/authorize after the authentication process, with the org_id and redirect_uri parameters removed.
This issue does not occur when using the Credentials provider. The custom query parameters in the callbackUrl are preserved after the authentication process.

This behavior makes it difficult to maintain application state across the authentication process when using OAuth2 providers. The application state has to be stored in a separate server-side session or a database, which adds complexity to the application.

It would be beneficial if NextAuth.js could preserve the custom query parameters in the callbackUrl across the authentication process when using OAuth2 providers. This would allow developers to maintain application state more easily and make the library more flexible to use.

How to reproduce

Steps to Reproduce:

1. Set up a NextAuth.js application with Google as an OAuth2 provider.

import GoogleProvider from "next-auth/providers/google";
export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    redirect: async ({ url, baseUrl }) => {
      // Attempt to preserve custom query parameters
      if (url.startsWith("/")) {
        return `${baseUrl}${url}`;
      }
      return url;
    },
  },
  // ... other options ...
});

2. Initiate the sign-in process with a callbackUrl that includes custom query parameters.

import { signIn } from "next-auth/client";
const handleOAuth = async () => {
  const callbackUrl = "http://localhost:3000/authorize?org_id=123&redirect_uri=http://localhost:3001/";
  await signIn("google", { callbackUrl });
};

3. Complete the Google authentication process

Expected behavior

After the authentication process, the user should be redirected to the callbackUrl with the custom query parameters preserved, e.g., http://localhost:3000/authorize?org_id=123&redirect_uri=http://localhost:3001/.
Actual Behavior:
The user is redirected to the callbackUrl, but the custom query parameters are removed, e.g., http://localhost:3000/authorize.

[balazsorban44]

You can add addition authorization params via the third argument

https://authjs.dev/reference/nextjs#signin-2

or adding them to the provider itself

https://authjs.dev/guides/configuring-oauth-providers