Connect the Frontend
Here we learn how to update the frontend to send the signed messages to the server.
A completed version of the updated frontend can be found here (03_complete_app/frontend). This example uses the browser console to print messages, so it should be actively monitored.
1. Revisit the siwe-frontend directory, stop any running servers, and update src/index.js:
import { BrowserProvider } from 'ethers';
import { SiweMessage } from 'siwe';
const domain = window.location.host;
const origin = window.location.origin;
const provider = new BrowserProvider(window.ethereum);
const BACKEND_ADDR = "http://localhost:3000";
async function createSiweMessage(address, statement) {
const res = await fetch(`${BACKEND_ADDR}/nonce`);
const message = new SiweMessage({
domain,
address,
statement,
uri: origin,
version: '1',
chainId: '1',
nonce: await res.text()
});
return message.prepareMessage();
}
function connectWallet() {
provider.send('eth_requestAccounts', [])
.catch(() => console.log('user rejected request'));
}
let message = null;
let signature = null;
async function signInWithEthereum() {
const signer = await provider.getSigner();
message = await createSiweMessage(
await signer.address,
'Sign in with Ethereum to the app.'
);
console.log(message);
signature = await signer.signMessage(message);
console.log(signature);
}
async function sendForVerification() {
const res = await fetch(`${BACKEND_ADDR}/verify`, {
method: "POST",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message, signature }),
});
console.log(await res.text());
}
const connectWalletBtn = document.getElementById('connectWalletBtn');
const siweBtn = document.getElementById('siweBtn');
const verifyBtn = document.getElementById('verifyBtn');
connectWalletBtn.onclick = connectWallet;
siweBtn.onclick = signInWithEthereum;
verifyBtn.onclick = sendForVerification;
2. Update src/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SIWE Quickstart</title>
</head>
<body>
<div><button id='connectWalletBtn'>Connect wallet</button></div>
<div><button id='siweBtn'>Sign-in with Ethereum</button></div>
<div><button id='verifyBtn'>Send for verification</button></div>
</body>
</html>3. For this last step, you need to have both the frontend and backend running together. Start by running the backend server with the following command from the parent directory:
cd siwe-backend
yarn startIn a separate terminal, start the frontend by running the following command and visit the URL printed to the console:
cd siwe-frontend
yarn start4. Try to Sign-In with Ethereum by visiting the URL printed to the console, connecting your wallet, and signing in. You can now hit the Send for verification button to receive a true in the console.
Last updated