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:
src/index.js
import { ethers } from 'ethers';
import { SiweMessage } from 'siwe';
​
const domain = window.location.host;
const origin = window.location.origin;
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
​
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() {
message = await createSiweMessage(
await signer.getAddress(),
'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:
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
node src/index.js
In a separate terminal, start the frontend by running the following command and visit the URL printed to the console:
cd siwe-frontend && npm run dev
4. 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.
Copy link