Feature request: sign in providers to new popup window

[emulienfou]

Goals

1. Allow user to sign in to a defined provider on a new popup window
2. Allow user to use the redirect option for all kind of providers, including oauth (current available for emails|credentials)
3. Feature should allow the user add code to receive popup window message from window event listener

Background

It seems the feature as been requested from a long time now. Either in the discussions (#9410, #2880, #8267, #8891) or issues (#178, #8030).

Proposal

NextAuth v5 should provide this kind of feature for the end user.
It should provide to the user ability to choose between a single redirect (default behavior), without redirect (currently available for emails/credentials only) but also in a new window popup.

Here is a working example on how this feature could be implemented (currently working with v4.2.1):

Example is based on this code: https://dev.to/dinkydani21/how-we-use-a-popup-for-google-and-outlook-oauth-oci

Step 1: Override signIn function and types

Override SignInOptions type adding new openInNewWindow option:

export interface SignInOptions extends Record<string, unknown> {
  /**
   * Specify to which URL the user will be redirected after signing in. Defaults to the page URL the sign-in is initiated from.
   *
   * [Documentation](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl)
   */
  callbackUrl?: string;
  /** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option) */
  redirect?: boolean;
  /** Open the signin page in a new tab or window. Defaults to `false` */
  openInNewWindow?: boolean;
}

We will be able to override the signIn function and open the new popup window:

/**
 * Client-side method to initiate a signin flow
 * or send the user to the signin page listing all possible providers.
 * Automatically adds the CSRF token to the request.
 *
 * [Documentation](https://next-auth.js.org/getting-started/client#signin)
 */
export async function signIn<
  P extends RedirectableProviderType | undefined = undefined
>(
  provider?: LiteralUnion<BuiltInProviderType>,
  options?: SignInOptions,
  authorizationParams?: SignInAuthorisationParams
): Promise<
  P extends RedirectableProviderType ? SignInResponse | undefined : undefined
> {
  const {
    callbackUrl = window.location.href,
    redirect = true,
    openInNewWindow = false,
  } = options ?? {}

  const baseUrl = apiBaseUrl(__NEXTAUTH)
  const providers = await getProviders()

  if (!providers) {
    window.location.href = `${baseUrl}/error`
    return
  }

  if (!provider || !(provider in providers)) {
    window.location.href = `${baseUrl}/signin?${new URLSearchParams({
      callbackUrl,
    })}`
    return
  }

  const isCredentials = providers[provider].type === "credentials"
  const isEmail = providers[provider].type === "email"
  const isSupportingReturn = isCredentials || isEmail

  const signInUrl = `${baseUrl}/${
    isCredentials ? "callback" : "signin"
  }/${provider}`

  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`

  const res = await fetch(_signInUrl, {
    method: "post",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    // @ts-expect-error
    body: new URLSearchParams({
      ...options,
      csrfToken: await getCsrfToken(),
      callbackUrl,
      json: true,
    }),
  })

  const data = await res.json()

  if (redirect/* || !isSupportingReturn*/) {
    const url = data.url ?? callbackUrl
    window.location.href = url
    // If url contains a hash, the browser does not reload the page. We reload manually
    if (url.includes("#")) window.location.reload()
    return
  }

  if (openInNewWindow) {
    openSignInWindow(data.url, "auth", baseUrl)
    return
  }

  const error = new URL(data.url).searchParams.get("error")

//  if (res.ok) {
//    await __NEXTAUTH._getSession({ event: "storage" })
//  }

  return {
    error,
    status: res.status,
    ok: res.ok,
    url: error ? null : data.url,
  } as any
}

Step 2: Add open popup capability

// Redirect user to home page after success login
const receiveMessage = (event: MessageEvent) => {
  (event.target as Window).location.href = "/";
};

let windowObjectReference: Window | null = null;
let previousUrl: string | null = null;
export const openSignInWindow = (url: string, name: string, baseURL: string, messageReceiver?: (event: MessageEvent, baseURL: string) => void): void => {
  // window features
  const strWindowFeatures = "toolbar=no, menubar=no, width=600, height=700, top=100, left=100";

  if (null === windowObjectReference || windowObjectReference.closed) {
    /* if the pointer to the window object in memory does not exist
     or if such pointer exists but the window was closed */
    windowObjectReference = window.open(url, name, strWindowFeatures);
  } else if (previousUrl !== url) {
    /* if the resource to load is different,
     then we load it in the already opened secondary window and then
     we bring such window back on top/in front of its parent window. */
    windowObjectReference = window.open(url, name, strWindowFeatures);
    windowObjectReference?.focus();
  } else {
    /* else the window reference must exist and the window
     is not closed; therefore, we can bring it back on top of any other
     window with the focus() method. There would be no need to re-create
     the window or to reload the referenced resource. */
    windowObjectReference.focus();
  }
  // add the listener for receiving a message from the popup
  window.addEventListener("message", receiveMessage, false);
  // assign the previous URL
  previousUrl = url;
};

Step 3: Handle callback

Since user has been redirected to home page after callback sign in, we need to handle the post message and close the popup. You can set this part of code in index.tsx file:

useEffect(() => {
    // get the URL parameters which will include the auth token
    const params = window.location.search;
    if (window.opener) {
      // send them to the opening window
      window.opener.postMessage(params);
      // close the popup
      window.close();
    }
  });

Step 4: Use it

await signIn("google", { callbackUrl: process.env.NEXTAUTH_URL, redirect: false, openInNewWindow: true });

[Lahirutech]

this is very much needed

[ctwhome]

Since I first saw this capability with Firebase Auth many years ago, I believed it was the way to go for the best user experience. It prevents context change and loss of app state.