Skip to content

Commit

Permalink
update mpc core kit migration guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@AyushBherwani1998
AyushBherwani1998 committed Sep 12, 2024
1 parent bc2425a commit 5dd27dc
Showing 1 changed file with 58 additions and 138 deletions.
196 changes: 58 additions & 138 deletions docs/migration-guides/mpc-core-kit-web-v2-to-v3.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,38 +12,9 @@ This migration guide provides steps for upgrading from version v2 to v3 of the W
Web SDK. The guide outlines significant changes and enhancements, including the support of
`ed25519`.

## Changes in Detail
## Breaking Changes

### `ed25519` Support

We are happy to announce that with v3, Web3AuthMPCCoreKit will support the `ed25519` curve. Starting
from v3, developers can use the MPC TSS capabilities with the Blockchain ecosystem which uses the
`ed25519` curve.

```tsx
// Important to use tss-frost-lib for ed25519 KeyType
import { tssLib } from "@toruslabs/tss-frost-lib";

const coreKitInstance = new Web3AuthMPCCoreKit({
web3AuthClientId,
web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
storage: window.localStorage,
manualSync: true,
tssLib,
});

// Get ed25519 PublicKey
const pubKey = coreKitInstance.getPubKeyEd25519();

// Solana address
const address = base58.encode(Uint8Array.from(pubKey));

// Sign message
const msg = Buffer.from("Welcome to Web3Auth");
const sig = await this.coreKitInstance.sign(msg);
```

### Breaking change in Web3AuthOptions
### Web3AuthOptions

In v3, we try to improve the developer experience by removing `chainConfig`, `setupProviderOnInit`,
`storageKey`, and `asyncStorageKey` parameters. Developers must now use the mandatory `storage`
Expand All @@ -53,26 +24,16 @@ Along with that, `tssLib` is now a mandatory parameter to define the tss signing
This helps us make the integration consistent across web and react native and make the library
lighter

#### Before (v2):

```tsx
const coreKitInstance = new Web3AuthMPCCoreKit({
web3AuthClientId: "YOUR_CLIENT_ID",
web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
manualSync: true,
});
```

#### After (v3):

