Support passing custom searchParams to custom sign-in page

[peguerosdc]

Goals

As a user of auth.js, I would like to customize the behavior of my custom sign-in page via next-auth/react

Non-Goals

No response

Background

I created a custom sign-in page for my users because depending on the flow, I might want them to see something different for UX-purposes. More specifically, in my case users can have different roles and depending on how they want to log in, the sign-in page would do something specific (show a different cover image, set a role cookie, etc).

To let users get to this page, I set up auth.js with:

import NextAuth from "next-auth";

NextAuth({
    pages: { signIn: "/auth/my-signin-page" }
})

And I have a "sign-in button" that calls next-auth/react 's signIn like signIn(undefined, { redirectTo: "/my-page" }) so users are redirected to my custom sign-in page.

This button is in different parts of my product's flow and I would like that calling signIn would allow me to pass information like "the user is coming from X, so the sign in page should behave like Y".

Today I can do it by not using next-auth to redirect users to my custom sign-in page, but then I would need to replicate and maintain the logic of the signIn function myself.

Proposal

I think this can be implemented without major changes if signIn allowed for custom searchParams that are then added to the URL when redirecting to the sign in page, so we can parse those params and act accordingly. Something like this:

import { signIn } from "next-auth/react";

signIn(undefined, {
  redirectTo: "/my-page",
  searchParams: { myKey: "value" }
})

So, users are then redirected to /auth/my-signin-page?callbackUrl=/my-page&myKey=value and I can retrieve myKey.