Google login within Mobile WebView - 403 disallowed_useragent

Help - Plug n Play PnP Web SDKs
1

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

  • SDK Version: web3auth/modal 6.0.1
  • Platform: Nextjs (web)

Please provide the Web3Auth initialization and login code snippet below:

    const openloginAdapter = new OpenloginAdapter({
      adapterSettings: {
        network: network,
        clientId: WEB3AUTH_CLIENT_ID,
        uxMode: 'redirect',
        redirectUrl: [...],
      },
    });
    web3auth.configureAdapter(openloginAdapter);
    await web3auth.initModal({
      modalConfig: {
        [WALLET_ADAPTERS.WALLET_CONNECT_V2]: {
          label: 'WALLET_CONNECT_V2',
          showOnModal: false,
        },
        [WALLET_ADAPTERS.TORUS_EVM]: {
          label: 'TORUS_EVM',
          showOnModal: false,
        },
        [WALLET_ADAPTERS.OPENLOGIN]: {
          label: 'openlogin',
          loginMethods: {
            phone: DISABLE_SOCIAL_LOGIN_METHOD,
            google: {
              name: 'google login',
              logoDark: 'url to your custom logo which will shown in dark mode',
              showOnModal: true
            },
            facebook: DISABLE_SOCIAL_LOGIN_METHOD,
            reddit: DISABLE_SOCIAL_LOGIN_METHOD,
            discord: DISABLE_SOCIAL_LOGIN_METHOD,
            twitch: DISABLE_SOCIAL_LOGIN_METHOD,
            apple: DISABLE_SOCIAL_LOGIN_METHOD,
            line: DISABLE_SOCIAL_LOGIN_METHOD,
            github: DISABLE_SOCIAL_LOGIN_METHOD,
            kakao: DISABLE_SOCIAL_LOGIN_METHOD,
            linkedin: DISABLE_SOCIAL_LOGIN_METHOD,
            twitter: DISABLE_SOCIAL_LOGIN_METHOD,
            weibo: DISABLE_SOCIAL_LOGIN_METHOD,
            wechat: DISABLE_SOCIAL_LOGIN_METHOD,
          },
          
          // setting it to false will hide all social login methods from modal.
          showOnModal: true,
        },
      },
    });

Hello, we have created a web application that integrates Web3Auth and it works pretty well, thank you. However now we are planning to develop a mobile app version of our platform by creating a hybrid app using a either gonative.io or Capacitorjs. Essentially bundling our existing web application in a WebView based hybrid app.

Unfortunately we immediately ran into a problem with our Google Social login as Google returned a 403 disallowed_useragent error and denied the login attempt. According to their help pages:

If you get an error that says "403 disallowed_useragent," the app uses embedded WebViews. Some developers use WebViews to help display web content in an app. Embedded WebViews puts your security at risk because they could let third parties access and change communications between you and Google.

To keep your account secure, Google no longer allows embedded WebViews as of September 30, 2021.

GoNative are aware of this issue and have proposed a work-around which uses a Javascript bridge to call the Native APIs to get the authentication state from a particular provider. But I am not sure if it is compatible with Web3Auth? → Social Login

Google themselves seem to suggest using custom tabs, but again, not sure if this is compatible.

Considering using an embedded WebView is at the core of our solution, is there any recommended approach to work around this issue from Google? How can we use Google Social login from a mobile embedded WebView application?

Thanks in advance!

2

@benjamin.groves Thanks for your question.

Your request has been forwarded to our team and we will get back with further updates once more information becomes available.

3

Thank you @vjgee.

For further context, we are currently using Web3auth Model SDK using the default verifiers, but I did some reading on “Custom authentication” with “custom verifiers” and it got me thinking…

Would it be possible to:

  • Set up a custom google verifier in Web3Auth using our own Google instance.
  • Verify the user using a Google Login plugin that is not part of Web3Auth and receive the JWT/id token.
  • Then pass that JWT/id token to Web3Auth to complete the authentication.

If that flow is possible then we should be able to integrate with any Google login plugin from Capacitor or native api outside of the embedded WebView, and then pass the required information back to web3auth to complete the process.

But I’m not sure if its possible, the docs don’t explicitly mention this kind of flow.

4

Hi Benjamin,

I suppose that’s possible. It’s a last resort case I suppose.

I am also facing this issue and I’ll work on your idea as a workaround. Thanks for your suggestion.

5

Hey @jibrail If you discover anything useful please share with us, we are quite stuck in this moment.

Another idea I was exploring was using mobile application deep-linking. Take the following code as an example:

const openloginAdapter = new OpenloginAdapter({
      adapterSettings: {
        network: network,
        clientId: WEB3AUTH_CLIENT_ID,
        uxMode: 'redirect',
        redirectUrl: "https://example.com/dashboard",
     },
});

We build our webapp using capacitorjs which wraps our web code into a WebView, then use the Web3Auth modal in redirect mode which launches the authentication flow in a new tab of the mobile web browser (chrome, safari).

The authentication actually works in this scenario, however the problem is that when Web3Auth finished its flow, it redirects the user to the url defined by redirectUrl which by default opens in the web browser and does not reopen the app.

So following this Capacitor deep-linking guide I was hoping that I could force the redirectUrl to be recognised by the app and launch the mobile application instead of the browser.

Its still a work in progress however… but just throwing it out there.

6

The flow mentioned here is possible and the standard we recommend as well.
You can see an example reg. the same here.

you can use custom authentication and pass the idToken you receive from OAuth provider into connectTo function.

    const web3authProvider = await web3auth.connectTo(
      WALLET_ADAPTERS.OPENLOGIN,
      {
        loginProvider: "jwt",
        extraLoginOptions: {
          id_token: idToken,
          verifierIdField: "sub",
          domain: "http://localhost:3000",
        },
      }
    );

Full example available here and a relevant firebase custom auth using idToken received from firebase auth guide here

7

Does this address the WebView 403 issue above?

8

You should follow the 1st comment from @benjamin.groves in setting up a custom verifier