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.
- 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
- 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.providerconst 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...
Was this helpful?
Happy React is loading...