# @shinami/nextjs-zklogin > Next.js SDK for integrating with Sui zkLogin Latest version **0.5.0** (published 2026-07-22) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @shinami/nextjs-zklogin pnpm add @shinami/nextjs-zklogin yarn add @shinami/nextjs-zklogin bun add @shinami/nextjs-zklogin ``` ## Health **Score 55/100 (C)** — status: active. Positive: esm support; no vulnerabilities; has provenance. Warnings: low downloads; no types; pre 1.0. ## Facts | | | |---|---| | Version | 0.5.0 | | Published | 2026-07-22 | | First published | 2023-10-23 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | ESM | | Node | >=22 | | Dependencies | 5 | | Unpacked size | 109.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 9 | | Author | Shinami | | Maintainers | jasonxh | | Keywords | Next.js, Sui, zkLogin, auth, wallet | ## Links - npm: https://www.npmjs.com/package/@shinami/nextjs-zklogin - Repository: https://github.com/shinamicorp/shinami-typescript-sdk - Homepage: https://www.shinami.com/ - Issues: https://github.com/shinamicorp/shinami-typescript-sdk/issues - npm.io page: https://npm.io/package/@shinami/nextjs-zklogin ## Dependencies (5) - [jose](https://npm.io/package/jose.md) ^6.2.3 - [superstruct](https://npm.io/package/superstruct.md) ^2.0.2 - [iron-session](https://npm.io/package/iron-session.md) ^6.3.1 - [@shinami/clients](https://npm.io/package/@shinami/clients.md) ^0.12.0 - [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^5.0.5 ## Alternatives - [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads - [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads - [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads - [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads - [escher-request](https://npm.io/package/escher-request.md) — 545 weekly downloads ## Recent versions - 0.5.0 (latest) — 2026-07-22 - 0.4.1-alpha.1 (experimental) — 2024-07-16 - 0.4.1 — 2024-07-17 - 0.4.1-alpha.0 — 2024-07-15 - 0.4.0 — 2024-06-25 - 0.3.1 — 2024-05-21 - 0.3.0 — 2024-03-21 - 0.2.4 — 2024-02-13 - 0.2.3 — 2024-02-08 - 0.2.3-alpha.1 — 2024-02-05 - 0.2.3-alpha.0 — 2023-12-27 - 0.2.2 — 2023-12-13 - 0.2.1 — 2023-12-05 - 0.2.0 — 2023-11-17 - 0.1.0 — 2023-11-09 - … 14 more at https://npm.io/package/@shinami/nextjs-zklogin/versions ## README # Next.js zkLogin SDK [![npm version](https://badge.fury.io/js/@shinami%2Fnextjs-zklogin.svg)](https://badge.fury.io/js/@shinami%2Fnextjs-zklogin) Next.js SDK for integrating with [Sui zkLogin](https://docs.sui.io/concepts/cryptography/zklogin). This SDK aims to provide full-stack support for building user authentication and Sui transaction execution into your Next.js application, using zkLogin primitives. It aims to deliver a seamless and familiar user experience that blends the Web 2 and Web 3 parts of your application together. The following areas are covered: - Client-side React components and hooks for: - Initializing local zkLogin session state - Integrating with OpenID providers - Making auth API calls to the backend - Making transaction building and execution API calls to the backend - Implementing auth-protected pages with auto-redirection - Server-side API route handlers for: - User session / cookie management - Implementing auth API routes - Implementing auth-protected API routes - Implementing transaction building, sponsorship, and execution API routes - NOTE - the server-side SDK only works with Next.js [Pages Router](https://nextjs.org/docs/pages) for now. Support for [App Router](https://nextjs.org/docs/app) is planned. ## Getting started A Next.js [starter template](../../examples/nextjs-zklogin) has been provided to quickly get you off the ground using this SDK. You can follow the instructions over there to have a working example. Even if you are starting with an existing Next.js application, it's recommended to check out that example as a reference end-to-end implementation. ## High-level architecture Here is the intended architecture that can be achieved using this SDK: ![Architecture diagram](images/architecture.drawio.svg) Typical flow of signing in with zkLogin: ![Sign-in flow](images/signin.png) Typical flow of executing a sponsored transaction block: ![Sponsored tx flow](images/sponsored_tx.png) ## Key SDK components Please refer to inline documentations for more detailed information. ### From `@shinami/nextjs-zklogin/client` - `ZkLoginSessionProvider` - Root React component to provide zkLogin session state. - Must be used near the root of your component tree. - This component itself must be wrapped in a [TanStack `QueryClientProvider`](https://tanstack.com/query/latest/docs/react/reference/QueryClientProvider). - `withNewZkLoginSession` - React HOC for implementing the login page. - Resets local session state and prepares a new one. The new session state will be needed to get a new JWT from the OpenID providers. - `getGoogleAuthUrl`, `getFacebookAuthUrl`, `getTwitchAuthUrl`, `getAppleAuthUrl` - Helper function to compose the auth URLs for each OpenID provider. - You'll need to redirect your user to those URLs to complete a sign-in with them. - `withGoogleCallback`, `withFacebookCallback`, `withTwitchCallback`, `withAppleCallback` - React HOC for implementing the callback pages for each OpenID provider. - After a successful sign-in, the page will automatically issue a login request to your backend (default at `/api/auth/login`), and redirect the user to the original page they were trying to access. - `useZkLoginSession` - React hook to use data from the user's current zkLogin session. - The returned data could be one of these types: `ZkLoginSessionLoading`, `ZkLoginSessionActive`, `ZkLoginSessionInactive`. - `withZkLoginSessionRequired` - React HOC for implementing an auth-protected page. - User will be redirected to the login page (default at `/auth/login`) if they don't have an active session. - `apiTxExecMutationFn` - Helper function to generate [TanStack mutation](https://tanstack.com/query/latest/docs/react/guides/mutations) functions for end-to-end Sui transaction block execution. - Must be used on API routes implemented with `zkLoginSponsoredTxExecHandler` or `zkLoginTxExecHandler` from `@shinami/nextjs-zklogin/server/pages`. - `useLogout` - React hook for issuing a logout request to the auth API. - Alternatively, you can also redirect the user to the logout API route (default at `/api/auth/logout`). ### From `@shinami/nextjs-zklogin/server/pages` - `authHandler` - Implements auth API routes, by default at `/api/auth/login`, `/api/auth/logout`, `/api/auth/me`, `/api/auth/apple`. - `withZkLoginUserRequired` - Higher-order handler for implementing auth-protected API routes. - Requests would result in HTTP 401 if the user doesn't have an active session. - `withSession` - Higher-order handler for augmenting the wrapped handler with session state. - The session state is managed using [iron-session](https://github.com/vvo/iron-session), and this is just a thin wrapper on top of `withIronSessionApiRoute`. - `zkLoginTxExecHandler` - Implements API routes for building and executing a Sui transaction block. - Two routes are implemented under the hood: - `[base_route]/tx` for building the transaction block. - `[base_route]/exec` for executing the transaction block after signed by frontend, and parsing the transaction response. - `zkLoginSponsoredTxExecHandler` - Implements API routes for building, sponsoring, and executing a Sui transaction block. - Two routes are implemented under the hood: - `[base_route]/tx` for building and sponsoring the transaction block. - `[base_route]/exec` for executing the transaction block after signed by frontend, and parsing the transaction response. --- _Source: https://npm.io/package/@shinami/nextjs-zklogin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._