Request proofs from your user on your React project
The Sismo Connect React package is a wrapper of the Sismo Connect client package which is a package built on top of the Sismo Data Vault app (the prover) to easily request proofs from your users. It is strongly advised to read about the Sismo Connect client package to understand the React package.
Installation
Install the Sismo Connect React package in your front end with npm or yarn:
# with npmnpminstall@sismo-core/sismo-connect-react# with yarnyarnadd@sismo-core/sismo-connect-react
Make sure to have at least v18.15.0 as Node version. You can encounter issues with ethers dependencies if not.
Usage
Configuration
The first step for integrating Sismo Connect in your front end is to create a SismoConnectClientConfig like in the client package. This config will require an appId and can be customized with optional fields. You can go to the Sismo Factory to create a Sismo Connect App and get an appId (here is a tutorial).
import { SismoConnect, SismoConnectConfig } from"@sismo-core/sismo-connect-react";constconfig:SismoConnectConfig= {// you will need to get an appId from the Factory appId:"0xf4977993e52606cfd67b7a1cde717069",}
You can learn more about the Sismo Connect Client config in the client package.
Sismo Connect button
To easily integrate Sismo Connect into your front end, you can use the Sismo Connect button. Clicking on this button will redirect your users to the Sismo Data Vault app, where they can generate their proofs.
After users generate their proofs, they will be automatically redirected back to your app with a Sismo Connect Response containing the generated proofs.
To integrate it you have access through the package to the SismoConnectButton component.
import { SismoConnectButton, AuthType, SismoConnectConfig, SismoConnectResponse } from "@sismo-core/sismo-connect-react";
constconfig:SismoConnectConfig= { appId:"0xf4977993e52606cfd67b7a1cde717069",}<SismoConnectButton // the client config created config={config}// request a proof of account ownership // (here Vault ownership) auth={{authType:AuthType.VAULT}}// request a proof of group membership // (here the group with id 0x42c768bb8ae79e4c5c05d3b51a4ec74a) claim={{groupId:"0x42c768bb8ae79e4c5c05d3b51a4ec74a"}}// request a message signature signature={{message:"Your message"}}// a response containing his proofs onResponse={async (response:SismoConnectResponse) => {//Send the response to your server to verify it//thanks to the @sismo-core/sismo-connect-server package }} onResponseBytes={async (bytes:string) => {//Send the response to your contract to verify it//thanks to the @sismo-core/sismo-connect-solidity package }}/>// You can also create several auth and claim requests // in the same button<SismoConnectButton config={config}// request multiple proofs of account ownership // (here Vault ownership and Twitter account ownership) auths={[ {authType:AuthType.VAULT}, {authType:AuthType.TWITTER}, ]}// request multiple proofs of group membership // (here the groups with id 0x42c768bb8ae79e4c5c05d3b51a4ec74a and 0x8b64c959a715c6b10aa8372100071ca7) claims={[ {groupId:"0x42c768bb8ae79e4c5c05d3b51a4ec74a"}, {groupId:"0x8b64c959a715c6b10aa8372100071ca7"} ]} signature={{message:"Your message"}} onResponse={async (response:SismoConnectResponse) => {//Send the response to your server to verify it//thanks to the @sismo-core/sismo-connect-server package }} onResponseBytes={async (bytes:string) => {//Send the response to your contract to verify it//thanks to the @sismo-core/sismo-connect-solidity package }}/>
After your users generate the proofs, they will be automatically redirected back to your app. The onResponse and onResponseBytes props will allow you to get the response containing the proofs.
To get the response of your users after his redirection without using the SismoConnectButton you can also use the useSismoConnect hook. This allows you to redirect your users to a page other than the page with the button integrated.
The useSismoConnect hook also exposes the Sismo Connect variable which provides access to all the features available in the Sismo Connect Client package.
This package is a wrapper of the Sismo Connect Client package, which means that all the core concepts such as SismoConnectClientConfig, AuthRequest,ClaimRequest, SignatureRequest, and SismoConnectResponse are the same as in the client package. If you need to explore these concepts in detail, we advise you to refer to the Sismo Connect Client page, which provides more detailed information.
SismoConnectButton
The SismoConnectButton component will allow you to easily request proofs from your user for a groupId they should be a member of.
<SismoConnectButton // the client config created config={config}// request a proof of account ownership // (here Vault ownership) auth={{authType:AuthType.VAULT}}// if you need mutiple auth requests auths={[...]}// request a proof of group membership // (here the group with id 0x42c768bb8ae79e4c5c05d3b51a4ec74a) claim={{groupId:"0x42c768bb8ae79e4c5c05d3b51a4ec74a"}}// if you need multiple claim requests claims={[...]}// request a message signature signature={{message:"Your message"}}// a boolean putting the button in loading mode if set to true loading={loading}// Some text to display on the button text={text}// gets users response holding proofs when users are redirected from the vault app onResponse={async (response:SismoConnectResponse) => {//Send the response to your server to verify it//thanks to the @sismo-core/sismo-connect-server package }}// gets users response holding proofs when users are redirected from the vault app// the response is encoded as bytes to easily send to smart contracts onResponseBytes={async (bytes:string) => {//Send the response to your contract to verify it//thanks to the @sismo-core/sismo-connect-solidity package }}// url to redirect your users to when their proofs are generated callBackUrl={"https://my-path.xyz"}/>
Props
Customization
If you want to customize the style of your button, you can use 3 CSS classes SismoConnectButton, sismoConnectButtonText, and sismoConnectButtonLogo.
An overrideStyle prop is also available on the component which allows you to override the same style as the class sismoConnectButton.
Here is an example of a custom button:
//Added in the index.css of a React app.sismoConnectButton {background:red !important;}.sismoConnectButtonText {color:blue !important;}.sismoConnectButtonLogo {display:none}
useSismoConnect
The useSismoConnect hook makes it easy for you to obtain the response containing the user proof, and it provides access to all functions exposed by the Sismo Connect client instance.
config (optional but must at least provide this config or an appId)
SismoConnectClientConfig
The config allows you to fully customize your Sismo Connect integration.
appId (optional but must at least provide this appId or a config)
string
appId of your Sismo Connect app. Go on the Sismo Factory to register your appId.
auth
AuthRequest
The AuthRequest object holds all the information needed to generate a proof of account ownership.
auths
AuthRequest[]
Aggregation of AuthRequest
claim
ClaimRequest
The ClaimRequest object holds all the information needed to generate a proof of group membership.
claims
ClaimRequest[]
Aggregation of ClaimRequest
signature
string
Message to sign in the Vault
loading (optional)
boolean
This property allows you to disable the button and replace the badge icon with a loader.
[deprecated] verifying (optional)
boolean
This prop allows you to trigger the loading of the button.
text
string
This property allows to replace the text of the button.
onResponse (optional)
(response: SismoConnectResponse) ⇒ void
Return a response that contains the proofs generated by your users that must be sent to your backend and verified thanks to the @sismo-core/sismo-connect-server package.
onResponseBytes (optional)
(bytes: string) => void
Return a response in bytes usable in your contracts.
callbackUrl (optional)
string
By default, the redirection will send you back to the same page as your button. The callback url props will send your user to another url. See useSismoConnect to get the user response.
[deprecated] callbackPath (optional)
string
By default, the redirection will send you back to the same page as your button. The callback path props will send your user to another path. See useSismoConnect to get the user response.
overrideStyle
React.CSSProperties
Override style of the Sismo Connect
config
SismoConnectClientConfig
The SismoConnectClientConfig allows you to fully customize your Sismo Connect integration.
response
SismoConnectResponse | null
The response contains the proofs generated by your users that must be sent to your backend and verified thanks to the @sismo-core/sismo-connect-server package.
responseBytes
string | null
The response contains the proofs generated by your users that must be sent to your contract.
sismoConnect
SismoConnectClient
Sismo Connect instance with the client configuration.