[SOLVED] Google One Tap - "The given origin is not allowed for the given client ID" on Azure App Service w/custom domain

Google One Tap - "The given origin is not allowed for the given client ID" on Azure App Service w/custom domain

I'm struggling to resolve an issue with the Google Sign In (GSI) library, where it refuses to allow users in a non-testing environment to proceed after clicking on "Sign In with Google". This works locally, and I have localhost/variations of localhost with a port added to Authorized JavaScript origins. I have also added my user-facing URLs to Authorized JavaScript origins, and yet Google does not seem to recognize the referring domain when it goes to accounts.google.com/gsi.

I've tried to debug the webpage locally to figure out what it thinks the given origin is. I've found references to a client_origin property within Google's gsi minified code, but I haven't been able to get anywhere when the value actually gets evaluated.

What I've tried:

Recreating the OAuth2 client ID from scratch
Clearing cookies/cache data from my browser
Using another browser
Creating a brand new Google Cloud Platform project

Other context:

I'm running a Next.js app on Azure App Services
It's hosted on a custom domain, although it doesn't appear to work with the provided Azure domain either
This works locally

Code:

import { Fragment, MutableRefObject, useEffect, useRef } from "react";
import getPublicRuntimeConfig from "lib/utils/get_public_runtime_config";
import Head from "next/head";
import Script from "next/script";

const { publicRuntimeConfig } = getPublicRuntimeConfig();

function handleGsiScriptLoad({
  context = "signin",
  signonButtonRef
}: {
  context?: string;
  signonButtonRef: MutableRefObject<HTMLDivElement>;
}) {
  google.accounts.id.initialize({
    client_id: publicRuntimeConfig.GOOGLE_SSO_CLIENT_ID,
    context,
    login_uri: publicRuntimeConfig.GAUTH_ENDPOINT,
    // Necessary for the cookie to be accessible on the backend (subdomain)
    state_cookie_domain: new URL(publicRuntimeConfig.MENTRA_PLATFORM_URL).host,
    ux_mode: "redirect"
  });
  google.accounts.id.renderButton(signonButtonRef.current, {
    size: "large",
    text: context === "signup" ? "signup_with" : "signin_with",
    theme: "outline"
  });
}

interface Props {
  context?: "signup" | "signin";
}

const GoogleSignon = (props: Props) => {
  const signonButtonRef = useRef<HTMLDivElement>();
  useEffect(() => {
    handleGsiScriptLoad({ context: props.context, signonButtonRef });
  }, [props.context]);
  return (
    <Fragment>
      <Head>
        {/* Necessary to set the correct origin URL from Azure */}
        <meta name="referrer" content="no-referrer-when-downgrade" />
      </Head>
      <Script
        onLoad={handleGsiScriptLoad}
        src="https://accounts.google.com/gsi/client"
        strategy="beforeInteractive"
      />
      <div ref={signonButtonRef} />
    </Fragment>
  );
};

export default GoogleSignon;

Have I missed some step that prevents Google Sign In from recognizing my domain? Is there some nuance/weirdness with Azure App Service that just isn't documented anywhere?

Solution

I figured it out - I needed to provide the login_uri as an Authorized Origin as well, even though it's not actually originating from that URL. This is not documented anywhere, but it was the only difference between my local and production environment. Google signin works as expected now!