{"id":17733182,"url":"https://github.com/kristoferlund/ic-siwe-react-demo-rust","last_synced_at":"2025-04-10T05:53:02.204Z","repository":{"id":212452980,"uuid":"724538116","full_name":"kristoferlund/ic-siwe-react-demo-rust","owner":"kristoferlund","description":"React/Vite/Rust demo of the ic-siwe library, allowing ethereum apps to extend to the Internet Computer using Sign In with Ethereum (SIWE)","archived":false,"fork":false,"pushed_at":"2024-04-11T12:36:49.000Z","size":698,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-16T12:24:51.454Z","etag":null,"topics":["canister","dfinity","internet-computer","react","rust","typescript","vite"],"latest_commit_sha":null,"homepage":"https://shtr2-2iaaa-aaaal-qckva-cai.icp0.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kristoferlund.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-28T09:34:07.000Z","updated_at":"2024-08-21T14:42:38.971Z","dependencies_parsed_at":"2023-12-30T23:24:48.145Z","dependency_job_id":"fbc99c09-8b68-4380-bd53-bfddef18b38c","html_url":"https://github.com/kristoferlund/ic-siwe-react-demo-rust","commit_stats":null,"previous_names":["kristoferlund/ic-siwe-react-demo-rust"],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristoferlund%2Fic-siwe-react-demo-rust","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristoferlund%2Fic-siwe-react-demo-rust/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristoferlund%2Fic-siwe-react-demo-rust/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristoferlund%2Fic-siwe-react-demo-rust/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristoferlund","download_url":"https://codeload.github.com/kristoferlund/ic-siwe-react-demo-rust/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166927,"owners_count":21058480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canister","dfinity","internet-computer","react","rust","typescript","vite"],"created_at":"2024-10-25T23:01:54.843Z","updated_at":"2025-04-10T05:53:02.191Z","avatar_url":"https://github.com/kristoferlund.png","language":"TypeScript","funding_links":[],"categories":["Chain Fusion"],"sub_categories":["General"],"readme":"![](media/header.png)\n\n\u003e [!NOTE]  \n\u003e This version of the demo features a backend canister built in Rust. There is also a [TypeScript version](https://github.com/kristoferlund/ic-siwe-react-demo-ts) built using [Azle](https://github.com/demergent-labs/azle).\n\n✅ Sign in with Ethereum to interact with smart contracts (canisters) on the [Internet Computer](https://internetcomputer.org) (IC)!\n\n✅ Establish a one-to-one relationship between an Ethereum wallet and an IC identity.\n\n✅ Access the IC capabilities from Ethereum dapp frontends, create cross-chain dapps! Some of the features IC provide are:\n\n- Native integration with BTC and ETH\n- Twin tokens (ckBTC, ckETH)\n- Fast finality\n- Low transaction fees\n- HTTPS outcalls\n- Store large amounts of data cheaply\n- etc\n\nThis React demo application and template demonstrates how to login Ethereum users into an IC canister using the [ic-use-siwe-identity](https://github.com/kristoferlund/ic-siwe/tree/main/packages/ic-use-siwe-identity) hook and [ic-siwe-provider](https://github.com/kristoferlund/ic-siwe/tree/main/packages/ic_siwe_provider) canister.\n\nThe goal of the [ic-siwe](https://github.com/kristoferlund/ic-siwe) project is to enhance the interoperability between Ethereum and the Internet Computer platform, enabling developers to build applications that leverage the strengths of both platforms.\n\n## 👀 Try the live demo: \u003chttps://shtr2-2iaaa-aaaal-qckva-cai.icp0.io\u003e\n\n## Key features\n\nThe demo is buit using [Vite](https://vitejs.dev/) to provide a fast development experience. It also uses:\n\n- TypeScript\n- TailwindCSS\n- Wagmi/Viem Ethereum libraries\n- RainbowKit for Ethereum wallet integration\n\n## Table of contents\n\n- [👀 Try the live demo: https://shtr2-2iaaa-aaaal-qckva-cai.icp0.io](#-try-the-live-demo-httpsshtr2-2iaaa-aaaal-qckva-caiicp0io)\n- [Key features](#key-features)\n- [Table of contents](#table-of-contents)\n- [App components](#app-components)\n  - [Backend](#backend)\n  - [Frontend](#frontend)\n  - [IC SIWE Provider](#ic-siwe-provider)\n- [How it works](#how-it-works)\n- [Run locally](#run-locally)\n- [Details](#details)\n  - [IC SIWE Provider](#ic-siwe-provider-1)\n  - [Backend](#backend-1)\n  - [Frontend](#frontend-1)\n    - [SiweIdentityProvider](#siweidentityprovider)\n    - [AuthGuard](#authguard)\n    - [useSiweIdentity](#usesiweidentity)\n- [Updates](#updates)\n- [Contributing](#contributing)\n- [License](#license)\n\n## App components\n\nIf you are new to IC, please read the [Internet Computer Basics](https://internetcomputer.org/basics) before proceeding.\n\nFor a detailed description of the SIWE concepts, see the [SIWE specification, EIP-4361](https://eips.ethereum.org/EIPS/eip-4361).\n\nThis app consists of three main components:\n\n### Backend\n\nThe backend is a Rust based canister that, for demonstration purposes, implements some basic functionality for managing user profiles.\n\n### Frontend\n\nThe frontend is a React application that interacts with the backend canister. To be able to make authenticated calls to the backend canister, the frontend needs to have an identity.\n\n### IC SIWE Provider\n\nThe pre-built IC Siwe Provider is used to create an identity for the user. It is a a Rust based canister that implements the SIWE login flow. The flow starts with a SIWE message being generated and ends with a Delegate Identity being created for the user. The Delegate Identity gives the user access to the backend canister.\n\n## How it works\n\nThis is the high-level flow between the app components when a user logs in:\n\n1. The application requests a SIWE message from the `ic_siwe_provider` canister on behalf of the user.\n2. The application displays the SIWE message to the user who signs it with their Ethereum wallet.\n3. The application sends the signed SIWE message to the `ic_siwe_provider` canister to login the user. The canister verifies the signature and creates an identity for the user.\n4. The application retrieves the identity from the `ic_siwe_provider` canister.\n5. The application can now use the identity to make authenticated calls to the app canister.\n\n![Sign in with Ethereum - Login flow](/media/flow.png)\n\n## Run locally\n\n```bash\ndfx start --clean --background\nmake deploy-all\n```\n\n## Details\n\n### IC SIWE Provider\n\nThe `ic_siwe_provider` canister is pre-built and added to the project as a dependency in the [dfx.json](/dfx.json) file.\n\n```json\n{\n  \"canisters\": {\n    \"ic_siwe_provider\": {\n      \"type\": \"custom\",\n      \"candid\": \"https://github.com/kristoferlund/ic-siwe/releases/download/v0.1.1/ic_siwe_provider.did\",\n      \"wasm\": \"https://github.com/kristoferlund/ic-siwe/releases/download/v0.1.1/ic_siwe_provider.wasm.gz\"\n    },\n    ...\n  },\n  ...\n}\n```\n\nIts behavior is configured and passed as an argument to the canister `init` function. Below is an example of how to configure the canister using the `dfx` command line tool in the project [Makefile](/Makefile):\n\n```makefile\ndfx deploy ic_siwe_provider --argument \"( \\\n    record { \\\n        domain = \\\"127.0.0.1\\\"; \\\n        uri = \\\"http://127.0.0.1:5173\\\"; \\\n        salt = \\\"salt\\\"; \\\n        chain_id = opt 1; \\\n        scheme = opt \\\"http\\\"; \\\n        statement = opt \\\"Login to the app\\\"; \\\n        sign_in_expires_in = opt 300000000000; /* 5 minutes */ \\\n        session_expires_in = opt 604800000000000; /* 1 week */ \\\n        targets = opt vec { \\\n            \\\"$$(dfx canister id ic_siwe_provider)\\\"; \\\n            \\\"$$(dfx canister id backend)\\\"; \\\n        }; \\\n    } \\\n)\"\n```\n\nFor more information about the configuration options, see the [ic-siwe-provider](https://github.com/kristoferlund/ic-siwe/tree/main/packages/ic_siwe_provider) documentation.\n\n### Backend\n\nThe backend is a Rust based canister that, for demonstration purposes, implements some basic functionality for managing user profiles. It is also given an init argument - the `ic_siwe_provider` canister id - to be able to verify the identity of the user.\n\n```makefile\ndfx deploy backend --argument \"$$(dfx canister id ic_siwe_provider)\"\n```\n\n### Frontend\n\nThe frontend is a React application that interacts with the backend canister. To be able to make authenticated calls to the backend canister, the frontend needs an identity. The identity is retrieved from the `ic_siwe_provider` canister.\n\nThe frontend uses two other packages from the `ic-siwe` project to simplify logging in users and making authenticated calls to canisters:\n\n- [ic-use-siwe-identity](https://github.com/kristoferlund/ic-siwe/tree/main/packages/ic-use-siwe-identity) - React hook and context provider for easy frontend integration with SIWE enabled Internet Computer canisters.\n- [ic-use-actor](https://github.com/kristoferlund/ic-use-actor) - A React context provider for managing Internet Computer (IC) actors with enhanced features like type safety and request/response interceptors.\n\n#### [SiweIdentityProvider](src/frontend/src/main.tsx)\n\nThe application's root component is wrapped with `SiweIdentityProvider` to provide all child components access to the SIWE identity context.\n\n```jsx\n// main.tsx\n\nimport { SiweIdentityProvider } from 'ic-use-siwe-identity';\nimport { _SERVICE } from \"../../declarations/ic_siwe_provider/ic_siwe_provider.did\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  \u003cReact.StrictMode\u003e\n    // ...\n    \u003cSiweIdentityProvider\u003c_SERVICE\u003e\n      canisterId={canisterId}\n      idlFactory={idlFactory}\n    \u003e\n      // ... app components\n    \u003c/SiweIdentityProvider\u003e\n    // ...\n  \u003c/React.StrictMode\u003e,\n);\n```\n\n#### [AuthGuard](src/frontend/src/AuthGuard.tsx)\n\nAn `AuthGuard` component is used to protect routes that require the user to be logged in. It also makes sure to log out the user if they change ethereum wallet etc.\n\n#### [useSiweIdentity](src/frontend/src/components/login/LoginButton.tsx)\n\nTo initiate the login flow, the `login` function is called on the Use the `useSiweIdentity` hook.\n\n```jsx\n// LoginButton.tsx\n\nimport { useSiweIdentity } from \"ic-use-siwe-identity/react\";\n\nfunction LoginButton() {\n  const { login, clear, identity, ... } = useSiweIdentity();\n  // ...\n}\n```\n\n## Updates\n\nSee the [CHANGELOG](CHANGELOG.md) for details on updates.\n\n## Contributing\n\nContributions are welcome. Please submit your pull requests or open issues to propose changes or report bugs.\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristoferlund%2Fic-siwe-react-demo-rust","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristoferlund%2Fic-siwe-react-demo-rust","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristoferlund%2Fic-siwe-react-demo-rust/lists"}