Multiple tenants firebaseui and gcip-iap invalid config

Viewed 67

First time working with firebase and gcip-iap so I may be missing something.

I'm trying to create a Multiple tenants configuration.

Below is the current code that works only for none tenants configuration:

import { firebase } from '@firebase/app';
import "firebase/auth";
import * as firebaseui from 'firebaseui'
import * as ciap from 'gcip-iap';

const tenantsConfig = {
  '*': {
    signInSuccessUrl: '/',
    signInOptions: [
      {
        provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
      },
      {
        provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID
      },
    ],
    immediateFederatedRedirect: false,
  },
  'xxxx-xxx': {
    signInSuccessUrl: '/',
    immediateFederatedRedirect: false,
    signInOptions: [
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
  },
  'xxxx-xxx': {
    signInSuccessUrl: '/',
    immediateFederatedRedirect: false,
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    ],
  },
};

const configs = {};
configs['API_KEY'] = {
  authDomain: 'APP_NAME.firebaseapp.com',
  displayMode: 'optionsFirst',
  tenants: tenantsConfig,
};

export function init() {
  const handler = new firebaseui.auth.FirebaseUiHandler('#firebaseui-container', configs);
  const ciapInstance = new ciap.Authentication(handler);
  ciapInstance.start();
}

I'm following this as an example: https://github.com/GoogleCloudPlatform/iap-gcip-web-toolkit.

The moment I remove the object to follow the example so that I have two tenants:

'*': {
    signInSuccessUrl: '/',
    signInOptions: [
      {
        provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
      },
      {
        provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID
      },
    ],
    immediateFederatedRedirect: false,
  },

I get an error:

Error encountered
Invalid tenant configuration!

----

esm.js:368 Uncaught (in promise) Error: Invalid tenant configuration!
    at ao (esm.js:368)
    at ho.../node_modules/firebaseui/dist/esm.js.l.Pb (esm.js:373)
    at t.e.getAuth (index.esm.js:2)
    at t.e (index.esm.js:2)
    at new t (index.esm.js:2)
    at new e (index.esm.js:2)
    at init (login.js:36)
    at Module.../src/assets/js/main.js (main.js:11)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83

Where the tenants id is correctly taken from here: enter image description here

Am I'm missing some configuration or permission to enable this?

Any insights to the issue will be much appreciated.

0 Answers
Related