Use-sui-zklogin: seamless zkLogin integration for react

zkLogin
1

Excited to share use-sui-zklogin https://github.com/pixelbrawlgames/use-sui-zklogin with the Sui community!

It’s a React hook that makes zklogin really simple to integrate to your project! We’ve been using this library to handle zkLogin in our [very first SUI project and wanted to open source it for everyone to use it.

It’s as simple as:

import { useZkLogin, beginZkLogin } from 'use-sui-zklogin';
import type { OpenIdProvider, ProviderConfig } from 'use-sui-zklogin';

// Centralize provider configuration
const providersConfig:ProviderConfig = {
	google: {
		authUrl: 'https://accounts.google.com/o/oauth2/v2/auth',
		clientId: 'CLIENT_ID',
	},
	// Add more providers here if needed
};

const MyComponent = () => {
	const { isLoaded, address, accounts } = useZkLogin({
		urlZkProver: 'https://prover-dev.mystenlabs.com/v1',
		generateSalt: async () => {
			// Replace with your salt generation logic
			return { salt: Date.now() };
		},
	});

	// Handle ZK login with the selected provider
	const handleZkLogin = async (provider: OpenIdProvider) => {
		await beginZkLogin({
			suiClient: /* Your Sui Client */,
			provider,
			providersConfig,
		});
	};

	return (
		<button onClick={() => handleZkLogin('google')} disabled={!isLoaded}>
			{isLoaded ? 'Sign in with Google' : 'Loading...'}
		</button>
	);
};

Install: npm install use-sui-zklogin
Source: https://github.com/pixelbrawlgames/use-sui-zklogin
Demo: https://pixelbrawlgames.github.io/use-sui-zklogin

Feedbacks very welcome :slight_smile: