Google Sign In with firebase for chrome extension in React

Using Firebase for Google Sign In with Chrome extension created with React. I have set up the oauth using GoogleConsole and was able to successfully make the login with chrome extension using

chrome.identity.getAuthToken({ interactive: true }, function (token) {
if (chrome.runtime.lastError) {
    console.log('It was not possible to get a token programmatically.');
} else if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError);
} else if (token) {
    // Authorize Firebase with the OAuth Access Token.
    var credential = firebase.auth.GoogleAuthProvider.credential(null, token);
    firebase.auth().signInWithCredential(credential).catch(function (error) {
        // The OAuth token might have been invalidated. Lets' remove it from cache.
        if (error.code === 'auth/invalid-credential') {
            chrome.identity.removeCachedAuthToken({ token: token }, function () {
                signInWithGoogle();
            });
        }
    });
} else {
    console.error('The OAuth Token was null');
}
});

Now, I would like to structure my code using react, redux, webext-redux...

In the config of firebase, have included apiKey, databaseUrl , storageBucket and authDomain as chrome-extension://key_name.

The same auth domain is defined under Firebase -> Auth -> SignIn -> Auth Domains in firebase. Extension throws error Uncaught Error: Illegal url for new iframe - https://chrome-extension/:auth/iframe?apiKey=secretKeys on making an attempt to signInWithGoogle.

Kindly let me know if anymore info is needed.