Come implementare Microsoft Login con Firebase in React Native?

Question

Attualmente, nella nostra app Web, è implementato un accesso Microsoft con Firebase. Ora, voglio fare lo stesso da un'app React Native. Finora, ho scoperto che la libreria Firebase nativa di reazione non supporta direttamente questo provider. Inoltre, firebase.auth.OAuthProvider('microsoft.com')non è supportato in nativo.

Quindi, nel mio prossimo tentativo, ho implementato l'accesso ad Azure con react-native-azure-ad-2il pacchetto, che restituisce un accessToken e i dati dell'utente. Ora ho provato a utilizzare questo token per accedere con Firebase senza successo.

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

Con questo, ottengo il seguente errore:

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

qualsiasi aiuto è davvero apprezzato!

Answer 1

Quindi, ho finalmente trovato una soluzione. Ho dovuto utilizzare un token personalizzato che viene generato con un ID univoco (in questo caso, Microsoft uid). Il token può essere generato con un pacchetto di terze parti o con firebase-admin (cioè solo dal lato server). Quindi, ho creato una funzione cloud in Firebase che prende l'uid Microsoft e alcune informazioni utente aggiuntive e restituisce un token, come mostrato di seguito:

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

Il token generato deve essere inviato al front-end in modo che il processo di autenticazione Firebase possa essere completato.

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 l'utente con l'identificatore univoco (Microsoft uid) è nuovo, Firebase creerà un nuovo utente. Nel mio caso, poiché disponiamo di una versione dell'app Web, ciò significa che se un utente accede con [email protected] , Firebase creerà 2 utenti: uno connesso con il provider Microsoft (dall'app Web) e un altro con un provider (dall'app nativa di reazione).