Comment implémenter Microsoft Login avec Firebase dans React Native?

Question

Actuellement, dans notre application Web, une connexion Microsoft avec Firebase est implémentée. Maintenant, je veux faire la même chose à partir d'une application React Native. Jusqu'à présent, j'ai trouvé que la bibliothèque Firebase native de réaction ne prend pas directement en charge ce fournisseur. En outre, firebase.auth.OAuthProvider('microsoft.com')n'est pas pris en charge en natif.

Ensuite, dans ma prochaine tentative, j'ai implémenté la connexion Azure avec le react-native-azure-ad-2package, qui renvoie un accessToken et les données de l'utilisateur. Maintenant, j'ai essayé d'utiliser ce jeton pour me connecter à Firebase sans succès.

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

Avec cela, j'obtiens l'erreur suivante:

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

Toute aide est vraiment appréciée!

Answer 1

Alors, j'ai finalement trouvé une solution. J'ai dû utiliser un jeton personnalisé qui est généré avec un identifiant unique (dans ce cas, Microsoft uid). Le jeton peut être généré avec un package tiers ou avec firebase-admin (c'est-à-dire du côté serveur uniquement). J'ai donc créé une fonction cloud dans Firebase qui prend l'uid Microsoft et des informations utilisateur supplémentaires et renvoie un jeton, comme indiqué ci-dessous:

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

Le jeton généré doit être envoyé au front-end pour que le processus d'authentification Firebase puisse être accompli.

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

Si l'utilisateur avec l'identifiant unique (Microsoft uid) est nouveau, Firebase créera un nouvel utilisateur. Dans mon cas, puisque nous avons une version d'application Web, cela signifie que si un utilisateur se connecte avec [email protected], Firebase créera 2 utilisateurs: un connecté avec le fournisseur Microsoft (à partir de l'application Web) et un autre avec un fournisseur (à partir de l'application native react).