Can't use Relayer inside Create React App?

Support Defender
1

Using the “defender-relay-client/lib/ethers” inside my create react app causes the following error:

Access to XMLHttpRequest at ‘https://api.defender.openzeppelin.com/relayer/jsonrpc’ from origin ‘localhost’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The ‘Access-Control-Allow-Origin’ header has a value ‘https://defender.openzeppelin.com’ that is not equal to the supplied origin.

2

Hey @jrocco2! The relayer client is not meant to be used from a dapp, since it requires embedding the API key and secret into it, so anyone who can access your dapp would be able to extract them and freely control your relayer - which you definitely don’t want to.

If you want to send txs from your dapp via your relayer, a good pattern is to set up an Autotask with a webhook that receives requests from your end users, validates the request, and then in turn calls the relayer to send the requested tx. This allows you to whitelist whichever txs you need for your dapp.

Check out this workhsop where we used that pattern for implementing gasless meta txs!

3

Thank you for your response! I’m now using Autotask to talk to my Relay. I’m using Axios and the unique link generated by defender. Now all my tasks are getting through and executing successfully on the defender side. However, when the Autotask is finished I return the transaction hash like this: return { transactionHash : receipt.transactionHash }. But it only comes back sometimes other times I get an error in the client saying Cors Error MissingAllowOriginHeader even though Defender executes the task perfectly every time. Any thoughts on what is causing it to break 50% of the time for the same task?

5

Also receiving this error when i try in a different browser (Firefox)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.defender.openzeppelin.com/autotasks/… (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

6

I’m trying to use Relayer when I try to import Relayer into my React App but im getting this error…

  const { DefenderRelayProvider } = require('defender-relay-client/lib/web3');
... 
   6 | exports.authenticate = void 0; // https://github.com/aws-amplify/amplify-js/issues/7098   
   7 | // fix for amazon-cognito-identity   
   8 | >  
   9 | global.crypto = require('crypto');

am I doing something wrong or should I not be using Relayer inside of React all together?

7

Probably better not to do it at all. According to @spalladino. But just as an FYI if you comment out “global.crypto = require(‘crypto’);” it will work. But then you will hit the CORS error like me so best not to bother.

1 Like
8

Indeed, the relayer client is not intended for browser usage. Do you mind sharing what you are building? Perhaps we can help in devising a solution!

9

Yea what I wanted to do is importing in Relayer into my react app, and use it as a gas station, so my users can connect to and use my Contract without using their own wallet and without paying for their own transactions with gas all done from the frontend without a server backend

10

Do you mind sending some additional info to defender-support, such as the autotask ID (you can get it from the URL), so we can look into it?

11

You definitely want to look at this workshop then:

1 Like