Search code examples
react-nativegoogle-cloud-platformfirebase-authenticationexposaml

How do I use SAML to authenticate a user in Firebase under React Native + Expo


I couldn't find any questions (or answers) on SO or elsewhere when I was looking for a way to add SAML single-sign-on to the React Native app I'm working on, so here I am: see my answer below.


Solution

  • To start off I tried following Google's documentation for this but after a lot of messing about with WebViews and trying to lie to the DOM, I found out that it simply wasn't supported on react native (something that would have been nice to see in the docs a bit more obviously). Eventually I settled on adapting those instructions (follow the first and second sections) using a dummy webpage opened by Expo's WebBrowser to act as a middle man. This is needed because firebase enforces https(s): for the protocol when making a call to signInWithRedirect or signInWithPopup but react native will send a protocol of about: or something similar when trying the call in JavaScript or even nested in a WebView, expo however calls the native browser and thus works on an http(s) protocol while still allowing information to be passed back into the app. There may be a way to do this using react native's webview, but I couldn't find anything remotely similar.

    This preface leads me to the solution I came up with, which was merged into Expo's examples.

    Obviously use this at your own risk, I am no expert on cybersecurity but even I know there are more than a few vectors for attack here.