Getting Started - ZKsync Docs

Integrating ZKsync SSO into your app requires minimal amount of changes.

ZKsync SSO can be used standalone or added as one of the options in the onboarding library of your choice.

Quick Start

Web

Just 2 steps:

Install the ZKsync SSO SDK package.
```
npm i zksync-sso
# optional peer dependencies
npm i @simplewebauthn/browser @simplewebauthn/server @wagmi/core
```
Note on peer dependencies:
- @wagmi/core is required when using ZKsync SSO connector (zksyncSsoConnector) in your app.
- @simplewebauthn/browser and @simplewebauthn/server are required when SDK passkey functionality directly inside your app.

Add ZKsync SSO connector to your app.

import { zksyncSsoConnector, callPolicy } from 'zksync-sso/connector';
import { zksyncSepoliaTestnet } from 'viem/chains';
import { createConfig, connect, disconnect } from '@wagmi/core';
import { erc20Abi, http, parseEther, parseUnits } from 'viem';

const tokenDecimals = 18; // Adjust based on the token you are working with

const ssoConnector = zksyncSsoConnector({
  // Optional session configuration, if omitted user will have to sign every transaction via Auth Server
  session: {
    expiry: '1 day',

    // Allow up to 0.1 ETH to be spend in gas fees
    feeLimit: parseEther('0.1'),

    transfers: [
      // Allow ETH transfers of up to 0.1 ETH to specific address
      {
        to: '0x188bd99cd7D4d78d4E605Aeea12C17B32CC3135A',
        valueLimit: parseEther('0.1'),
      },
    ],

    // Allow calling specific smart contracts (e.g. ERC20 transfer):
    contractCalls: [
      callPolicy({
        address: '0x45E6dC995113fd3d1A3b1964493105B9AA9a9A42',
        abi: erc20Abi,
        functionName: 'transfer',
        constraints: [
          // Only allow transfers to this address. Or any address if omitted
          {
            index: 0, // First argument of erc20 transfer function, recipient address
            value: '0x6cC8cf7f6b488C58AA909B77E6e65c631c204784',
          },

          // Allow transfering up to 0.2 tokens per hour
          // until the session expires
          {
            index: 1,
            limit: {
              limit: parseUnits('0.2', tokenDecimals),
              period: '1 hour',
            },
          },
        ],
      }),
    ],
  },
});

const wagmiConfig = createConfig({
  connectors: [ssoConnector],
  // ... your wagmi config https://wagmi.sh/core/api/createConfig
  chains: [zksyncSepoliaTestnet],
  transports: {
    [zksyncSepoliaTestnet.id]: http(),
  },
});

export const connectWithSSO = async () => {
  const result = await connect(wagmiConfig, {
    connector: ssoConnector,
    chainId: wagmiConfig.chains[0].id, // or another chain id that has SSO support
  });
  console.log('Connected with SSO:', result);
};

export const disconnectWallet = async () => {
  const result = await disconnect(wagmiConfig, {
    connector: wagmiConfig.connectors[0],
  });
  console.log('Disconnected wallet:', result);
};

React Native

Install the ZKsync SSO SDK package.
```
npm i react-native-zksync-sso
```
Configure platform-specific settings:
The React Native SDK currently supports iOS and Android only. Make sure your application is set up to create passkeys by following the platform-specific guidelines:
- iOS: Refer to Apple's documentation for setting up passkey support in your iOS app.
- Android: Refer to Google's documentation for implementing passkey support in your Android app.

Set up the SDK and register an account

import sdk from 'react-native-zksync-sso';

const config = {
  contracts: {
    accountFactory: "0x...",
    passkey: "0x...",
    session: "0x...",
    accountPaymaster: "0x..."
  },
  nodeUrl: "https://...",
  deployWallet: {
    privateKeyHex: "0x..."
  }
};

const accountInfo = {
  name: "Jane Doe",
  userID: "jdoe@example.com"
};

const rpId = sdk.utils.createRpId(
  "example.com",
  "android:apk-key-hash:your-app-key-hash"
);

const challenge = sdk.utils.generateRandomChallenge();

const deployedAccount = await sdk.register.registerAccountWithUniqueId(
  {
    name: accountInfo.name,
    userID: accountInfo.userID,
    rp: {
      name: "example.com",
      id: rpId
    }
  },
  challenge,
  config
);

Send a transaction

import sdk from 'react-native-zksync-sso';
import { AccountClient } from 'react-native-zksync-sso';

const accountClient = new AccountClient(
  {
    address: deployedAccount.address,
    uniqueAccountId: deployedAccount.uniqueAccountId
  },
  rpId,
  config
);

const transaction = {
  to: "0x...", // Recipient address
  value: 1000, // Amount in wei
  from: deployedAccount.address,
  input: undefined // Optional: contract call data
};

const receipt = await accountClient.sendTransaction(tx);

Examples

We provide several example apps and step-by-step tutorials to help you get started quickly:

Example Apps

SSO Tutorials

Intro

Learn about ZKsync Smart Sign-on.

Architecture

Learn about architectural components of ZKsync SSO and how they work together.