Description
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>
);
}