SAML support

[utkarsh-bandekar]

We have a react-native app which is currently using Auth0 for authentication.

We are planning to add SSO support in our app. We have decided to use Google identity platform and configure SAML provider for tenants which requires SSO.

1. Does react-native-firebase support login using SAML provider.

2. If its not supported then how much easy it will be to add support for SAML (Considering the fact that we are new in react-native development)

[Jbug1984]

[mikehardy]

Hey @utkarsh-bandekar - the native platforms do not support SAML, but the javascript SDK does.
https://stackoverflow.com/questions/52284067/saml-authentication-with-firebase has a tutorial linked to it even, that looks great - https://medium.com/@tfalvo/single-sign-on-sso-for-your-firebase-app-with-saml-f67c71e0b4d6

https://firebase.google.com/docs/reference/js/v8/firebase.auth.SAMLAuthProvider

Here's what I think - you can either use the JS SDK completely (losing the benefit of native notifications/messaging/dynamic-links - a few things) and have it work with no fiddling it seems. Or, with a little fiddling I think it's also possible to mix the SDKs just a little bit, and use the SAML Auth from the firebase-js-sdk to get an auth token, then use that token with the native SDKs wrapped here via react-native-firebase if you need the native bindings.

[charles-desouza]

Thanks, @mikehardy, Those links helped to get started.
I would like to know your thoughts on possible implementation

Since firebase native SDK's do not provide support for SAML implementation, we plan to host a web page (which will act as a middle man and use the firebase js SDK to do the SAML authentication) and call this web page from react-native using react-native-custom-tabs and return token. Use the returned token and call signInWithCredential().

[mikehardy]

Hmm - you could do that - but I think you can also run the firebase-js-sdk inside a react-native app? It works - then you have everything you need (that is, objects in memory where you may consult values and communicate programmatically) in one more coherent spot. I think it's possible to do what you are saying as well but that will spin up a much heavier system process (the WebView on the device) to do the custom tabs and everything, and is more difficult to handle the UI/UX etc since it's in a custom tab

[charles-desouza]

Thanks, @mikehardy,
I am new to react-native, I had my doubts if the firebase-js-SDK would be able to support saml auth in the react-native app due to the SAML HTTP POST bindings.
I would appreciate it if you can provide examples of using firebase-js-SDK for saml auth for the react-native app.

[mikehardy]

There are none, sorry. Everything you are doing is going to be trailblazing and thus require careful, incremental proof of concepts of the unknown bits to see.

[jthoward64]

One (major) issue with using the web SDK in react native as mentioned by those guides is this:

"Headful" auth methods such as signInWithPopup(), signInWithRedirect(), linkWithPopup(), and linkWithRedirect() do not work in React Native (or Cordova, for that matter). You can still sign in or link with a federated provider by using signInWithCredential() with an OAuth token from your provider of choice.

https://firebase.googleblog.com/2016/07/firebase-react-native.html

[jthoward64]

Just happened across this and I may have something to contribute, I ran into a similar problem using just the web SDK in an Expo app (signInWithPopup and signInWithRedirect, the two ways to do SAML auth doesn't work in react native), so I have been successfully using a middleman webpage. I have a slightly out of date (I will be updating it soon) example that I made because there is no information anywhere about doing this. Since this example is in Expo you will have to replace expo's WebBrowser API, but that should be simple.

https://github.com/tajetaje/examples/tree/master/with-firebase-saml-login
https://github.com/expo/examples/tree/master/with-firebase-saml-login

[bastifix]

The link is no longer available. I'm very interested in your workaround, but not yet able to do it on my own. Can you please provide me some help or the example code again? Would save my day!

[jthoward64]

I've since switched to OAuth, but you should be able to adapt this for SAML easily enough:
https://github.com/UKDanceBlue/admin-portal/blob/a385e547e120b953ff31768ad3e23929e93fa1f5/public/linkblue-relay.html
https://github.com/UKDanceBlue/danceblue-react-app/blob/65c1ede4394423c9dfd2a161d937610122e5f3fd/src/common/SingleSignOn.ts
alternatively, this:
https://github.com/UKDanceBlue/danceblue-react-app/blob/main/src/common/auth.ts

I don't think I have a copy of the original file anymore

[jthoward64]

Found it, forgot Expo accepted the PR:

https://github.com/expo/examples/tree/master/with-firebase-saml-login

[vjsharma87]

I'm attempting to achieve the same with a React Native CLI project, but I'm encountering an error during the signInWithCredentials process: "The supplied auth credential is malformed, has expired, or is not currently supported." Despite verifying the credentials, the error persists. Do you have any example code for a React Native CLI project using the latest Firebase version?

[jthoward64]

I'm attempting to achieve the same with a React Native CLI project, but I'm encountering an error during the signInWithCredentials process: "The supplied auth credential is malformed, has expired, or is not currently supported." Despite verifying the credentials, the error persists. Do you have any example code for a React Native CLI project using the latest Firebase version?

AFAIK the code for Expo and React Native should be about the same, make sure you have the right client configuration and such and that you are actually using the right deserialization and firebase function