Skip to main content

Implement Sign-In with Ronin


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
  1. 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) {
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",
"I accept the dApp's Terms of Service:",
expirationTime: currentDate.toISOString(),
const sig = await provider.request({ method: "personal_sign", params: [siweMessage.toMessage(), currentAccount]})
if (signature) {
return (
<div>🎉 Congratulations! You are signed in.</div>
<button onClick={() => setSignature(undefined)}>Reload</button>
return (
<button onClick={onClickSignIn}>Sign in with Ronin</button>
Was this helpful?
Happy React is loading...