```tsx
const coreKitInstance = new Web3AuthMPCCoreKit({
web3AuthClientId: "YOUR_CLIENT_ID",
web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
manualSync: true, // This is the recommended approach
// focus-start
// add-start
tssLib: tssLib,
storage: window.storage,
// add-end
// focus-end
});
```
Expand All @@ -82,21 +43,14 @@ const coreKitInstance = new Web3AuthMPCCoreKit({
In v3, the `getWebBrowserFactor` is removed. Developers can now use `getDeviceFactor` the common
method for web and react-native, to retrieve user's device factor if available.

#### Before (v2):

In v2, we used `getWebBrowserFactor` to retrieve the factor from the Web Local/Session Storage.

```tsx
// remove-start
import { getWebBrowserFactor } from "@web3auth/mpc-core-kit";

const factorKey = await getWebBrowserFactor(coreKitInstance!);
```

#### After (v3):

In v3, you can now use the `getDeviceFactor` method to retrive user's device factor.
// remove-end

```tsx
// add-next-line
const factor = await coreKitInstance.getDeviceFactor();
```

Expand All @@ -105,10 +59,6 @@ const factor = await coreKitInstance.getDeviceFactor();
In v3, the `storeWebBrowserFactor` is removed. Developers can now use `setDeviceFactor` to store the
user's device factor.

#### Before (v2):

In v2, we used `storeWebBrowserFactor` to store the device factor in the Web Local/Session Storage.

```tsx
import bowser from "bowser";
import { storeWebBrowserFactor } from "@web3auth/mpc-core-kit";
Expand All @@ -129,63 +79,30 @@ const deviceFactorKey = new BN(
"hex",
);

storeWebBrowserFactor(deviceFactorKey, coreKitInstance);
```

#### After (v3):

In v3, you can now use the `setDeviceFactor` method to store user's device factor.

```tsx
import bowser from "bowser";

const browserInfo = bowser.parse(navigator.userAgent);
const browserName = `${browserInfo.browser.name}`;
const browserData = {
browserName,
browserVersion: browserInfo.browser.version,
deviceName: browserInfo.os.name,
};

const deviceFactorKey = new BN(
await coreKitInstance.createFactor({
shareType: TssShareType.DEVICE,
additionalMetadata: browserData,
}),
"hex",
);

// focus-next-line
const factor = await coreKitInstance.setDeviceFactor(deviceFactorKey);
// focus-start
// remove-next-line
await storeWebBrowserFactor(deviceFactorKey, coreKitInstance);
// add-next-line
await coreKitInstance.setDeviceFactor(deviceFactorKey);
// focus-end
```

### `metadatakey` property

In v3, the `metadatakey` is now removed. Developers can now use `Web3AuthState.postBoxKey` to access
the postBoxKey for the account.

#### Before (v2):

In v2, we used `Web3AuthMPCCoreKit.metadatakey` to retrieve the user's postBoxKey.

```tsx
const key = await coreKitInstance.metadatakey;
```

#### After (v3):

In v3, you can now use the `Web3AuthState.postBoxKey` property to retrive user's postBoxKey.

```tsx
const key = await coreKitInstance.state.postBoxKey;
// remove-next-line
const key = coreKitInstance.metadatakey;
// add-next-line
const key = coreKitInstance.state.postBoxKey;
```

### `loginWithOauth` method

In v3, the `loginWithOauth` is now renamed to `loginWithOAuth`.

#### Before (v2):

```tsx
import { Web3AuthMPCCoreKit, SubVerifierDetailsParams } from "@web3auth/mpc-core-kit";

Expand All @@ -197,53 +114,33 @@ const verifierConfig = {
},
} as SubVerifierDetailsParams;

// focus-start
// remove-next-line
await coreKitInstance.loginWithOauth(verifierConfig);
```

#### After (v3):

```tsx
import { Web3AuthMPCCoreKit, SubVerifierDetailsParams } from "@web3auth/mpc-core-kit";

const verifierConfig = {
subVerifierDetails: {
typeOfLogin: "google",
verifier: "w3a-google-demo",
clientId: "YOUR_GOOGLE_CLIENT_ID",
},
} as SubVerifierDetailsParams;

// focus-next-line
// add-next-line
await coreKitInstance.loginWithOAuth(verifierConfig);
// focus-end
```

### `loginWithJWT` method

In v3, the `IdTokenLoginParams` accepted by `loginWithJWT` method is now renamed to
`JWTLoginParams`.

#### Before (v2):

```tsx
const idTokenLoginParams = {
// focus-start
const loginParams = {
verifier: "w3a-firebase-demo",
verifierId: parsedToken.email,
idToken,
// remove-next-line
} as IdTokenLoginParams;

await coreKitInstance.loginWithJWT(idTokenLoginParams);
```

#### After (v3):

```tsx
const jwtLoginParams = {
verifier: "w3a-firebase-demo",
verifierId: parsedToken.email,
idToken,
// add-next-line
} as JWTLoginParams;

await coreKitInstance.loginWithJWT(jwtLoginParams);
// focus-end

await coreKitInstance.loginWithJWT(loginParams);
```

### EthereumSigningProvider
Expand All @@ -252,21 +149,44 @@ Starting v3, `setupProvider` method will accept `EthereumSigner` interface with
`getPublic` methods. Additionally to make it easy for developers we have added `makeEthereumSigner`
helper function.

#### Before (v2):

```tsx
// add-next-line
import { makeEthereumSigner } from "@web3auth/mpc-core-kit";
import { EthereumSigningProvider } from "@web3auth/ethereum-mpc-provider";

const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });

// remove-next-line
evmProvider.setupProvider(coreKitInstance);
// add-next-line
evmProvider.setupProvider(makeEthereumSigner(coreKitInstance));
```

#### After (v3):
## Introducing Ed25519 Support

We are happy to announce that with v3, Web3AuthMPCCoreKit will support the `ed25519` curve. Starting
from v3, developers can use the MPC TSS capabilities with the Blockchain ecosystem which uses the
`ed25519` curve.

```tsx
import { makeEthereumSigner } from "@web3auth/mpc-core-kit";
import { EthereumSigningProvider } from "@web3auth/ethereum-mpc-provider";
// Important to use tss-frost-lib for ed25519 KeyType
import { tssLib } from "@toruslabs/tss-frost-lib";

const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });
evmProvider.setupProvider(makeEthereumSigner(coreKitInstance));
const coreKitInstance = new Web3AuthMPCCoreKit({
web3AuthClientId,
web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
storage: window.localStorage,
manualSync: true,
tssLib,
});

// Get ed25519 PublicKey
const pubKey = coreKitInstance.getPubKeyEd25519();

// Solana address
const address = base58.encode(Uint8Array.from(pubKey));

// Sign message
const msg = Buffer.from("Welcome to Web3Auth");
const sig = await this.coreKitInstance.sign(msg);
```

0 comments on commit 5dd27dc

Please sign in to comment.