Integrate Protcol kit on React App

Safe Development
1

Hello,

I’m working on a React + Vite project where I want to integrate Safe’s Protocol Kit Protocol Kit – Safe Docs .

According to the documentation, the integration example requires using a private key to sign transactions. However, in a frontend application, storing or handling a private key directly in the code is not secure.

My question is:

Is there a way to integrate the Protocol Kit without directly handling a private key in the frontend?
For example, by using the user’s wallet via WalletConnect, MetaMask, Rabby, or other Ethereum providers, so that the signing is done directly by the wallet instead of a private key exposed in the code.

Thank you in advance for any advice or examples of best practices.

2

Actually, you should use an EIP-1193 compatible provider, like window.ethereum in front end project.

You need to know a core principle: the safe wallet requires a **signer**, which can be derived from a private key(backend) or provided by the front-end wallet.

Type: Eip1193Provider means front end wallet like metamask or any wallet that has implemented the EIP-1193 standard

1 Like