EnokiFlow

Manages state for Enoki authentication.

Initializing

To use Enoki Flow, import EnokiFlow from @mysten/enoki and create a new instance with apiKey set to a public API key from the list in Enoki Developer Portal.

import { EnokiFlow } from '@mysten/enoki';
 
const enokiFlow = new EnokiFlow({
	apiKey: '<YOUR_API_KEY>',
});

Authentication flow

With EnokiFlow initiated, you can use its available methods to complete authentication.

Initiate sign in

Call createAuthorizationURL to construct a signin URL:

const googleSignInUrl = enokiFlow.createAuthorizationURL({
	provider: 'google',
	clientId: 'your-client-id',
	redirectUrl: 'your-redirect-url',
});
 
// Redirect the browser to the google sign-in URL:
window.location.href = googleSignInUrl;

You can find the clientId and redirectUrl from each provider. See the zkLogin process for configuring an OpenID provider to find where that information is stored for each provider.

Handle sign in response

After the user signs in, the browser redirects to the redirectUrl you specified. This page must be the same as the one set with each provider. When a user reaches this page after a successful sign in, you can call handleAuthCallback to parse the response:

enokiFlow.handleAuthCallback();

Resetting auth state

Use the logout method to reset the Enoki state. Typically, you attach this method to an interactive element that is accessible only by users that are currently authenticated.

enokiFlow.logout();

Reading state

State is stored using nanostores, which is a library-agnostic state management solution. You should start with one of their integrations.

If you want to read the state directly, you can subscribe to the $state on the EnokiFlow instance:

// Subscribe to changes in state:
enokiFlow.$state.subscribe((state) => {
	// Do something with `state`
});