No Modal + SMS Passwordless UX on React Native

Help - Plug n Play PnP React Native SDK
1
  • SDK Version: 3.5.0
  • Expo or Bare Version: Bare
  • Screenshots of error: N/A
  • Related to Custom Authentication? Please provide the following info too: (Optional)
    • Verifier Name: auth0-based-jwt-service-1
    • JWKS Endpoint: N/A
    • Sample idToken(JWT): N/A

Please provide the Web3Auth initialization and login code snippet below:

Description of Problem:

We are attempting to integrate web3Auth with no modal using sms passwordless custom authenticiation powered by Auth0 on react native. As it stands, our sense is that there is no well-documented pathway to satisfy this particular combination using the existing Web3AuthSDKS.

We’ve followed the React Native documentation and found that it does not seem to have any information about how to do no modal on react native.

The only documentation we’ve found for no modal is on the Web3Auth plug and play no modal docs. However in practice, we’ve had trouble getting this core SDK to work as it seems that it assumes a web environment when it runs.

So our current analysis is that there is no well documented pathway to doing a no modal, custom auth integration with web3Auth on react-native. We see two possible ways forward.

Either can we fork the Web3Auth core package and try to adapt it to work on react-native, or we can use the tkey SDKs directly.

Are we correct in our thinking? Or are we missing an easier integration pathway?

Thanks for your consideration.

Faiyam,
Dev @ Mango.Markets

2

Hey @faiyam

Can you define “no-modal” in this context?

Because as far as I know, our React Native SDK doesn’t have modal. If you mean, no redirect screens/user flow screens, then you should consider tKey SDK.

Web3Auth Modal on Web

Screenshot 2023-03-06 at 10.00.17 AM
Screenshot 2023-03-06 at 10.00.17 AM401×645 24.5 KB

3

Hey @shahbaz thanks for your reply. By “no-modal” I mean that we should own the entire UI. I want to have our own UI to query the users phone number, send and process an OTP, then take the JWT that we get from that and feed it into web3auth/tkey in order to authenticate the user.

Should we look to use tKey for this purpose? In our testing I was seeing the SDK open up a web view for auth, which takes the user out of our UI and hence is something we’d want to avoid.

4

Hey faiyam

Yes, with plug and play, you get a redirect from app.openlogin.com, where the actual key reconstruction happens. This makes the whole system non custodial and also easy to access. You cannot skip that in the plug and play implementation. If you don’t want any redirect, you can choose the tKey SDK.

5

@yashovardhan thanks for the info.

I am working on using the tkey library now and am running into an error in the init code that once again seems to arise from it assuming a web context.

My Code:

let tKey: ThresholdKey

export const initialize = async () => {
  tKey = new ThresholdKey({
    customAuthArgs: {
      baseUrl: "mango://",
      uxMode: "popup",
    },
  })

  await (tKey.serviceProvider as TorusServiceProvider).init({
    skipSw: true,
    skipPrefetch: true,
  })
}

When calling init on the serviceProvider, we get the following error: “Error: UserAgent parameter can’t be empty”

Upon inspection, this seems to arise from the are3PCSupported function.

Callstack: Calling tKey.serviceProvider.init in turn calls init on a CustomAuth object, which in turn calls init on a StorageHelper object, which in turn calls the above are3PCSupported function.

The error arises because the above function assumes the existence of the navigator.userAgent property, which is absent on react-native.

Is there are a certain config or something we should be using to use tkey on react-native? Looking at this error makes me think that tkey is not compatible with react-native. Curious if you could please point me in the right direction.

Thanks

6

Adding one more question to the thread here. As of now I’ve worked around the above issue by patching the tkey library. I’m still curious if there’s a better solution since this is a bit hacky.

Now I’m getting the following error: “Error occurred while verifying params verifier auth0-based-jwt-service-1 not found for account id: 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY”

My code is:

import ThresholdKey from "@tkey/default"
import TorusServiceProvider from "@tkey/service-provider-torus"
import Config from "react-native-config"

let tKey: ThresholdKey

export const initialize = async () => {
  console.log("creating tkey with customauthargs", {
    baseUrl: "mango://",
    network: "testnet",
    uxMode: "popup",
  })
  tKey = new ThresholdKey({
    customAuthArgs: {
      baseUrl: "mango://",
      network: "testnet",
      uxMode: "popup",
    },
  })

  await (tKey.serviceProvider as TorusServiceProvider).init({
    skipSw: true,
    skipPrefetch: true,
  })
}

export const tKeyLogin = async ({ id_token }) => {
  const response = await (tKey.serviceProvider as TorusServiceProvider).triggerLogin({
    typeOfLogin: "jwt",
    verifier: "auth0-based-jwt-service-1",
    clientId: Config.WEB3AUTH_CLIENT_ID,
    jwtParams: {
      id_token,
      domain: "dev-m2fsnf062eycbwpi.us.auth0.com",
      client_id: Config.AUTH0_CLIENT_ID,
      verifierIdField: "sub",
    },
  })

  console.log("tkey login response", response)
}

I confirmed that I have a verifier with that id on our web3auth dashboard on testnet.

One thing that is confusing to me is that the account id shown in the error is not our client id.

Any insight into what may be going wrong here?

7

Resolved here: Error occurred while verifying params verifier auth0-based-jwt-service-1 not found for account id: "..." - #9 by faiyam