Skip to content

Commit e8ae176

Browse files
yashovardhanyashovardhan
committed
Update migration guides
1 parent 3171c4b commit e8ae176

File tree

5 files changed

+381
-0
lines changed

5 files changed

+381
-0
lines changed

‎docs/migration-guides/modal-v8-to-v9.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,31 @@ const loginAdapter = new OpenloginAdapter(OpenloginAdapterOptions);
3434
const loginAdapter = new AuthAdapter(AuthAdapterOptions);
3535
```
3636

37+
### Private Key Provider in now needed in the Web3Auth Constructor
38+
39+
Although not marked as a mandatory param in the SDK, you need to pass the privateKeyProvider in the
40+
Web3Auth Constructor to avoid unexpected issues.
41+
42+
```tsx
43+
// add-start
44+
const privateKeyProvider = new EthereumPrivateKeyProvider({
45+
config: {
46+
chainConfig,
47+
},
48+
});
49+
// add-end
50+
51+
const web3AuthOptions: Web3AuthOptions = {
52+
chainConfig,
53+
clientId,
54+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
55+
// add-next-line
56+
privateKeyProvider,
57+
};
58+
59+
const web3auth = new Web3Auth(web3AuthOptions);
60+
```
61+
3762
### Default EVM Adapter Enhancements
3863

3964
In v9, the functionality of `getDefaultExternalAdapters` has changed. Previously, it displayed

‎docs/migration-guides/no-modal-v8-to-v9.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,31 @@ const loginAdapter = new OpenloginAdapter(OpenloginAdapterOptions);
3434
const loginAdapter = new AuthAdapter(AuthAdapterOptions);
3535
```
3636

37+
### Private Key Provider in now needed in the Web3Auth Constructor
38+
39+
Although not marked as a mandatory param in the SDK, you need to pass the privateKeyProvider in the
40+
Web3Auth Constructor to avoid unexpected issues.
41+
42+
```tsx
43+
// add-start
44+
const privateKeyProvider = new EthereumPrivateKeyProvider({
45+
config: {
46+
chainConfig,
47+
},
48+
});
49+
// add-end
50+
51+
const web3AuthOptions: Web3AuthOptions = {
52+
chainConfig,
53+
clientId,
54+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
55+
// add-next-line
56+
privateKeyProvider,
57+
};
58+
59+
const web3auth = new Web3AuthNoModal(web3AuthOptions);
60+
```
61+
3762
### Default EVM Adapter Enhancements
3863

3964
In v9, the functionality of `getDefaultExternalAdapters` has changed. Previously, it displayed

