A decentralized application built with SvelteKit that allows users to paste a Sign-In with Ethereum (SIWE) message, sign it using their wallet, and get the resulting hash.
- Wallet Connection: Connect your Ethereum wallet (MetaMask, etc.)
- SIWE Message Signing: Paste and sign SIWE messages
- Hash Generation: Get the cryptographic hash of your signed message
- Multilingual Support: Available in English, Russian, and Chinese
Sign-In with Ethereum (SIWE) is a authentication method that allows users to securely authenticate using their Ethereum wallet. Instead of traditional username/password combinations, SIWE leverages cryptographic signatures to verify identity without sharing sensitive information. This provides:
- Self-sovereign identity - You control your digital identity with your wallet
- No password management - No need to remember or store passwords
- Phishing resistance - Cryptographic signatures are more resistant to common attacks
- Cross-platform identity - Use the same wallet across multiple services
- Web3 Authentication - Log into dApps and services without creating new accounts
- Proof of Ownership - Verify ownership of an Ethereum address
- Authorization - Grant permission to applications to perform actions on your behalf
- Message Verification - Demonstrate a message came from a specific Ethereum address
The application implements SIWE using the following flow:
- Creates a standard SIWE message (following EIP-4361)
- Passes this message to the user's wallet (MetaMask, etc.)
- The wallet displays the message for user approval
- When approved, the wallet generates a cryptographic signature
- The application verifies this signature against the original message
- If valid, the signature and message hash can be used for authentication purposes
The verification can be performed by any service that understands the SIWE protocol, making this a powerful cross-platform identity solution.
-
Clone the repository:
git clone https://github.com/yourusername/siwe-signer.git cd siwe-signer -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173
npm run buildThis will create a build directory with all static files needed for deployment.
npm run previewYou can deploy this application to any static hosting service:
- Vercel
- Netlify
- GitHub Pages
- AWS S3
- Google Cloud Storage
- Any standard web hosting service
Simply upload the contents of the build directory to your hosting provider.
- Frontend: Svelte & SvelteKit - A lightweight and efficient frontend framework
- Web3 Integration: ethers.js - For Ethereum wallet connectivity and message signing
- SIWE Protocol: siwe - Sign-In with Ethereum implementation
-
WalletConnector Component:
- Manages connection to Ethereum wallets
- Displays connection status and account information
-
MessageSigner Component:
- Provides textarea for entering SIWE messages
- Handles message signing with connected wallet
- Displays signature and message hash
-
LanguageSwitcher Component:
- Allows users to switch between supported languages
- Automatically detects browser language
- User connects their Ethereum wallet
- User inputs or pastes a SIWE message into the textarea
- Application processes the message and prepares it for signing
- User signs the message using their connected wallet
- Application displays the signature and corresponding hash
A standard SIWE message follows this format:
${domain} wants you to sign in with your Ethereum account:
${address}
${statement}
URI: ${uri}
Version: ${version}
Chain ID: ${chainId}
Nonce: ${nonce}
Issued At: ${issuedAt}
- Always review the message content before signing
- This application does not store your private keys
- Your wallet will prompt you to confirm each signature request
- Signing messages does not require gas fees or token transfers
- Node.js (v16+)
- npm or yarn
- An Ethereum wallet (MetaMask, etc.)
To customize the build for different environments, edit the svelte.config.js file:
// For relative paths (useful for local file hosting)
paths: {
base: '',
}
// For SPA mode with client-side routing
adapter: adapter({
fallback: 'index.html'
}),Contributions are welcome! Please feel free to submit a Pull Request.
MIT