1

Currenty, in our web app, a Microsoft login with Firebase is implemented. Now, I want to do the same from a React Native app. So far, I found that react-native Firebase library does not directly support this provider. Also, firebase.auth.OAuthProvider('microsoft.com') is not supported in native.

Then, In my next attempt, I implemented Azure login with react-native-azure-ad-2 package, which returns an accessToken and user's data. Now I've been trying to use this token to signIn with Firebase with no success.

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

With this, I get the following error:

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

any help is really appreciated!

kirhammer
  • 33
  • 7
  • There are some possible reasons. Please check https://stackoverflow.com/questions/54922944/fb-login-firebase-auth-error-the-supplied-auth-credential-is-malformed-or-h. – Allen Wu Sep 01 '20 at 03:16

1 Answers1

1

So, I finally found a solution. I had to use a custom token which is generated with a unique id (in this case, Microsoft uid). The token can be generated with a 3rd party package or with firebase-admin (that is, from server side only). So, I created a cloud function in firebase that takes the Microsoft uid and some additional user info and returns a token, as shown below:

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

The generated token has to be sent to the Front-end so that Firebase Authentication process can be accomplished.

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

If the user with the unique identifier (Microsoft uid) is new, Firebase will create a new user. In my case, since we have a web app version, this means that if a user logs with example@outlook.com, Firebase will create 2 users: one logged in with Microsoft provider (from the web app) and another one with a custom provider (from react native app).

kirhammer
  • 33
  • 7
  • Thanks for this idea! Do you create the customToken with a callable cloud function? I can't call the function without being logged in. – bastifix Jul 28 '22 at 12:01