# \[Archive\] Error calling tKey.triggerLogin from React native app

**URL:** <https://builder.metamask.io/t/archive-error-calling-tkey-triggerlogin-from-react-native-app/2032>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [March 3, 2023, 2:03am UTC](https://builder.metamask.io/t/archive-error-calling-tkey-triggerlogin-from-react-native-app/2032 "2023-03-03T02:03:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![charlie.andrews](https://avatars.discourse-cdn.com/v4/letter/c/cc9497/32.png) [@charlie.andrews](https://builder.metamask.io/u/charlie.andrews)\
**Post date:** [March 3, 2023, 2:03am UTC](https://builder.metamask.io/t/archive-error-calling-tkey-triggerlogin-from-react-native-app/2032/1 "2023-03-03T02:03:28Z")

</div>

> **🏛 Archived Content from Web3Auth Community**
> 
> This topic was originally posted by **charlie.andrews** on 3/3/2023.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

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](https://github.com/torusresearch/CustomAuth/blob/b1b33245367a83116dba21f6bd801acc4ec96b69/src/utils/helpers.ts#L131) 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](https://github.com/tkey/tkey/blob/c7c0ed0206b065c93ff6d0b90b4d5ad9b20499b6/packages/service-provider-base/src/ServiceProviderBase.ts#L17) 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:

```auto
  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

---

<div class="post-metadata">

**Author:** ![tai.nguyen](https://avatars.discourse-cdn.com/v4/letter/t/3bc359/32.png) [@tai.nguyen](https://builder.metamask.io/u/tai.nguyen)\
**Post date:** [March 3, 2023, 3:40am UTC](https://builder.metamask.io/t/archive-error-calling-tkey-triggerlogin-from-react-native-app/2032/2 "2023-03-03T03:40:07Z")

</div>

Hi, please refer to this self-host example on React native at [GitHub - torusresearch/react-native-self-host-example: react native tkey/selfhost example](https://github.com/torusresearch/react-native-self-host-example)

---

<div class="post-metadata">

**Author:** ![charlie.andrews](https://avatars.discourse-cdn.com/v4/letter/c/cc9497/32.png) [@charlie.andrews](https://builder.metamask.io/u/charlie.andrews)\
**Post date:** [March 3, 2023, 11:37pm UTC](https://builder.metamask.io/t/archive-error-calling-tkey-triggerlogin-from-react-native-app/2032/3 "2023-03-03T23:37:16Z")

</div>

@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](https://youtube.com/shorts/_rtjg45wU2g?feature=share) of what I’m seeing.

I’m also seeing this in the logs:

```auto
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](https://github.com/torusresearch/customauth-react-native-sdk/blob/master/example/App.js) 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.

---

<div class="post-metadata">

**Author:** ![faiyam](https://avatars.discourse-cdn.com/v4/letter/f/f17d59/32.png) [@faiyam](https://builder.metamask.io/u/faiyam)\
**Post date:** [March 10, 2023, 12:44pm UTC](https://builder.metamask.io/t/archive-error-calling-tkey-triggerlogin-from-react-native-app/2032/4 "2023-03-10T12:44:19Z")

</div>

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 ?