Implement Sign-In with Ronin

Overview

Sign-In with Ronin is a standard extended from Sign-In with Ethereum (SIWE) to help users sign in to your dApp easily, providing a better user experience and improved security.

Before you start

Before you implement sign-in with Ronin, make sure you have npm or yarn for package installation.

Install a dependency

The only dependency is the siwe package. It helps you generate a formatted sign-in message more easily.

1. Install the package using yarn or npm:

yarn add siwe@1.1.6 ethers@5.6.9

npm i siwe@1.1.6 ethers@5.6.9

2. Import the package in your component:

import { SiweMessage } from "siwe";

Generate a SIWE message

The following example shows how to generate a Sign-In with Ethereum message using the siwe package.

Live Editor

function SIWERequest() {
  const [signature, setSignature] = useState()
  
  async function onClickSignIn() {
    const provider = window.ronin.provider
    const accounts = await provider.request({ method: "eth_requestAccounts" })
    if(!accounts) {
      return
    }
    const currentAccount = accounts[0]
  
    const currentDate = new Date()
    currentDate.setDate(currentDate.getDate() + 1)
    
    const siweMessage = new SiweMessage({
      domain: window.location.hostname,
      address: currentAccount,
      uri: window.location.origin,
      version: "1",
      chainId: 2020,
      nonce: "12345678",
      statement:
        "I accept the dApp's Terms of Service: https://example-dapp.com/terms-of-use",
      expirationTime: currentDate.toISOString(),
    })

    const sig = await provider.request({ method: "personal_sign", params: [siweMessage.toMessage(), currentAccount]})
    setSignature(sig)
  }
  
  if (signature) {
    return (
      <div>
        <div>🎉 Congratulations! You are signed in.</div>
        <button onClick={() => setSignature(undefined)}>Reload</button>
      </div>
    )
  }
  
  return (
    <button onClick={onClickSignIn}>Sign in with Ronin</button>
  )
}

Result

Loading...