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 =;
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({
        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.'
    signature = await signer.signMessage(message);

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>
  <meta charset="utf-8" />
  <title>SIWE Quickstart</title>

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

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.

Last updated