Skip to content

Commit

Permalink
modularized deeplinking for expo
Browse files Browse the repository at this point in the history
  • Loading branch information
@ihsraham
ihsraham committed Oct 20, 2023
1 parent 234750e commit 62d70a8
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 108 deletions.
24 changes: 24 additions & 0 deletions src/common/guides/_rn-expo-deeplink.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
- Adding URL scheme to `app.json`

To allow the Expo-based SDK to work with exported Expo Android apps, you need to add the designated scheme into `app.json`

```json title="app.json"
{
"expo": {
"scheme": "web3authexpoexample" // replace with your own scheme
}
}
```

- For constructing your `redirectUrl`, you'll need to use the `expo-linking`, which will help you generate a `redirectUrl` for your app. Make sure you
register that URL in the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).

```tsx title="App.js"
import Constants, { AppOwnership } from "expo-constants";
import * as Linking from "expo-linking";

const resolvedRedirectUrl =
Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
? Linking.createURL("web3auth", {})
: Linking.createURL("web3auth", { scheme: scheme });
```
36 changes: 17 additions & 19 deletions src/pages/content-hub/guides/react-native-auth0.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ platform :ios, '14'
cd ios && pod install && cd ..
```

- In iOS, you don't need to add `redirectUrl` as a iOS Custom URL Scheme, however, you may can add it to your `Info.plist`, but it is not required.
Make sure your `redirectUrl` is registered in the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
- In iOS, you don't need to add `redirectUrl` as an iOS Custom URL Scheme, however, you may add it to your `Info.plist`, but it is not required. Make
sure your `redirectUrl` is registered in the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).

</TabItem>

Expand Down Expand Up @@ -157,13 +157,13 @@ npm install --save react-native-encrypted-storage

### Initialization

After Installation, the next step to use Web3Auth is to Initialize the SDK. The Initialization is a two step process,
After Installation, the next step to use Web3Auth is to Initialize the SDK. The Initialization is a two-step process,

- [Importing Required Packages](#importing-required-packages)
- [Instantiating Web3Auth](#instantiating-web3auth)

Please note that these are the most critical steps where you need to pass on different parameters according to the preference of your project.
Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customise your Web3Auth Instance.
Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customize your Web3Auth Instance.

#### Importing `Web3Auth`

Expand Down Expand Up @@ -193,19 +193,13 @@ We need `clientId` and target Web3Auth `network` to initialize the `web3auth` ob

- You can get your `clientId` from registering (above) on the Developer Dashboard.

- `network` signifies the network on which the deployed Web3Auth nodes are running. For testing purposes, we have a `TESTNET` network. For production
usage, you can use the `CYAN`, `MAINNET`, & `AQUA` networks.

:::danger

Please don't use the `TESTNET` network for production usage. You may end up losing user keys.

:::
- `network` signifies the network on which the deployed Web3Auth nodes are running. For testing purposes, we have a `Sapphire Devnet` network. For
production usage, you can use the `Sapphire Mainnet` network.

```tsx
const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
clientId,
network: OPENLOGIN_NETWORK.CYAN, // MAINNET, AQUA, CYAN or TESTNET
network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // SAPPHIRE_MAINNET or SAPPHIRE_DEVNET
loginConfig: {
// Add login configs corresponding to the provider
// Auth0 login works with jwt login config
Expand All @@ -229,8 +223,8 @@ const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {

#### Logging in

Once initialized, you can use the `login` function of `web3auth` to navigate user to the login process. For each login method, you have to select the
`loginProvider` such as `google`, `facebook`, `twitch`, `jwt`, `email_passwordless` etc.
Once initialized, you can use the `login` function of `web3auth` to navigate the user to the login process. For each login method, you have to select
the `loginProvider` such as `google`, `facebook`, `twitch`, `jwt`, `email_passwordless` etc.

:::info JWT

Expand All @@ -246,7 +240,7 @@ transactions. We can get an `ed25519` compatible private key for other blockchai
```tsx
await web3auth.login({
redirectUrl: resolvedRedirectUrl,
mfaLevel: "default", // Pass on the mfa level of your choice: default, optional, mandatory, none
mfaLevel: "default", // Pass on the MFA level of your choice: default, optional, mandatory, none
// Auth0 login works with JWT loginProvider
loginProvider: "jwt",
extraLoginOptions: {
Expand Down Expand Up @@ -280,7 +274,7 @@ var userInfo = web3auth.userInfo();

<ReactNativeResponse />

Using the `web3Auth.login()` function, you can get the details of the logged in user. Please note that these details are not stored anywhere in
Using the `web3Auth.login()` function, you can get the details of the logged-in user. Please note that these details are not stored anywhere in
Web3Auth network.

### Logout
Expand All @@ -299,17 +293,21 @@ web3auth.logout();

## Interacting with the Blockchain

Once a user logs in, the user can ccess the private key by `web3auth.privKey()`. For EVM Blockchains, the `secp256k1` private key is used to sign
Once a user logs in, the user can access the private key by `web3auth.privKey()`. For EVM Blockchains, the `secp256k1` private key is used to sign
transactions. We can get an `ed25519` compatible private key for other blockchains using `web3auth.ed25519Key()`. Similar to how we're using this
private key in the `ethers.js` library in this example, you can connect to any other blockchain of your choice.

:::info connect any blockchain

Please go through the [Connect Blockchain](/connect-blockchain/ethereum/react-native) Documentation, which contains all the details of the EVM based
Please go through the [Connect Blockchain](/connect-blockchain/ethereum/react-native) Documentation, which contains all the details of the EVM-based
blockchain you have selected here.

:::

## Troubleshooting React Native issues

Some commonly faced issues and the ways to fix them are addressed in this [troubleshooting guide](/troubleshooting/metro-issues).

## Example code

The code for the application we developed in this guide can be found in the
Expand Down
80 changes: 34 additions & 46 deletions src/pages/content-hub/guides/react-native-expo-auth0.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,8 @@ import Auth0VerifierSetup from "@site/src/common/guides/_auth0-verifier-setup.md
import SetupWeb3AuthDashboard from "@site/src/common/guides/_setup-web3auth-dashboard.mdx";
import Web3AuthPrerequisites from "@site/src/common/guides/_web3auth-prerequisites.mdx";
import ReactNativeResponse from "@site/src/common/sdk/pnp/react-native/_get-user-info.mdx";
import RNExpoDeepLink from "@site/src/common/sdk/pnp/react-native/_rn-expo-deep-link.mdx";
import SEO from "@site/src/components/SEO";
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";

<SEO
title="Using Auth0 with Web3Auth React Native SDK in Expo Workflow"
Expand Down Expand Up @@ -54,7 +53,7 @@ When integrating Web3Auth React Native SDK with Auth0 the flow looks something l

- When a user logs in with `Auth0`, Auth0 sends a JWT `id_token` to the app. This JWT token is sent to the Web3Auth SDK's login function.

- Finally, on successful validation of the JWT token, Web3Auth SDK will generate a private key for the user, in a self custodial way, resulting in
- Finally, on successful validation of the JWT token, Web3Auth SDK will generate a private key for the user, in a self-custodial way, resulting in
easy onboarding for your user to the application.

## Prerequisites
Expand Down Expand Up @@ -83,37 +82,14 @@ When integrating Web3Auth React Native SDK with Auth0 the flow looks something l

### Configure Deep Link

- Adding URL scheme to `app.json`

To allow the Expo based SDK to work with exported Expo Android apps, you need to add the designated scheme into `app.json`

```json title="app.json"
{
"expo": {
"scheme": "web3authexpoexample" // replace with your own scheme
}
}
```

- For constructing your `redirectUrl`, you'll need to use the `expo-linking`, which will help you generate a `redirectUrl` for your app. Make sure you
register that URL in the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).

```tsx title="App.js"
import Constants, { AppOwnership } from "expo-constants";
import * as Linking from "expo-linking";

const resolvedRedirectUrl =
Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
? Linking.createURL("web3auth", {})
: Linking.createURL("web3auth", { scheme: scheme });
```
<RNExpoDeepLink />

## Using the Web3Auth SDK

To use the Web3Auth SDK, you need to add the dependency of the respective platform SDK of Web3Auth to your project. To know more about the available
SDKs, please have a look at this [documentation page](/sdk).

For this guide here, we will be talking through the [Web3Auth React Native SDK](/sdk/pnp/react-native).
For this guide, we will be talking through the [Web3Auth React Native SDK](/sdk/pnp/react-native).

### Installation

Expand All @@ -125,22 +101,30 @@ npm install --save @web3auth/react-native-sdk

#### Expo Web Browser

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

```shell
expo install expo-web-browser
```

#### Expo Secure Store

We will require a `SecureStore` implementation to allow for session management without storing the private key on the device.

```shell
expo install expo-secure-store
```

### Initialization

After Installation, the next step to use Web3Auth is to Initialize the SDK. The Initialization is a two step process,
After Installation, the next step to use Web3Auth is to Initialize the SDK. The Initialization is a two-step process,

- [Importing Required Packages](#importing-required-packages)
- [Instantiating Web3Auth](#instantiating-web3auth)

Please note that these are the most critical steps where you need to pass on different parameters according to the preference of your project.
Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customise your Web3Auth Instance.
Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customize your Web3Auth Instance.

#### Importing `Web3Auth`

Expand All @@ -156,6 +140,12 @@ import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from "@web3auth/react-nat
import * as WebBrowser from "expo-web-browser";
```

#### Importing `SecureStore` implementation

```typescript
import * as SecureStore from "expo-secure-store";
```

#### Instantiating Web3Auth

It's time to create an instance of Web3Auth in the project.
Expand All @@ -164,19 +154,13 @@ We need `clientId` and target Web3Auth `network` to initialize the `web3auth` ob

- You can get your `clientId` from registering (above) on the Developer Dashboard.

- `network` signifies the network on which the deployed Web3Auth nodes are running. For testing purposes, we have a `TESTNET` network. For production
usage, you can use the `CYAN`, `MAINNET`, & `AQUA` networks.

:::danger

Please don't use the `TESTNET` network for production usage. You may end up losing user keys.

:::
- `network` signifies the network on which the deployed Web3Auth nodes are running. For testing purposes, we have a `Sapphire Devnet` network. For
production usage, you can use the `Sapphire Mainnet` network.

```tsx
const web3auth = new Web3Auth(WebBrowser, {
const web3auth = new Web3Auth(WebBrowser, SecureStore, {
clientId,
network: OPENLOGIN_NETWORK.CYAN, // MAINNET, AQUA, CYAN or TESTNET
network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // SAPPHIRE_MAINNET or SAPPHIRE_DEVNET
loginConfig: {
// Add login configs corresponding to the provider
// Auth0 login works with jwt login config
Expand All @@ -200,8 +184,8 @@ const web3auth = new Web3Auth(WebBrowser, {

#### Logging in

Once initialized, you can use the `login` function of `web3auth` to navigate user to the login process. For each login method, you have to select the
`loginProvider` such as `google`, `facebook`, `twitch`, `jwt`, `email_passwordless` etc.
Once initialized, you can use the `login` function of `web3auth` to navigate the user to the login process. For each login method, you have to select
the `loginProvider` such as `google`, `facebook`, `twitch`, `jwt`, `email_passwordless` etc.

:::info JWT

Expand All @@ -217,7 +201,7 @@ transactions. We also return an `ed25519` compatible private key for other block
```tsx
const web3authResponse = await web3auth.login({
redirectUrl: resolvedRedirectUrl,
mfaLevel: "default", // Pass on the mfa level of your choice: default, optional, mandatory, none
mfaLevel: "default", // Pass on the MFA level of your choice: default, optional, mandatory, none
// Auth0 login works with JWT loginProvider
loginProvider: "jwt",
extraLoginOptions: {
Expand Down Expand Up @@ -251,7 +235,7 @@ var userInfo = web3authResponse.userInfo;

<ReactNativeResponse />

Using the `web3Auth.login()` function, you can get the details of the logged in user. Please note that these details are not stored anywhere in
Using the `web3Auth.login()` function, you can get the details of the logged-in user. Please note that these details are not stored anywhere in
Web3Auth network.

### Logout
Expand All @@ -276,11 +260,15 @@ library in this example, you can connect to any other blockchain of your choice.

:::info connect any blockchain

Please go through the [Connect Blockchain](/connect-blockchain/ethereum/react-native) Documentation, which contains all the details of the EVM based
Please go through the [Connect Blockchain](/connect-blockchain/ethereum/react-native) Documentation, which contains all the details of the EVM-based
blockchain you have selected here.

:::

## Troubleshooting React Native issues

Some commonly faced issues and the ways to fix them are addressed in this [troubleshooting guide](/troubleshooting/metro-issues).

## Example code

The code for the application we developed in this guide can be found in the
Expand Down
Loading

0 comments on commit 62d70a8

Please sign in to comment.