¿Cómo implementar el inicio de sesión de Microsoft con Firebase en React Native?

Question

Actualmente, en nuestra aplicación web, se implementa un inicio de sesión de Microsoft con Firebase. Ahora, quiero hacer lo mismo desde una aplicación React Native. Hasta ahora, descubrí que la biblioteca de Firebase nativa de reacción no es compatible directamente con este proveedor. Además, firebase.auth.OAuthProvider('microsoft.com')no se admite en nativo.

Luego, en mi próximo intento, implementé el inicio de sesión de Azure con el react-native-azure-ad-2paquete, que devuelve un accessToken y los datos del usuario. Ahora he intentado usar este token para iniciar sesión con Firebase sin éxito.

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 esto, obtengo el siguiente error:

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

¡Cualquier ayuda es muy apreciada!

Answer 1

Entonces, finalmente encontré una solución. Tuve que usar un token personalizado que se genera con una identificación única (en este caso, uid de Microsoft). El token se puede generar con un paquete de terceros o con firebase-admin (es decir, solo desde el lado del servidor). Entonces, creé una función en la nube en firebase que toma el uid de Microsoft y alguna información adicional del usuario y devuelve un token, como se muestra a continuación:

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

El token generado debe enviarse al front-end para que se pueda completar el proceso de autenticación de Firebase.

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 el usuario con el identificador único (uid de Microsoft) es nuevo, Firebase creará un nuevo usuario. En mi caso, dado que tenemos una versión de la aplicación web, esto significa que si un usuario inicia sesión con [email protected], Firebase creará 2 usuarios: uno que inició sesión con el proveedor de Microsoft (desde la aplicación web) y otro con un proveedor (de la aplicación nativa reaccionar).