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: https://neross.netlify.app

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

Supporting Material (Screenshot/Video/Logs):

With localhost:3000:



With neross.netlify.app:

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.

2 Likes

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.

2 Likes

@nrs.andrew

Steps to follow :

  • yarn remove @arcana/auth @arcana/keystore
  • yarn add https://testnet-dev.s3.ap-south-1.amazonaws.com/arcana-auth-0.0.10.tgz
  • yarn add https://testnet-dev.s3.ap-south-1.amazonaws.com/arcana-keystore-0.0.8.tgz
  • 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.
webpack.config.js

{
...
    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",
      redirectUri: `${CONFIG.APP_URL}${AUTH_ROUTES.AUTH_REDIRECT}`,
});
  • 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: