React-sui-zk-login-kit NPM

✨ Link to Demo ✨

📺 Youtube video guide 📺

react-sui-zk-login-kit

React Kit for seamless ZK Login integration for Sui blokchain

Installation

npm install react-sui-zk-login-kit react -S

yarn add react-sui-zk-login-kit react

Usage

For Next JS

use Provider and Component with 'use-client'
if experience problem with default remove hash from url try "disableRemoveHash" prop

Example Usage in Your React App

App.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 (
        <ZKLoginProvider client={suiClient}>
            <Content/>
        </ZKLoginProvider>
    )
}

export default App;

Content.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 (
        <ZKLogin
            providers={providers}
            proverProvider={SUI_PROVER_ENDPOINT}
        />
    )
}

Documentation

Types

`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<string \\| void>`	Executes a Sui blockchain transaction.
`client`	`SuiClient`	The Sui blockchain client instance.
`decodedJwt`	`JwtPayload \\| null`	Decoded JWT from used Oauth	Decoded JWT payload.