Skip to content

Commit

Permalink
Merge pull request #504 from Web3Auth/rn-docs-addition
Browse files Browse the repository at this point in the history 
Added migration guide, whitelabel, fixed minor typos - RN docs
  • Loading branch information
@shahbaz17
shahbaz17 authored Oct 19, 2023
2 parents 53fa28f + c3a8efe commit 8b3da72
Show file tree
Hide file tree
Showing 9 changed files with 202 additions and 50 deletions.
22 changes: 11 additions & 11 deletions docs/pnp/migration-guides/rn-v3-to-v4.mdx
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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.
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand All @@ -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

Expand Down Expand Up @@ -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.
89 changes: 89 additions & 0 deletions docs/pnp/migration-guides/rn-v4-to-v5.mdx
View file
Original file line number Diff line number Diff line change
@@ -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.

<Tabs
defaultValue="expo"
values={[
{ label: "Expo Managed Workflow", value: "expo" },
{ label: "Bare React Native Workflow", value: "bare" },
]}
>

<TabItem value="expo">

```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
});
```

</TabItem>

<TabItem value="bare">

```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
});
```

</TabItem>
</Tabs>
4 changes: 2 additions & 2 deletions docs/sdk/core-kit/sfa-react-native/sfa-react-native.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`).
Expand All @@ -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.
Expand Down
20 changes: 10 additions & 10 deletions docs/sdk/pnp/android/whitelabel.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,16 @@ Object called `whiteLabel`. This parameter takes another object called `WhiteLab

<TabItem value="table">

| 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<String, Any>` | 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<String, Any>` | No | Whitelabel theme |
| `useLogoLoader` | `Boolean` | No | Loads the logo when loading |

</TabItem>

Expand Down
4 changes: 3 additions & 1 deletion docs/sdk/pnp/react-native/react-native.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
92 changes: 71 additions & 21 deletions docs/sdk/pnp/react-native/whitelabel.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,18 @@ For defining custom UI, branding, and translations for your brand app, you just

<TabItem value="table">

| 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 |

</TabItem>

Expand All @@ -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
*/
Expand All @@ -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<Record<LANGUAGE_TYPE, string>>;
/**
* 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<Record<LANGUAGE_TYPE, string>>;
};
```

Expand All @@ -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",
},
Expand All @@ -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",
},
Expand Down
Loading

1 comment on commit 8b3da72

@vercel
Copy link

@vercel vercel bot commented on 8b3da72 Oct 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

web3auth-docs – ./

w3a-docs.vercel.app
web3auth-docs-git-master-web3auth.vercel.app
web3auth-docs-web3auth.vercel.app

Please sign in to comment.