‎docs/migration-guides/sfa-node-to-sfa-js.mdx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
title: SFA Node.js SDK to SFA JS SDK Migration Guide
3+
description: SFA Node.js SDK to SFA JS SDK Migration Guide | Documentation - Web3Auth
4+
sidebar_label: SFA Node.js SDK Migration
5+
---
6+
7+
## Overview
8+
9+
This migration guide provides steps for updating your existing SFA Node.js SDK integration to the
10+
SFA JS SDK. This migration is coming after we have deprecated the SFA Node.js SDK in favour a
11+
unified, platform-agnostic solution, the Single Factor Auth JS SDK. This new SDK is an evolution of
12+
our popular SFA Web SDK, designed to support all platforms, including React Native, Node.js, and
13+
Web.
14+
15+
#### Key Benefits of the SFA JS SDK:
16+
17+
• Unified API: Simplified and consistent API across platforms.
18+
19+
• Cross-platform Support: One SDK for Web, React Native, and Node.js, reducing integration
20+
complexity.
21+
22+
• Feature Enhancements: Incorporates the latest updates and improvements, ensuring a better
23+
development experience.
24+
25+
## Changes in Detail
26+
27+
### Package Changes
28+
29+
Use the `@web3auth/single-factor-auth` instead of `@web3auth/node-sdk`
30+
31+
```js
32+
// remove-next-line
33+
const { Web3Auth } = require("@web3auth/node-sdk");
34+
// add-next-line
35+
const { Web3Auth, SDK_MODE } = require("@web3auth/single-factor-auth");
36+
const { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } = require("@web3auth/base");
37+
const { EthereumPrivateKeyProvider } = require("@web3auth/ethereum-provider");
38+
```
39+
40+
### `ChainConfig`
41+
42+
`ChainConfig` now requires a `logo` parameter for the chain's logo and the parameter formerly called
43+
`blockExplorer` has been renamed to `blockExplorerUrl`. Additionally, `isTestnet` has been
44+
introduced which can be used to define whether the network is testnet or not.
45+
46+
```tsx
47+
const chainConfig = {
48+
chainNamespace: CHAIN_NAMESPACES.EIP155,
49+
chainId: "0x1", // Please use 0x1 for Mainnet
50+
rpcTarget: "https://rpc.ankr.com/eth",
51+
displayName: "Ethereum Mainnet",
52+
// remove-next-line
53+
blockExplorer: "https://etherscan.io/",
54+
// add-next-line
55+
blockExplorerUrl: "https://etherscan.io",
56+
ticker: "ETH",
57+
tickerName: "Ethereum",
58+
decimals: 18,
59+
// add-next-line
60+
logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
61+
};
62+
```
63+
64+
### Constructor Changes
65+
66+
Pass the `privateKeyProvider` in the constructor, alongside setting the SDK's `mode` to
67+
`SDK_MODE.NODE`.
68+
69+
```js
70+
const { Web3Auth, SDK_MODE } = require("@web3auth/single-factor-auth");
71+
const { EthereumPrivateKeyProvider } = require("@web3auth/ethereum-provider");
72+
73+
const privateKeyProvider = new EthereumPrivateKeyProvider({
74+
config: { chainConfig },
75+
});
76+
77+
const web3auth = new Web3Auth({
78+
clientId, // Get your Client ID from Web3Auth Dashboard
79+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
80+
// add-start
81+
privateKeyProvider,
82+
mode: SDK_MODE.NODE,
83+
// add-end
84+
});
85+
```
86+
87+
### Getting the provider
88+
89+
Now the provider is not returned on the successful login, instead it is always present in the
90+
web3auth instance using the `provider` param.
91+
92+
```js
93+
// remove-next-line
94+
const web3authNodeprovider = await web3auth.connect({
95+
// add-next-line
96+
await web3auth.connect({
97+
verifier: web3authVerifier,
98+
verifierId,
99+
idToken,
100+
});
101+
102+
// remove-next-line
103+
const ethPublicAddress = await web3authNodeprovider.request({ method: "eth_accounts" });
104+
// add-next-line
105+
const ethPublicAddress = await web3auth.provider.request({ method: "eth_accounts" });
106+
```
107+
108+
## Need Help?
109+
110+
If you encounter any issues during migration, please:
111+
112+
- Refer to our [official documentation](https://web3auth.io/docs/sdk/sfa/sfa-js)
113+
- Open a new thread in our [community forum](https://web3auth.io/community/)

‎docs/migration-guides/sfa-rn-to-sfa-js.mdx‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
---
2+
title: SFA React Native SDK to SFA JS SDK Migration Guide
3+
description: SFA React Native SDK to SFA JS SDK Migration Guide | Documentation - Web3Auth
4+
sidebar_label: SFA React Native SDK Migration
5+
---
6+
7+
import TabItem from "@theme/TabItem";
8+
import Tabs from "@theme/Tabs";
9+
10+
## Overview
11+
12+
This migration guide provides steps for updating your existing SFA Node.js SDK integration to the
13+
SFA JS SDK. This migration is coming after we have deprecated the SFA Node.js SDK in favour a
14+
unified, platform-agnostic solution, the Single Factor Auth JS SDK. This new SDK is an evolution of
15+
our popular SFA Web SDK, designed to support all platforms, including React Native, Node.js, and
16+
Web.
17+
18+
#### Key Benefits of the SFA JS SDK:
19+
20+
• Unified API: Simplified and consistent API across platforms.
21+
22+
• Cross-platform Support: One SDK for Web, React Native, and Node.js, reducing integration
23+
complexity.
24+
25+
• Feature Enhancements: Incorporates the latest updates and improvements, ensuring a better
26+
development experience.
27+
28+
## Changes in Detail
29+
30+
### Package Changes
31+
32+
Use the `@web3auth/single-factor-auth` instead of `@web3auth/single-factor-auth-react-native`
33+
34+
```js
35+
// remove-next-line
36+
import Web3Auth from "@web3auth/single-factor-auth-react-native";
37+
// add-next-line
38+
import { Web3Auth, SDK_MODE, decodeToken } from "@web3auth/single-factor-auth";
39+
import { CHAIN_NAMESPACES, IProvider, WEB3AUTH_NETWORK } from "@web3auth/base";
40+
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
41+
```
42+
43+
### `ChainConfig`
44+
45+
`ChainConfig` now requires a `logo` parameter for the chain's logo and the parameter formerly called
46+
`blockExplorer` has been renamed to `blockExplorerUrl`. Additionally, `isTestnet` has been
47+
introduced which can be used to define whether the network is testnet or not.
48+
49+
```tsx
50+
const chainConfig = {
51+
chainNamespace: CHAIN_NAMESPACES.EIP155,
52+
chainId: "0x1", // Please use 0x1 for Mainnet
53+
rpcTarget: "https://rpc.ankr.com/eth",
54+
displayName: "Ethereum Mainnet",
55+
// remove-next-line
56+
blockExplorer: "https://etherscan.io/",
57+
// add-next-line
58+
blockExplorerUrl: "https://etherscan.io",
59+
ticker: "ETH",
60+
tickerName: "Ethereum",
61+
decimals: 18,
62+
// add-next-line
63+
logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
64+
};
65+
```
66+
67+
### Constructor Changes
68+
69+
Pass the `privateKeyProvider` in the constructor, alongside setting the SDK's `mode` to
70+
`SDK_MODE.REACT_NATIVE`. You need to also pass the storage module separately in the `storage`
71+
parameter.
72+
73+
<Tabs>
74+
<TabItem value="bare" label="Bare React Native" default>
75+
76+
```js
77+
import { Web3Auth, SDK_MODE, decodeToken } from "@web3auth/single-factor-auth";
78+
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
79+
import EncryptedStorage from "react-native-encrypted-storage";
80+
81+
const privateKeyProvider = new EthereumPrivateKeyProvider({
82+
config: { chainConfig },
83+
});
84+
85+
// remove-start
86+
const web3auth = new Web3Auth(EncryptedStorage, {
87+
clientId, // Get your Client ID from Web3Auth Dashboard
88+
web3AuthNetwork: "sapphire_mainnet",
89+
});
90+
// remove-end
91+
92+
// add-start
93+
const web3auth = new Web3Auth({
94+
clientId, // Get your Client ID from Web3Auth Dashboard
95+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
96+
privateKeyProvider,
97+
storage: EncryptedStorage,
98+
mode: SDK_MODE.REACT_NATIVE,
99+
});
100+
// add-end
101+
```
102+
103+
</TabItem>
104+
105+
<TabItem value="expo" label="Expo">
106+
107+
```js
108+
import { Web3Auth, SDK_MODE, decodeToken } from "@web3auth/single-factor-auth";
109+
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
110+
import * as SecureStore from "expo-secure-store";
111+
112+
const privateKeyProvider = new EthereumPrivateKeyProvider({
113+
config: { chainConfig },
114+
});
115+
116+
// remove-start
117+
const web3auth = new Web3Auth(EncryptedStorage, {
118+
clientId, // Get your Client ID from Web3Auth Dashboard
119+
web3AuthNetwork: "sapphire_mainnet",
120+
});
121+
// remove-end
122+
123+
// add-start
124+
const web3auth = new Web3Auth({
125+
clientId, // Get your Client ID from Web3Auth Dashboard
126+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
127+
privateKeyProvider,
128+
storage: SecureStore,
129+
mode: SDK_MODE.REACT_NATIVE,
130+
});
131+
// add-end
132+
```
133+
134+
</TabItem>
135+
</Tabs>
136+
137+
### Initialization
138+
139+
We have removed the need to pass the privateKeyProvider during Initialization.
140+
141+
```js
142+
// remove-next-line
143+
await web3auth.init(privateKeyProvider);
144+
// add-next-line
145+
await web3auth.init();
146+
```
147+
148+
### Removal of the sessionId parameter
149+
150+
We have removed the direct access to the session Id within the SDK. Now the SDK will give a
151+
`connected` flag as `true` if login is successful/ session exists, else `false`.
152+
153+
```js
154+
// remove-start
155+
if (web3auth.sessionId) {
156+
setProvider(web3auth.provider);
157+
setLoggedIn(true);
158+
uiConsole("Logged In", web3auth.sessionId);
159+
}
160+
// remove-end
161+
162+
// add-start
163+
if (web3auth.connected) {
164+
setProvider(web3auth.provider);
165+
setLoggedIn(true);
166+
uiConsole("Logged In");
167+
}
168+
// add-end
169+
```
170+
171+
### globals.js Updates
172+
173+
Update your globals.js file with react-native-quick-crypto. This is required for polyfilling the
174+
`crypto` module.
175+
176+
```typescript
177+
global.Buffer = require("buffer").Buffer;
178+
179+
// add-start
180+
// eslint-disable-next-line import/first
181+
import { install } from "react-native-quick-crypto";
182+
183+
install();
184+
// add-end
185+
186+
// Needed so that 'stream-http' chooses the right default protocol.
187+
global.location = {
188+
protocol: "file:",
189+
};
190+
191+
global.process.version = "v16.0.0";
192+
if (!global.process.version) {
193+
global.process = require("process");
194+
console.log({ process: global.process });
195+
}
196+
197+
process.browser = true;
198+
```
199+
200+
Make sure to import required files in your entry point:
201+
202+
```typescript
203+
import "./globals";
204+
import "@ethersproject/shims";
205+
import "@expo/metro-runtime";
206+
```
207+
208+
## Need Help?
209+
210+
If you encounter any issues during migration, please:
211+
212+
- Refer to our [official documentation](https://web3auth.io/docs/sdk/sfa/sfa-js)
213+
- Open a new thread in our [community forum](https://web3auth.io/community/)

0 commit comments

Comments
 (0)