How to Transfer Sol from External Wallet to Connected Wallet in React

Question

I hope you're doing well. I'm currently working on a React app where users can withdraw rewards to their connected wallet. I want to ensure the security of the process and avoid exposing the private key on the frontend.

Here's the scenario:

Frontend Interaction: When a user clicks a button, I want to initiate the withdrawal process without exposing the private key.

Transaction Signing on Frontend: I'm looking for a secure way to sign the transaction on the frontend and then pass it to the backend.

Backend Handling (Node.js): The signed transaction should be received by the Node.js backend, where the actual transfer of Sol to the designated wallet will occur.

I'm seeking advice on the best practices for achieving this workflow. Any insights into securely signing transactions on the frontend and handling them on the backend in a React app would be greatly appreciated.

Thank you in advance for your help!

Best regards,

Answer 1

you have to ways to do it :

Either you create a program (smart contract), you put funds/token (what will be claimed) in a vault, and the program can sign and send the assets to the user who claims them.

Either you do it in a backend with javascript. In this case, you have to call your backend, create a transaction sign it with your private key (key needed for the transfer), send it back to the frontend, and make user sign it as well.

In any case, you should never, NEVER, put a private key in the frontend source. It's a security issue.

Let me know which way you want to go, and i can provide help here.