How to implement Microsoft Login with Firebase in React Native?

Question

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!

There are some possible reasons. Please check stackoverflow.com/questions/54922944/…. — Allen Wu
– Allen Wu, Commented Sep 1, 2020 at 3:16

kirhammer · Accepted Answer · 2020-09-01 18:28:12Z

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 [email protected], 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).

answered Sep 1, 2020 at 18:28

kirhammer

337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bastifix Over a year ago

Thanks for this idea! Do you create the customToken with a callable cloud function? I can't call the function without being logged in.

Collectives™ on Stack Overflow

How to implement Microsoft Login with Firebase in React Native?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related