My Login with google by Arcana Auth SDK does not work when I use ReactJS

Description of the bug: Couldn’t sign up with Google

Category/Feature it belongs to: Auth

Detailed Steps to Reproduce:

My repository: GitHub - nrs-minhdoan/neross-arcana-dapp
My Live Demo:

Browser Version: Google Chrome Version 97.0.4692.99 (Official Build) (arm64)

Supporting Material (Screenshot/Video/Logs):

With localhost:3000:


Hey @nrs.andrew,
We do support ReactJS, Thank you for reporting this issue, we are investigating it and might reach out to you for more information.


I build my app in Netlify but it’s not still working

This is my code:
Auth.tsx: neross-arcana-dapp/GoogleAuth.tsx at master · nrs-minhdoan/neross-arcana-dapp · GitHub
auth.saga.ts: neross-arcana-dapp/auth.saga.ts at master · nrs-minhdoan/neross-arcana-dapp · GitHub
arcanaNetwork.ts: neross-arcana-dapp/arcanaNetwork.ts at master · nrs-minhdoan/neross-arcana-dapp · GitHub

1 Like

This is your team explanation

1 Like

@nrs.andrew Did you get a chance to try what makylfang suggested? Deleting the app from the dashboard and creating a new one with the mentioned clientID? There seems to be a mismatch in the clientIDs that’s why the error is being reported.

I try to it but it just work in localhost. It’s not still work when I build

I am getting the same error, even tried with the solution provided.

1 Like

Thanks @Vidhan for trying what was suggested and getting back to us. We’re looking at this issue with priority.

1 Like

This looks to be a bundling issue with our keystore SDK. We are still investigating. Will post an update once we have a clear idea of what the underlying problem is.



Steps to follow :

  • yarn remove @arcana/auth @arcana/keystore
  • yarn add
  • yarn add
  • Keystore SDK can be skipped since those functions are exported on auth SDK also.
  • yarn eject
  • yarn add crypto-browserify stream-browserify process buffer
  • Update config/webpack.config.js with the following.

    resolve: {
        fallback: {
            "crypto": require.resolve("crypto-browserify"),
            "stream": require.resolve("stream-browserify")
    plugins: [
      new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
  • Note that resolve and plugins key are on same level in the config, there is also resolve.plugin also and that is not where the code needs to be updated
  • Update your code to latest docs, the init can be like this for your code.
this.auth = new AuthProvider({
      appID: CONFIG.APP_ID,
      network: "testnet",
  • No need to provide oauthCreds anymore Let me know if you face any issues.

@Vidhan Can you also follow these steps and see if it fixes your issue?

Yes. It’s working. Thank you

I downgraded react-scripts to 4.0.3 and it’s working. Thanks for the solution though :raised_hands: