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 { 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:

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 start

In a separate terminal, start the frontend by running the following command and visit the URL printed to the console: 

cd siwe-frontend
yarn start

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.

PreviousImplement the BackendNextImplement Sessions

Last updated