Invalid API Key when using with gcp-iap-web-toolkit and nextjs

[aaron-tillekeratne]

Hi FirebaseUI team,

Issue

I'm currently attempting to integrate cloud IAP external Identities with the login page using firebase UI. However it's currently resulting in a runtime error which is "Error: Invalid project configuration: API key is invalid!"

I have had a look at a few other issues but unfortunately have not worked for me.

Background

As per the google documentation in integrating external identities for Cloud IAP, I'm using the gcp-iap-web-toolkit. After attempting their prebuilt container and source code with mixed results I have decided to build a nextjs app for the authentication handler.

I have configured the identity platform, and other GCP components as per the documentation.

The nextjs application is simple and is contained in a single page.tsx. I will link the code below.

You can access the URL at test.tille.io to see the runtime error.

Code

// page.tsx
'use client'

import { useEffect } from 'react';
import firebase from 'firebase/compat/app';
import { OAuthProvider } from 'firebase/auth/web-extension';
// import * as firebaseui from 'firebaseui';
// import * as ciap from 'gcip-iap';

export default function Home() {
  
    // FirebaseUI configuration for a single tenant and Microsoft login
    useEffect(() => {
    // Dynamically import firebaseui and gcip-iap because they depend on the browser environment
    const initializeFirebaseUI = async () => {
      
      const firebaseui = (await import('firebaseui'));
      const ciap = await import('gcip-iap');

      const provider = new OAuthProvider('microsoft.com');

      console.warn(firebaseui)
      // FirebaseUI configuration for a single tenant and Microsoft login
      const config = {
        "*": {
          authDomain: "tilleio*******.firebaseapp.com",
          displayMode: 'optionFirst', // Single tenant
          callbacks: {
            signInUiShown: () => {
              console.log('Sign-in page shown');
            },
            beforeSignInSuccess: (user: firebase.User) => {
              console.log('User signed in:', user);
              return Promise.resolve(user);
            },
          },
          tenants: {
            defaultTenant: {
              displayName: 'Microsoft Login',
              buttonColor: '#2F2F2F',
              iconUrl: '/images/microsoft-icon.png',
              signInOptions: [
                {
                  provider: provider, // Replace with actual Microsoft provider if different
                  providerName: 'Microsoft',
                  buttonColor: '#2F2F2F',
                  iconUrl: '/images/microsoft-icon.png',
                  loginHintKey: 'login_hint',
                },
              ],
              immediateFederatedRedirect: true,
              signInFlow: 'redirect',
            },
          },
        },
      };

      const uiHandler = new firebaseui.auth.FirebaseUiHandler(
        '#firebaseui-auth-container',
        config
      );
      const ciapInstance = new ciap.Authentication(uiHandler);
      ciapInstance.start();
    };

    initializeFirebaseUI();
  }, []);

  return (
    <div id='firebaseui-auth-container'>

    </div>
  );
}