diff --git a/docs/pnp/migration-guides/rn-v3-to-v4.mdx b/docs/pnp/migration-guides/rn-v3-to-v4.mdx index eae5bf1a5..c873c6db7 100644 --- a/docs/pnp/migration-guides/rn-v3-to-v4.mdx +++ b/docs/pnp/migration-guides/rn-v3-to-v4.mdx @@ -1,17 +1,17 @@ --- -title: PnP React Native SDK - v3 to v4 +title: PnP React Native - v3 to v4 displayed_sidebar: docs description: "PnP React Native SDK - v3 to v4 | Documentation - Web3Auth" --- ## Third parameter to web3auth constructor -In order to introduce session management without storing the private key in the device, a new parameter is introduced to the web3auth constructor. -Thhis is the `Storage` parameter. +To introduce session management without storing the private key in the device, a new parameter is introduced to the web3auth constructor. This is the +`Storage` parameter. -### In Expo managed workflow +### In Expo-managed workflow -When using our SDK with a Expo-based React Native app (aka managed workflow), you have to install the `expo-web-browser` package as a `WebBrowser` +When using our SDK with an Expo-based React Native app (aka managed workflow), you have to install the `expo-web-browser` package as a `WebBrowser` implementation. You also need to install `expo-secure-store` to store the user's session. ```bash @@ -31,7 +31,7 @@ const web3auth = new Web3Auth(WebBrowser, SecureStore, { }); ``` -### In Bare react native workflow +### In Bare React native workflow Install Web3Auth's React Native SDK in your React Native project. When using our SDK with a bare workflow React Native app, you have to install a `WebBrowser` implementation made by us and a `Storage` implementation provided by react-native. @@ -57,7 +57,7 @@ const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, { ### For Bare React Native workflow -Add `globals.js` file to your project and import it in your `index.js` file. +Add `globals.js` file to your project and import it into your `index.js` file. ```tsx title="globals.js" global.Buffer = require("buffer").Buffer; @@ -140,7 +140,7 @@ module.exports = (async () => { ### For Expo managed workflow -Before running `npm run ios` or `npm run android` in your Expo managed workflow project, run the following command. +Before running `npm run ios` or `npm run android` in your Expo-managed workflow project, run the following command. ```bash npx expo prebuild @@ -149,7 +149,7 @@ npx expo prebuild This generates the native folder structure for your project, just like you would have in a bare workflow project. This is required for the polyfills to work. -Create a `globals.js` file in your project and import it in your `index.js` file. +Create a `globals.js` file in your project and import it into your `index.js` file. ```tsx title="globals.js" global.Buffer = require("buffer").Buffer; @@ -174,7 +174,7 @@ Then add this line to your `index.js` file. import "./globals"; ``` -Once you have done the above, ceate a new metro.config.js file in your project and add the following to it. +Once you have done the above, create a new metro.config.js file in your project and add the following to it. :::info @@ -259,4 +259,4 @@ declare class Web3Auth implements IWeb3Auth { export default Web3Auth; ``` -Checkout our react-native PnP examples in PnP examples repo to know how to use the new SDK methods. +Check out our react-native PnP examples in the PnP examples repo to know how to use the new SDK methods. diff --git a/docs/pnp/migration-guides/rn-v4-to-v5.mdx b/docs/pnp/migration-guides/rn-v4-to-v5.mdx new file mode 100644 index 000000000..0419fd0c4 --- /dev/null +++ b/docs/pnp/migration-guides/rn-v4-to-v5.mdx @@ -0,0 +1,89 @@ +--- +title: PnP React Native - v4 to v5 +displayed_sidebar: docs +description: "PnP React Native SDK - v4 to v5 | Documentation - Web3Auth" +--- + +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +## Changes to the `WhiteLabelData` object + +### Addition and modifications to parameters + +- With v5, when sending the whitelabel object while initialization, please keep in mind that the `name` parameter signifying the name of the app has + been changed to `appName`. +- The `dark` parameter that used to accept a boolean value to switch between dark or light mode has been changed to `mode` that accepts a string value + of either `light` or `dark` or `auto`. +- The `theme` parameter now accepts an object with key-value pairs, where the value corresponds to the color for a specific set of keys. +- Other than the above modifications, new parameters have been added to the `WhiteLabelData` object, like, `appUrl`, `useLogoLoader`, `tncLink` and + `privacyPolicy`. + +Please look at the [whitelabel](/sdk/pnp/react-native/whitelabel) section for `WhiteLabelData` interface. + + + + + +```tsx +import * as WebBrowser from "expo-web-browser"; +import * as SecureStore from "expo-secure-store"; +import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk"; + +const clientId = "YOUR WEB3AUTH CLIENT ID"; + +const web3auth = new Web3Auth(WebBrowser, SecureStore, { + clientId, + network: OPENLOGIN_NETWORK.TESTNET, // or other networks + // highlight-start + whiteLabel: { + appName: "My App", + logoLight: "https://web3auth.io/images/logo-light.png", + logoDark: "https://web3auth.io/images/logo-dark.png", + defaultLanguage: "en", + mode: "auto", // or "dark" or "light" + theme: { + primary: "#cddc39", + }, + }, + // highlight-end +}); +``` + + + + + +```tsx +import * as WebBrowser from "@toruslabs/react-native-web-browser"; +import EncryptedStorage from "react-native-encrypted-storage"; +import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk"; + +const clientId = "YOUR WEB3AUTH CLIENT ID"; + +const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, { + clientId, + network: OPENLOGIN_NETWORK.TESTNET, // or other networks + // highlight-start + whiteLabel: { + appName: "My App", + logoLight: "https://web3auth.io/images/logo-light.png", + logoDark: "https://web3auth.io/images/logo-dark.png", + defaultLanguage: "en", + mode: "auto", // or "dark" or "light" + theme: { + primary: "#cddc39", + }, + }, + // highlight-end +}); +``` + + + diff --git a/docs/sdk/core-kit/sfa-react-native/sfa-react-native.mdx b/docs/sdk/core-kit/sfa-react-native/sfa-react-native.mdx index e9b2f6cfd..da61efcfb 100644 --- a/docs/sdk/core-kit/sfa-react-native/sfa-react-native.mdx +++ b/docs/sdk/core-kit/sfa-react-native/sfa-react-native.mdx @@ -6,7 +6,7 @@ description: "Web3Auth Core Kit Single Factor Auth React Native SDK | Documentat You can leverage the Web3Auth [Single Factor Auth React Native SDK](https://github.com/Web3Auth/single-factor-auth-react-native) for your React Native applications to authenticate users via Web3Auth. This SDK is constructed using TypeScript and supports the One Key flow natively, commencing with a -single share of the key. This allows for users to authenticate without any redirection in a single key pair flow. +single share of the key. This allows users to authenticate without any redirection in a single key pair flow. With the use of the Web3Auth SFA React Native SDK, you can authenticate users and regenerate their private keys swiftly and conveniently. For many common use cases, the Web3Auth Plug and Play React Native SDK allows you to redirect users to a Web3Auth-hosted screen (`http://app.openlogin.com`). @@ -15,7 +15,7 @@ However, if you prefer a higher degree of control over the UI and UX during the authentication flow to prevent any redirection. This is achievable with the latest Web3Auth SFA React Native SDK, enabling you to utilize the Web3Auth SFA React Native and circumvent redirection to openlogin hosted screens. -This SDK offers you the flexibility to provide seamless and secure authentication for your users, while preserving your app's unique user experience +This SDK offers you the flexibility to provide seamless and secure authentication for your users while preserving your app's unique user experience and interface. #### This Documentation is based on `2.0.0` SDK Version. diff --git a/docs/sdk/pnp/android/whitelabel.mdx b/docs/sdk/pnp/android/whitelabel.mdx index 4debd6536..2bb149f0b 100644 --- a/docs/sdk/pnp/android/whitelabel.mdx +++ b/docs/sdk/pnp/android/whitelabel.mdx @@ -27,16 +27,16 @@ Object called `whiteLabel`. This parameter takes another object called `WhiteLab -| Parameter | Type | Mandatory | Description | -| ----------------- | ------------------ | --------- | ------------------------------------------------- | -| `appName` | `String` | No | Name of your application | -| `appUrl` | `String` | No | Url of your application | -| `logoLight` | `String` | No | Light logo for dark background | -| `logoDark` | `String` | No | Dark logo for light background | -| `defaultLanguage` | `String` | No | Default translation language to be used | -| `mode` | `Boolean` | No | 3 Theme modes of the application | -| `theme` | `Map` | No | Whitelabel theme | -| `useLogoLoader` | `Boolean` | No | Loads the logo when loading | +| Parameter | Type | Mandatory | Description | +| ----------------- | ------------------ | --------- | --------------------------------------- | +| `appName` | `String` | No | Name of your application | +| `appUrl` | `String` | No | Url of your application | +| `logoLight` | `String` | No | Light logo for dark background | +| `logoDark` | `String` | No | Dark logo for light background | +| `defaultLanguage` | `String` | No | Default translation language to be used | +| `mode` | `Boolean` | No | 3 Theme modes of the application | +| `theme` | `Map` | No | Whitelabel theme | +| `useLogoLoader` | `Boolean` | No | Loads the logo when loading | diff --git a/docs/sdk/pnp/react-native/react-native.mdx b/docs/sdk/pnp/react-native/react-native.mdx index 2aead4765..5ca03d9c0 100644 --- a/docs/sdk/pnp/react-native/react-native.mdx +++ b/docs/sdk/pnp/react-native/react-native.mdx @@ -10,6 +10,8 @@ TypeScript. The Web3Auth React Native SDK is a client-side library you can use w returns a private key generated in a non-custodial way on successful authentication of the user. This authentication can be achieved by using any of the social logins Web3Auth provides or using a custom authentication flow of your choice. +#### This Documentation is based on `5.0.0` SDK Version. + ### Requirements - React Native Release 0.71 and above (for Bare React Native Workflow) @@ -44,4 +46,4 @@ Please run `npx expo prebuild` to generate native code based on the version of e - [Source Code](https://github.com/Web3Auth/web3auth-react-native-sdk/): Web3Auth is open sourced. You can find the source code on our GitHub repository. -- [Community Portal](https://web3auth.io/community): Join our community to get support from our team and other developers. +- [Community Portal](https://web3auth.io/community/c/help-pnp/pnp-rn/19): Join our community to get support from our team and other developers. diff --git a/docs/sdk/pnp/react-native/whitelabel.mdx b/docs/sdk/pnp/react-native/whitelabel.mdx index 5e50cbeb5..8fe3fda53 100644 --- a/docs/sdk/pnp/react-native/whitelabel.mdx +++ b/docs/sdk/pnp/react-native/whitelabel.mdx @@ -26,14 +26,18 @@ For defining custom UI, branding, and translations for your brand app, you just -| Parameter | Type | Mandatory | Description | -| ----------------- | ------------------ | --------- | ------------------------------------------------- | -| `name` | `String` | No | Name of your application | -| `logoLight` | `String` | No | Light logo for dark background | -| `logoDark` | `String` | No | Dark logo for light background | -| `defaultLanguage` | `String` | No | Default translation language to used | -| `dark` | `Bool` | No | If true, enables dark mode. Default is light mode | -| `theme` | `[String, String]` | No | Whitelabel theme | +| Parameter | Type | Mandatory | Description | +| ----------------- | --------- | --------- | --------------------------------------- | +| `appName` | `String` | No | Name of your application | +| `appUrl` | `String` | No | URL of your application | +| `logoLight` | `String` | No | Light logo for dark background | +| `logoDark` | `String` | No | Dark logo for light background | +| `defaultLanguage` | `String` | No | Default translation language to be used | +| `mode` | `String` | No | Theme mode to be used | +| `useLogoLoader` | `Boolean` | No | Use logo loader | +| `theme` | `Object` | No | Whitelabel theme | +| `tncLink` | `String` | No | Terms and conditions link | +| `privacyPolicy` | `String` | No | Privacy policy link | @@ -44,7 +48,11 @@ export type WhiteLabelData = { /** * App name to display in the UI */ - name?: string; + appName?: string; + /** + * App url + */ + appUrl?: string; /** * App logo to use in light mode */ @@ -54,25 +62,65 @@ export type WhiteLabelData = { */ logoDark?: string; /** - * Default language to use + * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en" + * en: english + * de: german + * ja: japanese + * ko: korean + * zh: mandarin + * es: spanish + * fr: french + * pt: portuguese + * nl: dutch * * @defaultValue en */ - defaultLanguage?: string; + defaultLanguage?: LANGUAGE_TYPE; /** - * Whether to enable dark mode + theme + * + * @defaultValue auto + */ + mode?: THEME_MODE_TYPE; + /** + * Use logo loader * * @defaultValue false */ - dark?: boolean; - + useLogoLoader?: boolean; /** * Used to customize theme of the login modal with following options * `'primary'` - To customize primary color of modal's content. */ theme?: { - [P in string]: string; + primary?: string; + gray?: string; + red?: string; + green?: string; + success?: string; + warning?: string; + error?: string; + info?: string; + white?: string; }; + /** + * Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure + * e.g. + * tncLink: { + * en: "http://example.com/tnc/en", + * ja: "http://example.com/tnc/ja", + * } + */ + tncLink?: Partial>; + /** + * Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure + * e.g. + * privacyPolicy: { + * en: "http://example.com/tnc/en", + * ja: "http://example.com/tnc/ja", + * } + */ + privacyPolicy?: Partial>; }; ``` @@ -94,20 +142,21 @@ export type WhiteLabelData = { ```tsx import * as WebBrowser from "expo-web-browser"; +import * as SecureStore from "expo-secure-store"; import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk"; const clientId = "YOUR WEB3AUTH CLIENT ID"; -const web3auth = new Web3Auth(WebBrowser, { +const web3auth = new Web3Auth(WebBrowser, SecureStore, { clientId, network: OPENLOGIN_NETWORK.TESTNET, // or other networks // highlight-start whiteLabel: { - name: "My App", + appName: "My App", logoLight: "https://web3auth.io/images/logo-light.png", logoDark: "https://web3auth.io/images/logo-dark.png", defaultLanguage: "en", - dark: true, + mode: "auto", // or "dark" or "light" theme: { primary: "#cddc39", }, @@ -122,20 +171,21 @@ const web3auth = new Web3Auth(WebBrowser, { ```tsx import * as WebBrowser from "@toruslabs/react-native-web-browser"; +import EncryptedStorage from "react-native-encrypted-storage"; import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-native-sdk"; const clientId = "YOUR WEB3AUTH CLIENT ID"; -const web3auth = new Web3Auth(WebBrowser, { +const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, { clientId, network: OPENLOGIN_NETWORK.TESTNET, // or other networks // highlight-start whiteLabel: { - name: "My App", + appName: "My App", logoLight: "https://web3auth.io/images/logo-light.png", logoDark: "https://web3auth.io/images/logo-dark.png", defaultLanguage: "en", - dark: true, + mode: "auto", // or "dark" or "light" theme: { primary: "#cddc39", }, diff --git a/docs/sdk/pnp/web/modal/modal.mdx b/docs/sdk/pnp/web/modal/modal.mdx index b99fc7901..c77495302 100644 --- a/docs/sdk/pnp/web/modal/modal.mdx +++ b/docs/sdk/pnp/web/modal/modal.mdx @@ -4,9 +4,11 @@ displayed_sidebar: sdk description: " Web3Auth PnP Web Modal SDK | Documentation - Web3Auth" --- -This package provides main class for using default Web3Auth Modal. The package includes all of our packages and gives you a simple way of implementing -Web3Auth within your interface. Additionally, it is a child class of [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. Hence, you can still call -all the functions available in the [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. +This package provides the main class for using the default Web3Auth Modal. The package includes all of our packages and gives you a simple way of +implementing Web3Auth within your interface. Additionally, it is a child class of [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. Hence, you +can still call all the functions available in the [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) package. + +#### This Documentation is based on `7.0.0` SDK Version. ## Requirements @@ -19,7 +21,7 @@ all the functions available in the [`@web3auth/no-modal`](/sdk/pnp/web/no-modal) - [Quick Start](/quick-start?product=Plug+and+Play&sdk=Plug+and+Play+Web+Modal+SDK&platform=React): Integrate Web3Auth in 4 Simple Steps. - [Integration Builder](/integration-builder?lang=REACT&chain=ETH&evmFramework=WEB3&customAuth=NONE&mfa=DEFAULT&whitelabel=NO&useModal=YES&web3AuthNetwork=TESTNET&rnMode=EXPO&stepIndex=0): - Get customised integration code with detailed reference for your specific use case. + Get customized integration code with detailed references for your specific use case. - [Example Applications](/examples?product=Plug+and+Play&sdk=Plug+and+Play+Web+Modal+SDK): Explore our example applications and try the SDK yourself. diff --git a/docs/sdk/pnp/web/no-modal/no-modal.mdx b/docs/sdk/pnp/web/no-modal/no-modal.mdx index ee94990bb..1e1d37958 100644 --- a/docs/sdk/pnp/web/no-modal/no-modal.mdx +++ b/docs/sdk/pnp/web/no-modal/no-modal.mdx @@ -8,6 +8,8 @@ Web3Auth Plug and Play No Modal is the main SDK that consists of the core module for implementing the Web3Auth features, giving you the flexibility of implementing your own UI to use all the functionalities. Since this package doesn't contain the UI Modal as compared to [`@web3auth/modal`](/sdk/pnp/web/modal) package, the size of this package is smaller. +#### This Documentation is based on `7.0.0` SDK Version. + ## Requirements - This is a frontend SDK and can only run in a browser environment @@ -19,7 +21,7 @@ doesn't contain the UI Modal as compared to [`@web3auth/modal`](/sdk/pnp/web/mod - [Quick Start](/quick-start?product=Plug+and+Play&sdk=Plug+and+Play+Web+No+Modal+SDK&platform=React): Integrate Web3Auth in 4 Simple Steps. - [Integration Builder](/integration-builder?lang=REACT&chain=ETH&evmFramework=WEB3&customAuth=NONE&mfa=DEFAULT&whitelabel=NO&useModal=NO&web3AuthNetwork=TESTNET&rnMode=EXPO&stepIndex=0): - Get customised integration code with detailed reference for your specific use case. + Get customized integration code with detailed references for your specific use case. - [Example Applications](/examples?product=Plug+and+Play&sdk=Plug+and+Play+Web+No+Modal+SDK): Explore our example applications and try the SDK yourself. diff --git a/sidebars.js b/sidebars.js index 499647742..0a4faa336 100644 --- a/sidebars.js +++ b/sidebars.js @@ -114,6 +114,13 @@ module.exports = { collapsible: true, items: ["pnp/migration-guides/no-modal-v6-to-v7", "pnp/migration-guides/no-modal-v5-to-v6"], }, + { + type: "category", + label: "PnP React Native", + collapsed: true, + collapsible: true, + items: ["pnp/migration-guides/rn-v3-to-v4", "pnp/migration-guides/rn-v4-to-v5"], + }, { type: "category", label: "PnP Android",