Como implementar o Login da Microsoft com Firebase no React Native?

Question

Atualmente, em nosso aplicativo da web, um login da Microsoft com Firebase está implementado. Agora, quero fazer o mesmo em um aplicativo React Native. Até agora, descobri que a biblioteca nativa Reagente do Firebase não oferece suporte direto a esse provedor. Além disso, firebase.auth.OAuthProvider('microsoft.com')não é compatível com o nativo.

Então, em minha próxima tentativa, implementei o logon do Azure com react-native-azure-ad-2pacote, que retorna um accessToken e os dados do usuário. Agora estou tentando usar este token para fazer login no Firebase, sem sucesso.

onMicrosoftLoginSuccess(accessToken){
    const credential = auth.OAuthProvider.credential(accessToken);
    auth().signInWithCredential(credential)
    .then(response =>{
        console.log('Respuesta firebase', response);
    })
    .catch(e =>{
        console.log('Error Firebase', e);
    })
}

Com isso, recebo o seguinte erro:

Error Firebase [Error: [auth/invalid-credential] The supplied auth credential is malformed or has expired.]

qualquer ajuda é muito apreciada!

Answer 1

Então, finalmente encontrei uma solução. Tive que usar um token personalizado que é gerado com uma id exclusiva (neste caso, uid da Microsoft). O token pode ser gerado com um pacote de terceiros ou com firebase-admin (ou seja, apenas do lado do servidor). Portanto, criei uma função de nuvem no firebase que pega o uid da Microsoft e algumas informações adicionais do usuário e retorna um token, conforme mostrado abaixo:

const tokenPromise = (data) =>{
    return new Promise((resolve, reject) =>{
        admin.auth().createCustomToken(data.uid, data.user)
        .then(response =>{
            console.log('Response', response);
            resolve(response);
        })
        .catch(error =>{
            console.log('Error', error);
            reject(error);
        })
    });
}

O token gerado deve ser enviado ao front-end para que o processo de autenticação do Firebase possa ser realizado.

auth().signInWithCustomToken(tokenFromServer)
    .then(response =>{
        //response contains user data;
        //You can also access this info from
        firebase.auth().currentUser;
    })
    .catch(e =>{
        console.log('Error Firebase', e);
    });

Se o usuário com o identificador exclusivo (Microsoft uid) for novo, o Firebase criará um novo usuário. No meu caso, como temos uma versão do aplicativo da web, isso significa que se um usuário fizer login com [email protected], o Firebase criará 2 usuários: um conectado com o provedor Microsoft (do aplicativo da web) e outro com um usuário personalizado provedor (do aplicativo nativo react).