[🐛] Bug Report Title - React Native Firebase Microsoft Authentication - Error: `new OAuthProvider()` is not supported on the native Firebase SDKs

[JaysLachance]

I'm trying to add a microsoft login to my react native app with the help of firebase. I have done all the preconfiguration in both azure portal and firebase. The issue seems to be with the error (see title).

I'm following this guide : https://firebase.google.com/docs/auth/web/microsoft-oauth#web-version-9

And once i try to create an instance of OauthProvider, i get the error. Here's the specific code (also found in the guide) :

Ive looked around and i think there's a couple of hacks for others login such as facebook but i didnt find anything for microsoft yet. It also seems to be the simplier way to implement a login to microsoft button. Simply put, im literally stuck at the first step so if there's an alternative or a way to fix that real quick, i'd appreciate it. Thanks !

Simple code Sample that gives me the error in the title :

import {auth, firebase, OAuthProvider} from '@react-native-firebase/auth;


const provider = new firebase.auth.OAuthProvider('microsoft.com');

Firebase version :

    "@react-native-firebase/app": "^11.5.0",
    "@react-native-firebase/auth": "^14.11.0",
    "@react-native-firebase/dynamic-links": "^12.1.0",
    "@react-native-firebase/messaging": "^12.0.

Using Windows

[mikehardy]

This is a huge :warning: :skull_and_crossbones: :warning: sign:

    "@react-native-firebase/app": "^11.5.0",
    "@react-native-firebase/auth": "^14.11.0",
    "@react-native-firebase/dynamic-links": "^12.1.0",
    "@react-native-firebase/messaging": "^12.0.

please use all one version - that is, use all 14.11.0 and see if you reproduce: https://invertase.io/blog/react-native-firebase-versioning

[JaysLachance]

Hello, i just updated every versions to the latest (14.11.0) but i still get the same error.

[mikehardy]

Okay - thanks for checking, and at any rate, your project will be healther now with non OAuth code - I think this may be as simple (and unfortunate) as "it is not implemented yet" - I recall there was some activity on it a while back but it did not make it to completion and the branch was abandoned.

This would enable hotmail.com logins as a result wouldn't it? That's actually a popular single sign in method, if it were available

[JaysLachance]

Yes, i was looking to use firebase for both Google Auth and Microsoft Auth but i get the same error for the GoogleAuthProvider : ReactNativeJS: Error: new GoogleAuthProvider() is not supported on the native Firebase SDKs.. I guess ill interpret the error message literally and try to find an alternative. I've already found one for google but im not sure if you have any idea how i could implement microsoft ? thanks

[mikehardy]

I help maintain google sign in here https://github.com/react-native-google-signin/google-signin a bit, that one is in use by me personally and it should work

The microsoft provider simply doesn't exist though, it's a feature gap. I'm not sure of another way to do it besides this module, which has Azure listed as tested/working:

https://github.com/FormidableLabs/react-native-app-auth#tested-openid-providers

If you get a token from them then it should be possible to use it with auth, currently (that is: not blocking on waiting for anything to change here at react-native-firebase) by using cloud functions with firebase-admin-sdk to mint a firebase auth token in exchange for the azure oauth2 token

To add it here may not be too bad either, as a PR - I haven't investigated it in a while, but the last time I did, I thought this PR (where Sign In With Apple was implemented) was a pretty good demonstration of adding a new provider - it's not that intricate:

https://github.com/invertase/react-native-firebase/pull/2979/files

If you give it a shot, our test harness is how I do all development, install and run of e2e harness is fairly straightforward: https://github.com/invertase/react-native-firebase/blob/main/tests/README.md and any time you post a PR (even if it is WIP or draft or whatever) our CI runs a job that generates a set of patch-package patches and adds them as an artifact on the CI patch-package run so that you can test-integrate them in your project (otherwise since we're a monorepo it's a real pain to test it in a real app...)

[JaysLachance]

Thanks so much. About the react-native-google-sign-in. Is there any way i can add my own custom design to the button ? I dont see anything on github about it. Thanks

[mikehardy]

Oh for sure, I use a custom button design for it. As ever use good human interface design (for instance: apple will reject your app if you modify the buttons beyond their guidelines, but you can do a custom one). Just make a View and layout the button you want so long as you hook the right function onPress

[Babsvik]

Hey @mikehardy not sure if this is the right place for it. But I stumbled into this issue trying to get OpenID Connect to work with Firebase using react-native-firebase. I ended up doing what you suggested in your comment above

If you get a token from them then it should be possible to use it with auth, currently (that is: not blocking on waiting for anything to change here at react-native-firebase) by using cloud functions with firebase-admin-sdk to mint a firebase auth token in exchange for the azure oauth2 token

I ended up getting the token using react-native-app-auth like you suggested. But then not minting the token myself, but instead just siging in with IdToken using the methods in Firebase. It is supported if you have added the the OIDC provider in Firebase console (or identity platform console). Explained in the Firebase docs

The reason the oauth provider can't be used is because the providerId sent to the firebase native SDK has to match the name set in the console and the oauth provider always has the providerId oauth. I will figure out a way to set that dynamically in the OIDC provider.

I was hoping to make a PR with an OIDC provider. Do you think this idea will fly or do you have any other suggestions? Would you be willing to take a look at the PR if I make one? Or should I get some feedback on this in another way? For me it's mostly about that I don't want to have a forked version I have to maintain myself, so would be good to get that provider in and it might be of use to someone else? And seeing as it is supported by Firebase that might be good for this package also?

Edit: I did this using Azure AD as the IdP and that now works in my app, with the code for react-native-firebase being modified with the new OIDC provider code.

[mikehardy]

Oh neat - I'm all for supporting the various providers that firebase does, and the ones with strict provider names do need to be implemented one-for-one I think, so certainly make a PR if you can, I'm happy to collaborate.

[github-actions[bot]]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.