Error calling tKey.triggerLogin from React native app

Help - Core-Kit
1

I am trying to trigger a login with tKey in a React Native (bare) app. I followed along the instructions and the React example, but I am getting this error when I attempt to trigger a login: ReferenceError: Can't find variable: document

The stack trace indicates that the error originates from this line in CustomAuth, which judging by its use of the global document variable, seems to assume that the code is running in the browser. But in a React Native mobile app, that is obviously not the case.

The right solution seems to be to use a different serviceProvider when instantiating the threshold key, since the TorusServiceProvider is built on top of CustomAuth and breaks when used in a mobile app rather than a browser. However, TorusServiceProvider seems like the only service provider that can actually interact with the Torus network-- ServiceProviderBase looks like it just has helpers for serialization and encryption.

So far I have tried creating a new subclass of ServiceProviderBase that uses customauth-react-native-sdk, but I’ve been unsuccessful so far. That SDK has a slightly different API than the CustomAuth web SDK, and I’m wondering if it is actually the right approach.

Could you provide an example, or at least high-level advice, for integrating with tKey in a react native application, given that TorusServiceProvider appears not to work outside a browser?

Here is my code:

  const torusServiceProvider = new TorusServiceProvider({
    customAuthArgs: {
      baseUrl: `celo://wallet`,  // tried several different URLs here
      network: 'testnet',
    },
  })
  const tKey = new ThresholdKey({
    serviceProvider: torusServiceProvider,
  })
  await (tKey.serviceProvider as TorusServiceProvider).init({skipInit: true})  // without skipInit, hangs forever
  try {
    const loginResponse = await (tKey.serviceProvider as TorusServiceProvider).triggerLogin({
      typeOfLogin: 'google',
      verifier: 'google-oauth-alfajores',
      clientId: '1067724576910-j7aqq89gfe5c30lnd9u8jkt7837fsprm.apps.googleusercontent.com',
    })
    Logger.info(TAG, `loginResponse: ${JSON.stringify(loginResponse)} `)
  } catch (e) {
    Logger.error(TAG, `Error triggering login: ${e} , stack: ${e.stack}`)
  }

Please provide the following details too when asking for help in this category:

  • SDK Version: 7.2.0
  • Verifier Details:
    • Verifier Name: google-oauth-alfajores
2

Hi, please refer to this self-host example on React native at GitHub - torusresearch/react-native-self-host-example: react native tkey/selfhost example

1 Like
3

@tai.nguyen thanks for sharing the example. When I try to run the example app locally on ios, I am unable to log in-- instead, I briefly see a message about connecting my google account that immediately disappears. Here’s a video of what I’m seeing.

I’m also seeing this in the logs:

WARN  Possible Unhandled Promise Rejection (id: 0):
TypeError: window.addEventListener is not a function. (In 'window.addEventListener("load", resolve)', 'window.addEventListener' is undefined)

I noticed this same behavior when trying to implement my own tKey service provider with the customauth-react-native-sdk. Weirdly, the (non-tKey) example here does allow me to log in with Google, by which I mean the message “customauthexample Wants to use Google to Sign In” does not disappear. Not sure why using tKey and customauth-react-native-sdk together would lead to this behavior.

5

Hi I am also trying to get triggerLogin to work on react-native and having issues as well. For what it’s worth @charlie.andrews I’ve been able to get around the specific “document” related issue you mentioned by patching the underlying libraries in such a way that they avoid web specific code. It’s hacky, but it gets around those specific issues.

I am able to run the example app @tai.nguyen shared. However I’m curious if the customauth-react-native-sdk used in that example app is capable of using a no-modal, bring your own jwt style integration. From what I can tell, it seems to only support a web view based integration.

Am I correct in my understanding @tai.nguyen ?