docs: refactor sso docs, add new methods

content/00.zksync-era/30.unique-features/30.zksync-sso/100.faqs.md

@@ -5,8 +5,8 @@ description: Frequently asked questions about ZKsync SSO.
 
 ## What login options are supported?
 
-Currently, only login with passkeys is supported in ZKsync SSO.
-We are working on adding support for logging in with an Externally Owned Account (EOA) in the future.
+ZKsync SSO supports both logging in with passkeys and with an Externally Owned Account (EOA) where the private key is available.
+It does not support logging in with a browser-based wallet extension.
 
 ## How secure is ZKsync SSO?
 
@@ -39,6 +39,36 @@ Refer to the [Getting Started Guide](/zksync-era/unique-features/zksync-sso/gett
 
 The deployed contract addresses for ZKsync Sepolia testnet are available in the [ZKsync SSO repository](https://github.com/matter-labs/zksync-sso/blob/main/packages/auth-server/stores/era-sepolia.json).
 
+## What environments are supported?
+
+ZKsync SSO currently supports web applications through its JavaScript SDK,
+and mobile applications via the React Native and Swift SDKs.
+
+### Web
+
+**Supported Browsers:**
+
+- **Google Chrome**
+- **Safari**
+- **Mozilla Firefox**
+- **Microsoft Edge**
+- **Opera**
+
+See the full list of specific versions [here](https://caniuse.com/webauthn).
+This broad browser support ensures a smooth user experience across various platforms.
+
+### Mobile
+
+The React Native SDK is now available for building React Native applications.
+Native Swift and Kotlin SDKs are **coming soon** and will enable developers to incorporate ZKsync SSO features into native mobile applications.
+
+### Coming Soon
+
+Windows 10 users with [Windows Hello](https://www.microsoft.com/en-us/windows/tips/windows-hello) will
+not be able to use PIN or facial recognition until RS256 support is added in a future module.
+Until then, using a mobile device or a password manager will be required to create compatable passkeys on Windows 10.
+The user may still see these options, but will be unable to create an account with the passkey on this platform.
+
 ## Have more questions?
 
 Join our [GitHub Discussions](%%zk_git_repo_zksync-developers%%/discussions/)

content/00.zksync-era/30.unique-features/30.zksync-sso/24.passkeys.md

@@ -50,3 +50,37 @@ If you are signed in to SSO with a passkey that you deleted,
 make sure to click the :u-icon{name="i-tabler-logout-2"} icon
 in the top right corner of the SSO popup window.
 This will allow you to be able to sign up again and generate a new passkey.
+
+## Registering a New Passkey
+
+If you don't want to use the `zksyncSsoConnector` via the auth server, you can directly register a new passkey using the `registerNewPasskey` method.
+
+```ts
+:code-import{filePath="sso/src/registerPasskey.ts"}
+```
+
+This method accepts the following type as the input:
+
+```ts
+export type RegisterNewPasskeyArgs = ({ passkeyRegistrationOptions: PublicKeyCredentialCreationOptionsJSON } | GeneratePasskeyRegistrationOptionsArgs) & { origin?: string };
+```
+
+The [`PublicKeyCredentialCreationOptionsJSON`](https://github.com/MasterKale/SimpleWebAuthn/blob/467f8f1e18834964acf1302c2142a50372a72e16/packages/types/src/index.ts#L52)
+type comes from the [`@simplewebauthn/server`](https://simplewebauthn.dev/docs/packages/server) package.
+
+```ts
+export type GeneratePasskeyRegistrationOptionsArgs = Partial<GenerateRegistrationOptionsOpts> & { userName: string; userDisplayName: string };
+```
+
+The `GeneratePasskeyRegistrationOptionsArgs` type draws from
+the [`GenerateRegistrationOptionsOpts`](https://github.com/MasterKale/SimpleWebAuthn/blob/467f8f1e18834964acf1302c2142a50372a72e16/packages/server/src/registration/generateRegistrationOptions.ts#L85)
+type from the [`@simplewebauthn/server`](https://simplewebauthn.dev/docs/packages/server) package.
+
+The `userName` field defines the unique user ID used to generate to the passkey.
+
+The `userDisplayName` field defines the passkey display name.
+
+The `origin` field optionally defines the domain for the passkey's related origin.
+This field defaults to the `window.location.origin` value.
+
+You can refer to the [`@simplewebauthn/server`](https://simplewebauthn.dev/docs/packages/server) docs for specifications on the remaining input fields.

content/00.zksync-era/30.unique-features/30.zksync-sso/27.accounts.md

@@ -0,0 +1,89 @@
+---
+title: Accounts
+description: Get familiar with ZKsync SSO smart accounts.
+---
+
+## Account Modules
+
+Developers can enhance the functionality of ZKsync SSO accounts by implementing compatible modules via smart contracts.
+The module interface is based on [ERC-7579](https://eips.ethereum.org/EIPS/eip-7579#modules)
+to allow maximum flexibility while using ZKsync's powerful native account abstraction to developer overhead.
+
+The existing passkey and session features are already implemented as modules,
+and installed by default for every new account deployment.
+Modules can be added or removed from the account, without having to migrate or upgrade the whole account.
+
+You can contribute to the smart account modules available to ZKsync SSO users by
+submitting a PR to the [`zksync-sso-clave-contracts`](https://github.com/matter-labs/zksync-sso-clave-contracts) repository.
+
+Modules must implement the
+[`IModuleValidator`](https://github.com/matter-labs/zksync-sso-clave-contracts/tree/main/src/interfaces/IModuleValidator.sol) interface.
+The current implemented modules can be found in the [`validators` folder](https://github.com/matter-labs/zksync-sso-clave-contracts/tree/main/src/validators).
+
+Looking for inspiration?
+Take a look at the modules already created for [ERC-7579](https://erc7579.com/modules)
+
+## Deploying an Account From a Registered Passkey
+
+You can deploy a modular account from a [registered passkey](/zksync-era/unique-features/zksync-sso/passkeys#registering-a-new-passkey)
+using the `deployModularAccount` method:
+
+```ts
+:code-import{filePath="sso/src/deployModularAccount.ts"}
+```
+
+### ECDSA Signer
+
+You can authorize transactions for an account using an ECDSA signer.
+The example below assumes an SSO account has already been deployed as shown in the example above.
+The private key here must match one of the owner accounts defined when the account was deployed.
+
+The `ecdsaClient` here can be used like a [`viem` wallet client](https://viem.sh/docs/clients/wallet) to send transactions.
+
+```ts
+:code-import{filePath="sso/src/ecdsa.ts"}
+```
+
+## Deploying Accounts in React Native
+
+There are two methods available to create a new account and passkey pair: `registerAccount` and `registerAccountWithUniqueId`.
+
+- `registerAccount` creates a random wallet address.
+- `registerAccountWithUniqueId` creates a deterministic wallet address based on the deploy wallet private key and the user ID.
+
+Both of these methods accept the same input argument types and return the same `Account` type:
+
+```ts
+interface RPInfo {
+    name: string;
+    id: RpId;
+}
+
+interface AccountInfo {
+    name: string;
+    userID: string;
+    rp: RPInfo;
+}
+
+const registerAccountWithUniqueId = async (
+    accountInfo: AccountInfo,
+    challenge: string,
+    config: Config
+): Promise<Account>
+```
+
+See the [Getting Started](/zksync-era/unique-features/zksync-sso/getting-started) page for an example for how to use these methods.
+
+For web3 native applications, generally `registerAccount` is recommended.
+In this case, only the account address must be stored somewhere.
+The account address cannot be derived in any way.
+
+For web2 native applications that already have a username or email used to login,
+`registerAccountWithUniqueId` can be used to create an address based on that account info.
+In this case, the address can be derived from the userID using the `getAccountByUserId` method.
+
+```ts
+import { type Account, getAccountByUserId } from "react-native-zksync-sso";
+
+const account: Account = await getAccountByUserId(uniqueAccountId, config);
+```

content/00.zksync-era/30.unique-features/30.zksync-sso/5.getting-started.md

@@ -55,139 +55,11 @@ Just 2 steps:
     ::code-group
 
     ```ts [wagmi]
-    import { zksyncSsoConnector, callPolicy } from "zksync-sso/connector";
-    import { zksyncSepoliaTestnet } from "viem/chains";
-    import { createConfig, connect } from "@wagmi/core";
-    import { erc20Abi } from "viem";
-
-    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: "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044",
-            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", TOKEN.decimals),
-                  period: "1 hour",
-                },
-              },
-            ],
-          }),
-        ],
-      },
-      // Optional: Receive notifications about session state changes
-      onSessionStateChange: ({ state, address, chainId }) => {
-        console.log(`Session state for address ${address} changed: ${state.type} - ${state.message}`);
-
-        // Use this to notify users and restart the session if needed
-        // - Session expired: state.type === 'session_expired'
-        // - Session inactive (e.g. was revoked): state.type === 'session_inactive'
-      },
-    });
-
-    const wagmiConfig = createConfig({
-      connectors: [ssoConnector],
-      ..., // your wagmi config https://wagmi.sh/core/api/createConfig
-    });
-
-    const connectWithSSO = () => {
-      connect(wagmiConfig, {
-        connector: ssoConnector,
-        chainId: zksyncSepoliaTestnet.id, // or another chain id that has SSO support
-      });
-    };
+    :code-import{filePath="sso/src/wagmi.ts"}
     ```
 
-    ```ts [web3modal]
-    import { zksyncSsoConnector, callPolicy } from "zksync-sso/connector";
-    import { zksyncSepoliaTestnet } from "viem/chains";
-    import { defaultWagmiConfig } from "@web3modal/wagmi";
-    import { erc20Abi } from "viem";
-
-    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: "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044",
-            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", TOKEN.decimals),
-                  period: "1 hour",
-                },
-              },
-            ],
-          }),
-        ],
-      },
-
-      // Optional: Receive notifications about session state changes
-      onSessionStateChange: ({ state, address, chainId }) => {
-        console.log(`Session state for address ${address} changed: ${state.type} - ${state.message}`);
-
-        // Use this to notify users and restart the session if needed
-        // - Session expired: state.type === 'session_expired'
-        // - Session inactive (e.g. was revoked): state.type === 'session_inactive'
-      },
-    });
-
-    const wagmiConfig = defaultWagmiConfig({
-      connectors: [ssoConnector], // add ZKsync SSO as one of the options in the onboarding modal
-      ..., // your web3modal wagmi config https://wagmi.sh/core/api/createConfig
-    });
+    ```ts [reown]
+    :code-import{filePath="sso/src/reownAppkit.ts"}
     ```
 
     ::
@@ -287,10 +159,17 @@ Just 2 steps:
     const receipt = await accountClient.sendTransaction(tx);
     ```
 
-## Interfaces
+## Examples
+
+We provide several example apps and step-by-step tutorials to help you get started quickly:
 
-You can find the full list of options and their descriptions in the [Interfaces](/zksync-era/unique-features/zksync-sso/interfaces) section.
+### Example Apps
 
-## Examples
+- [Web examples](https://github.com/matter-labs/zksync-sso/tree/main/examples).
+- [React Native example](https://github.com/matter-labs/zksync-sso/tree/main/packages/sdk-platforms/react-native/react-native-zksync-sso/example)
+- [Swift example](https://github.com/matter-labs/zksync-sso/tree/main/packages/sdk-platforms/swift/Examples/ExampleApp)
+
+### SSO Tutorials
 
-We provide several example apps to help you get started quickly. Find them on our [GitHub repository](https://github.com/matter-labs/zksync-sso).
+- [Build a ZK Game with SSO](https://code.zksync.io/tutorials/build-a-zk-game/building-the-frontend#setting-up-sso-and-contract-interactions)
+- [Build a React Native Payment App](https://code.zksync.io/tutorials/sso-react-native)