A React kit for SUI zk login integration with components and hooks.
npm install react-sui-zk-login-kit

React Kit for seamless ZK Login integration for Sui blokchain
1. Installation
2. Usage
3. Documentation
- Types
- Functions
- Error Handling
4. Contributing
5. About
---
``bash`
npm install react-sui-zk-login-kit react -S
`bash`
yarn add react-sui-zk-login-kit react
---
#### For Next JS
- use Provider and Component with 'use-client'
- if experience problem with default remove hash from url try "disableRemoveHash" prop
App.tsx
`tsx
import {SuiClient} from '@mysten/sui/client';
import {Content} from "./Content";
import {ZKLoginProvider} from 'react-sui-zk-login-kit';
const FULLNODE_URL = "https://fullnode.devnet.sui.io/";
const suiClient = new SuiClient({url: FULLNODE_URL});
function App() {
return (
)
}
export default App;
`
Content.tsx
`tsx
import {useEffect} from "react";
import {generateRandomness} from "@mysten/sui/zklogin";
import {ZKLogin, useZKLogin} from "react-sui-zk-login-kit";
const SUI_PROVER_ENDPOINT = 'https://prover-dev.mystenlabs.com/v1';
// values can be stored in .env
const providers = {
google: {
clientId: "YOUR_GOOGLE_CLIENT_ID",
redirectURI: "YOUR_REDIRECT_URI",
},
twitch: {
clientId: "YOUR_TWITCH_CLIENT_ID",
redirectURI: "YOUR_REDIRECT_URI",
}
}
export const Content = () => {
const {encodedJwt, userSalt, setUserSalt, address, logout} = useZKLogin();
useEffect(() => {
if (encodedJwt) {
// make you request to your server
// for recive useSalt by jwt.iss (issuer id)
const requestMock = new Promise(
(resolve): void =>
resolve(localStorage.getItem("userSalt") || generateRandomness())
);
requestMock.then(salt => setUserSalt(String(salt)))
}
}, [encodedJwt]);
return (
proverProvider={SUI_PROVER_ENDPOINT}
/>
)
}
`
---
#### ZKLogin Component Props
| Name | Type | Description |
|----------------------|--------------|---------------------------------------------------------------------|
| providers | Providers | OAuth providers configuration. |proverProvider
| | string | URL of the prover service for ZK proofs. |title?
| | string | Title text for the component. |subTitle?
| | string | Subtitle text for the component. |loadingText?
| | string | Loading text |errorText?
| | string | Error text |userSalt?
| | string | Optional user-specific salt. |observeTokenInURL?
| | boolean | default - true Observer token in URL |disableRemoveHash?
| | boolean | default - false (Mostly for NextJS) Disable removing hash from url. |onSuccess?
| | () => void | On Success login hook | Decoded JWT payload. |
#### useZKLogin Hook Props Object
| Name | Type | Description |
|------------------------|--------------|----------------------------------------------|
| onTransactionFailed? | () => void | Optional, hook on transaction failed execute |
#### useZKLogin Hook Return
| Name | Type | Description |
|----------------------|---------------------------------------------------------|---------------------------------------------|
| encodedJwt | string \| null | JWT string from the authentication process. |userSalt
| | string | User-specific salt. |address
| | string \| null | Address | User's Sui blockchain address. |logout
| | () => void | Function to log out the user. |setUserSalt
| | (value: string) => void | Set new user salt | Function to set the user salt. |keypair
| | Ed25519Keypair \| null | User keypair | Ephemeral keypair for cryptographic operations. |executeTransaction
| | (transaction: Transaction) => Promise | Executes a Sui blockchain transaction. |client
| | SuiClient | The Sui blockchain client instance. |decodedJwt
| | JwtPayload \| null` | Decoded JWT from used Oauth | Decoded JWT payload. |
---
Contributions are welcome! Please fork the repository and submit a pull request with detailed descriptions of your
changes.
---