Login do Google com extensão firebase para Chrome no React

Question

Usando Firebase para Google Sign In com extensão Chrome criada com React. Eu configurei o oauth usando GoogleConsolee consegui fazer o login com sucesso com a extensão do Chrome usando

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

Agora, gostaria de estruturar meu código usando react, redux, webext-redux ...

Na configuração do firebase, incluímos apiKey, databaseUrl , storageBucket and authDomain as chrome-extension://key_name.

O mesmo domínio de autenticação é definido em Firebase -> Auth -> SignIn -> Auth Domains no firebase. A extensão gera um erro Uncaught Error: Illegal url for new iframe - https://chrome-extension/:auth/iframe?apiKey=secretKeysao tentar assinarInWithGoogle.

Por favor, deixe-me saber se mais informações forem necessárias.

Answer 1

Alterado o chrome.identitycódigo de popup.jspara background.jspara manter o login único para o usuário no navegador.

Popup.js-> background.js-> execute singin with google.

Usado webext-redux, redux, redux-thunk, firebasepara implementar o Google SignIn with React.