Login via token obtained from web firebase auth sdk

[devth]

I have a hybrid RN app where much of the UI is embedded in a WebView and some of it is in RN screens. I'm using @react-native-firebase/auth to interact with Firebase from the RN screens, but the user logs in via the web app in the WebView.

How can I use the tokens from the authenticated user in the web view to set the authenticated user in RN? In other words: I want to sync login state between RN and web.

[mikehardy]

I've never contemplated that use case, so I'm not sure at all, sorry. I'm not aware of any APIs that let you set an externally fetched firebase user auth token into the native SDKs. If I understand correctly they assume you will use native auth methods to authenticate, and they will handle token creation/exchange and give the token to you, with no possibility for the reverse path

[hronnro]

Hey @devth 👋

I have the same idea in mind but I haven't even tried implementing it yet so I'm happy I found this thread! 🙏

Did you manage to solve this in your app?

[devth]

Yep, I got this working!

Here's what I run on the RN side:

  const [user, setUser] = useGlobalState("user"); // this uses react-hooks-global-state lib - you can store state however you want

  const authenticate = async (customToken: string) => {
    analytics().logEvent("login_attempt");

    try {
      const authResult = await auth().signInWithCustomToken(customToken);
      if (authResult.user) {
        analytics().logEvent("login");
        setUser(authResult.user);
      }
      return authResult;
    } catch (error) {
      console.error("Error authenticating", error);
      crashlytics().log(`error authenticating: ${error.message}`);
      crashlytics().recordError(error);
    }
  };

on the web side, that custom token is generated using the admin sdk like:

        const customToken = await admin.auth().createCustomToken(user.uid);

I then use the RN bridge to communicate between the webview and the RN wrapper.

[hronnro]

yeesss TYSM!! 🙌 (this will literally save me so much work lol)

[devth]

Glad I could help!

I can post more details about the React Native webview bridge comm if it helps too.

[CodeDeyya]

hi does this work on client side or just the server side ? Ive heard it does not work on client side. I am trying to bridge to a react application.