Enoki zkLogin (Google) Integration

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• src/lib/SuiModule/SuiModule.svelte
• src/lib/SuiModule/types.ts
• src/routes/+page.svelte
• src/lib/ConnectModal/ConnectModal.svelte
• package.json
• src/lib/index.d.ts

The Enoki zkLogin (Google) integration provides a seamless way for users to sign into a Sui dApp using their Google account. This feature is built upon Mysten Labs' Enoki service and the @mysten/enoki SDK, offering a non-custodial wallet experience without requiring users to manage seed phrases or install a browser extension. The integration is enabled and configured through the main SuiModule component.

When configured, a "Sign in with Google" option appears in the wallet connection modal. The library handles the OAuth flow, wallet registration, and session management. It also provides helper functions to check if the current wallet is a zkLogin wallet and to retrieve session metadata.

Sources: README.md:104-106, src/lib/SuiModule/SuiModule.svelte:170-213, package.json:80

Configuration

To enable Google zkLogin, you must provide a zkLoginGoogle configuration object to the SuiModule component. This object contains the necessary credentials and settings to communicate with Enoki and Google's OAuth service.

Sources: README.md:104-106, src/lib/SuiModule/SuiModule.svelte:1417-1418

ZkLoginGoogleConfig Object

The configuration is defined by the ZkLoginGoogleConfig type.

// src/lib/SuiModule/types.ts

export interface ZkLoginGoogleConfig {
	apiKey: string;
	googleClientId: string;
	network?: SuiNetwork;
	redirectUrl?: string;
	redirectUrls?: string[];
}

Sources: src/lib/SuiModule/types.ts:98-105

The properties of this object are detailed below:

Property	Type	Required	Description
apiKey	string	Yes	The API key obtained from the Enoki Portal.
googleClientId	string	Yes	The Google OAuth Client ID, which typically ends with .apps.googleusercontent.com.
network	'mainnet' | 'testnet' | 'devnet'	No	The Sui network to use. Defaults to mainnet.
redirectUrl	string	No	A single, specific URL for the OAuth redirect.
redirectUrls	string[]	No	A list of allowed redirect URLs. The library will pick the most suitable one.

Sources: README.md:113-120, src/lib/SuiModule/types.ts:98-105

Example Usage

Here is a basic example of how to configure the SuiModule for zkLogin.

<script>
	import { SuiModule, ConnectButton } from 'sui-svelte-wallet-kit';

	const zkLoginGoogle = {
		apiKey: 'ENOKI_API_KEY',
		googleClientId: 'GOOGLE_CLIENT_ID.apps.googleusercontent.com',
		network: 'testnet'
	};
</script>

<SuiModule {zkLoginGoogle} autoConnect={true}>
	<ConnectButton />
</SuiModule>

Sources: README.md:113-125, src/routes/+page.svelte:255-260

Initialization and Validation

When the SuiModule is initialized with a zkLoginGoogle configuration, it performs a series of setup and validation steps.

Sources: src/lib/SuiModule/SuiModule.svelte:170-213

The following diagram illustrates the initialization flow.

This diagram shows the logic for validating the Enoki configuration and probing the API key.
Sources: src/lib/SuiModule/SuiModule.svelte:170-213, 1262-1290

Key Initialization Steps

1. Configuration Check: The module first checks if zkLoginGoogle.apiKey and zkLoginGoogle.googleClientId are provided. If not, an error is logged.
   Sources: src/lib/SuiModule/SuiModule.svelte:176-184
2. Suspicious Config Check: It performs a basic sanity check on the credentials. An API key shorter than 16 characters or a Google Client ID that doesn't end with .apps.googleusercontent.com is flagged as suspicious, and an error is logged.
   Sources: src/lib/SuiModule/SuiModule.svelte:185-197, 1104-1116
3. Register Enoki Wallets: If the configuration seems valid, it calls registerEnokiWallets from the @mysten/enoki SDK. This function injects the "Sign in with Google" wallet provider into the Wallet Standard registry, making it discoverable.
   Sources: src/lib/SuiModule/SuiModulesvelte:201-213
4. API Key Probe: The module sends a GET /v1/app request to the Enoki API endpoint to validate the apiKey. This provides early feedback on the key's validity. If the probe returns a 401 or 403 status, the "Sign in with Google" option is hidden from the ConnectModal.
   Sources: src/lib/SuiModule/SuiModule.svelte:1262-1290, 1435-1442

Redirect URL Handling

The integration automatically determines the best OAuth redirect URL. It prioritizes URLs from the zkLoginGoogle config (redirectUrl or redirectUrls) and falls back to a safe, auto-generated URL corresponding to the application's root path.

The logic for selecting the redirect URL is as follows:

1. Use redirectUrl if it's a valid absolute URL.
2. If not, search redirectUrls for a valid URL, preferring one with the same origin as the current page.
3. If no suitable URL is found in the config, generate a safe URL from window.location pointing to the root path (/).

Sources: src/lib/SuiModule/SuiModule.svelte:72-149

User Authentication Flow

The user initiates the zkLogin flow by selecting "Sign in with Google" from the ConnectModal.

The sequence diagram below shows the high-level interaction.

This diagram outlines the steps from user action in the UI to the final connected state managed by SuiModule.
Sources: src/lib/ConnectModal/ConnectModal.svelte:120-132, src/lib/SuiModule/SuiModule.svelte:853-864, 1464-1471

API and Helpers

The library exports several functions to interact with the zkLogin wallet after connection.

Sources: src/lib/index.d.ts:19-20

Function	Description
isZkLoginWallet()	Returns true if the currently connected wallet is an Enoki zkLogin wallet. It checks for the presence of the enoki:getSession feature on the wallet adapter.
getZkLoginInfo()	Asynchronously retrieves the session and metadata for the current zkLogin wallet. Returns an object with session and metadata properties, or null if not a zkLogin wallet.

Sources: src/lib/SuiModule/SuiModule.svelte:1119-1143, README.md:154-155

Usage Example

After a user connects with Google, you can retrieve their session information.

<script>
	import { useCurrentAccount, isZkLoginWallet, getZkLoginInfo } from 'sui-svelte-wallet-kit';
	import type { ZkLoginInfo } from 'sui-svelte-wallet-kit';

	const account = $derived(useCurrentAccount());
	let zkInfo = $state<ZkLoginInfo | null>(null);

	$effect(async () => {
		if (account && isZkLoginWallet()) {
			const info = await getZkLoginInfo();
			zkInfo = info;
			console.log('zkLogin session/metadata:', info);
		} else {
            zkInfo = null;
        }
	});
</script>

{#if zkInfo}
	<div class="zklogin-box">
		<strong>zkLogin (Enoki)</strong>
		{#if zkInfo.metadata}
			<p><strong>Provider:</strong> {zkInfo.metadata?.provider || 'N/A'}</p>
		{/if}
		{#if zkInfo.session}
			<p><strong>Session:</strong></p>
			<pre class="zk-json">{JSON.stringify(zkInfo.session, null, 2)}</pre>
		{/if}
	</div>
{/if}

Sources: README.md:462-483, src/routes/+page.svelte:145-156, 353-368

Summary

The Enoki zkLogin (Google) integration is a powerful feature of sui-svelte-wallet-kit that abstracts the complexity of social logins for Sui dApps. By providing a simple configuration object to the SuiModule, developers can enable a familiar and user-friendly authentication method. The library handles credential validation, wallet registration, the OAuth flow, and provides helper functions to access zkLogin-specific session data, significantly lowering the barrier to entry for new users in the Sui ecosystem.