React Native + Firebase Integration With Web3Auth

[Tguntenaar]

Hi, I followed this tutorial: React Native Web3Auth. I did manage to login with and retrieve a private key etc. Now I would to integrate web3auth with Firebase. However this specific tutorial isn't for React Native but for Firebase for the web. In React Native signInWithPopup(auth, googleProvider) does not work. Do you guys have a working example of such integration?

Extra info
In the firebase docs it says that on mobile devices instead of signInWithPopup siginInWithRedirect is preferred.

[shahbaz17]

Hey @Tguntenaar

Have you tried siginInWithRedirect? What does it return?

This could be achieved by using JWT as the provider for login in React Native and passing id_token to web3auth.

web3auth.login({
  loginProvider: LoginProvider.JWT,
  redirectUrl: resolvedRedirectUrl,
  extraLoginOptions: {
    id_token: "your JWT token",
  },
});

[Tguntenaar]

Hi @shahbaz17

Thank for the quick reply! It was my intention to retrieve that token from firebase and then pass it to web3auth. Where I get stuck is getting that token.

I did try signInWithRedirect.

[TypeError: (0, _$$_REQUIRE(_dependencyMap[0], "@firebase/auth").signInWithRedirect) is not a function. (In '(0, _$$_REQUIRE(_dependencyMap[0], "@firebase/auth").signInWithRedirect)(auth, provider)', '(0, _$$_REQUIRE(_dependencyMap[0], "@firebase/auth").signInWithRedirect)' is undefined)]

Although it states that signInWithRedirect is not a function, VSCode lets me navigate to it.

[Tguntenaar]

For people also looking into integrating firebase with the @web3auth/react-native-sdk.

import auth from 'firebase/auth';
import Web3Auth, {
  LOGIN_PROVIDER,
  OPENLOGIN_NETWORK,
} from '@web3auth/react-native-sdk';
import * as WebBrowser from '@toruslabs/react-native-web-browser';
import {
  GoogleSignin,
  statusCodes,
} from '@react-native-google-signin/google-signin';

// Sign in with Google
await GoogleSignin.hasPlayServices();
const userInfo = await GoogleSignin.signIn();
const { idToken } = userInfo;

// Sign in with Firebase
const googleCredential = GoogleAuthProvider.credential(idToken);
signInWithCredential(auth, googleCredential);

 const web3auth = new Web3Auth(WebBrowser, {
    clientId: clientIdWeb3Auth,
    network: OPENLOGIN_NETWORK.TESTNET,
  });
const scheme = 'YOUR_SCHEME'; // Or your desired app redirection scheme
const resolvedRedirectUrl = `${scheme}://openlogin`;

const clientIdWeb3Auth = 'YOUR_CLIENT_ID';

// Sign in with web3auth
const state = await web3auth.login({
  loginProvider: LOGIN_PROVIDER.JWT,
  redirectUrl: resolvedRedirectUrl,
  extraLoginOptions: {
    id_token: idToken,
    verifierIdField: 'sub', // same as your JWT Verifier ID
  },
});

[shahbaz17]

Thanks for sharing the code @Tguntenaar

[ealeksandrov7]

hey guys. Just wondering how does this work without providing a loginConfig/domain, etc..? I am having trouble making it work. In my case I am not using firebase but the other part is the same. Can you please expand on this snippet some more? Thanks in advance!

[Tguntenaar]

@ealeksandrov7 depending on the whether you are using expo or bare react native you can follow this documentation.

I'm building in bare react native and used this code to configure

GoogleSignin.configure({
  webClientId:
    'yourownwebclientid.apps.googleusercontent.com',
  offlineAccess: true,
});

[huyta]

Hello @Tguntenaar,

I just try your codes, but it does not work at my side.

Did you config verifier anywhere?

Thanks,
Huy