# React Native SDK in Expo - \`login\` error

**URL:** <https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [August 4, 2025, 6:06am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987 "2025-08-04T06:06:05Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![marx](https://avatars.discourse-cdn.com/v4/letter/m/ecb155/32.png) [@marx](https://builder.metamask.io/u/marx)\
**Post date:** [August 4, 2025, 6:06am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/1 "2025-08-04T06:06:05Z")

</div>

> **🏛 Content from Web3Auth Community**
> 
> This topic was originally posted by **marx** on 8/4/2025.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

Hey team, I am facing some 2 issues with the PnP `@web3auth/react-native-sdk` library.

### Context - my Setup

```auto
// package.json - Relevant libraries 
“dependencies”: {
“expo”: “^52.0.40”,
“@web3auth/react-native-sdk”: “^8.0.0”,
},
“devDependencies”: {
“buffer”: “^6.0.3”,
“crypto-browserify”: “^3.12.1”,
“empty-module”: “^0.0.2”,
“process”: “^0.11.10”,
“react-native-get-random-values”: “^1.11.0”,
“readable-stream”: “^4.7.0”,
}

```

### Issue #1 - base64FromArrayBuffer is not a function

I have copied the same exact code used in the Expo example’s (App.tsx) over to a Screen in my repo.

The code executed up till the `await web3auth.login({ .. })` function where this error was thrown in the Console.

I then ran the example separately and it worked \> opened the browser \> login \> retrieve User Info…etc.

I have set up my project as close as I can to the [example](https://github.com/Web3Auth/web3auth-react-native-examples/tree/main/rn-expo-example) as much as I can. Files like these are **exactly the same (line by line)** in my repo and the example:

- `globals.js`
- `metro.config.js`

But I still can’t get past this error.

### Issue #2 - Custom JWT connection.

We run our own auth backend and have our own custom JWT auth. Users would have already been logged in/authenticated before fetching their Wallets.

We have also followed the Custom Auth guide and created our own Custom Connection in our Web3Auth Dashboard and verified that our token is indeed publicly verifiable using a tool like [https://jwt.davetonge.co.uk/](https://jwt.davetonge.co.uk/).

The problem is that it is not obvious how we can create & retrieve wallet info using the react-native-sdk with a custom connection. Can someone please help point us in the right direction?

---

<div class="post-metadata">

**Author:** ![w3abot](https://avatars.discourse-cdn.com/v4/letter/w/4da419/32.png) [@w3abot](https://builder.metamask.io/u/w3abot)\
**Post date:** [August 4, 2025, 6:07am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/2 "2025-08-04T06:07:00Z")

</div>

Thanks for the detailed report, Marx! Here’s a summary of your issues and what the support team will need to assist you:

* * *

### **Issue #1: `base64FromArrayBuffer is not a function` Error**

**Context:**

- **SDK:** `@web3auth/react-native-sdk`
- **Version:** `^8.0.0`
- **Platform:** React Native (using Expo)
- **Setup:** You’ve matched the official [Expo example](https://github.com/Web3Auth/web3auth-react-native-examples/tree/main/rn-expo-example) line-by-line, including `globals.js` and `metro.config.js`.
- **Error:** Occurs at `await web3auth.login({ ... })`. The same code works in the official example repo, but not in your project.

**Dependencies from `package.json`:**

```json
"expo": "^52.0.40",
"@web3auth/react-native-sdk": "^8.0.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.1",
"empty-module": "^0.0.2",
"process": "^0.11.10",
"react-native-get-random-values": "^1.11.0",
"readable-stream": "^4.7.0"

```

**Next Steps / Request:**

- Could you please share the exact stack trace or a screenshot of the error in your console? This will help pinpoint if it’s a polyfill, import, or bundler issue.
- Double-check that your `babel.config.js` and `app.json` match the example as well, since subtle differences can affect Expo’s bundling.
- If you’re using a custom Metro or Babel config, please share those snippets.

**Reference:**

- [Web3Auth Expo Example](https://github.com/Web3Auth/web3auth-react-native-examples/tree/main/rn-expo-example)
- [Expo Integration Docs](https://web3auth.io/docs/sdk/mobile/pnp/react-native/expo)

* * *

### **Issue #2: Custom JWT Authentication with React Native SDK**

**Context:**

- You have a custom backend with JWT-based authentication.
- You’ve set up a custom verifier in the Web3Auth Dashboard and confirmed your JWT is publicly verifiable.
- You’re unsure how to use your JWT to create/retrieve wallet info with the SDK.

**What You Need To Do:**

1. **Configure `loginConfig`** in your Web3Auth initialization:

```js
const web3auth = new Web3Auth(WebBrowser, {
  clientId: "YOUR_CLIENT_ID",
  network: WEB3AUTH_NETWORK.MAINNET, // or your network
  loginConfig: {
    jwt: {
      verifier: "YOUR_VERIFIER_NAME", // from Dashboard
      typeOfLogin: TypeOfLogin.JWT,
      clientId: "YOUR_CLIENT_ID",
    },
  },
});

```

2. **Login with your JWT:**

```js
await web3auth.login({
  loginProvider: LOGIN_PROVIDER.JWT,
  redirectUrl: `${scheme}://auth`,
  extraLoginOptions: {
    id_token: "YOUR_JWT_ID_TOKEN", // from your backend
    verifierIdField: "sub", // or the field you use as the user identifier
  },
});

```

  - Make sure your JWT’s payload field (e.g., `sub`, `email`, etc.) matches the “Verifier ID” field set in your Dashboard.
  - If you use a custom JWKS endpoint, ensure it’s public and accessible.

**References:**

- [Custom Authentication in React Native SDK](https://web3auth.io/docs/sdk/mobile/pnp/react-native/custom-authentication)
- [JWT Integration Example](https://web3auth.io/docs/sdk/web/modal/custom-authentication/jwt)
- [Aggregate Verifier Example](https://web3auth.io/docs/sdk/mobile/pnp/react-native/custom-authentication#aggregate-verifier)

**Request:**

- Please share your `loginConfig` and login code snippet if you’re still seeing issues.
- If you get a specific error message when attempting JWT login, please include that (or a screenshot).

* * *

#### **Summary for Support Team**

- **SDK:** `@web3auth/react-native-sdk` v8.0.0
- **Platform:** React Native (Expo)
- **Issue 1:** `base64FromArrayBuffer is not a function` at login, despite matching the example repo.
- **Issue 2:** Needs guidance on using custom JWT auth with the SDK. Has custom verifier and valid JWT, but unclear on wiring it up.

* * *

Let us know if you can provide the requested code snippets or error screenshots for faster troubleshooting!

> Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

> Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. [Web3Auth Developer Office Hours](https://web3auth.io/community/t/web3auth-developer-office-hours/8777)

---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [August 4, 2025, 12:09pm UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/3 "2025-08-04T12:09:40Z")

</div>

Hey @marx  
Hello again  
For issue 1 I believe you’ve followed the example line by line for metro.config and globals.js.  
But can you please share App.tsx with me. I need to ensure some imports.

For issue 2, please try out the snippet sent by the bot reply just before this post. Let me know if that doesn’t help.

---

<div class="post-metadata">

**Author:** ![marx](https://avatars.discourse-cdn.com/v4/letter/m/ecb155/32.png) [@marx](https://builder.metamask.io/u/marx)\
**Post date:** [August 5, 2025, 2:50am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/4 "2025-08-05T02:50:31Z")

</div>

### Issue 1

Hey Marhashi, thanks for the quick reply. Here’s my `App.tsx`. I’ve removed my `clientId` so it’s not shared publicly.

```auto
import React, { useState, useEffect } from "react";
import {
  Button,
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  View,
  TextInput,
} from "react-native";
import Constants, { AppOwnership } from "expo-constants";
import * as Linking from "expo-linking";
import "react-native-get-random-values";
import "@ethersproject/shims";
import "../../../globals";
// IMP START - Quick Start
import * as WebBrowser from "expo-web-browser";
import * as SecureStore from "expo-secure-store";
import Web3Auth, {
  WEB3AUTH_NETWORK,
  LOGIN_PROVIDER,
  ChainNamespace,
} from "@web3auth/react-native-sdk";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
// IMP END - Quick Start
import { ethers } from "ethers";
import { ACCESS_TOKEN_KEY } from "@/constants/constants";
import AsyncStorage from "@react-native-async-storage/async-storage";
// IMP START - Whitelist bundle ID
const redirectUrl =
//@ts-ignore
Constants.appOwnership == AppOwnership.Expo ||
Constants.appOwnership == AppOwnership.Guest
? Linking.createURL(“web3auth”, {})
: Linking.createURL(“web3auth”, { scheme: “web3authexpoexample” });
// IMP END - Whitelist bundle ID
// IMP START - Dashboard Registration
const clientId = “”; // get from https://dashboard.web3auth.io
// IMP END - Dashboard Registration
// IMP START - SDK Initialization
const chainConfig = {
chainNamespace: ChainNamespace.EIP155,
chainId: “0xaa36a7”,
rpcTarget: “https://1rpc.io/sepolia”,
// Avoid using public rpcTarget in production.
// Use services like Infura, Quicknode etc
displayName: “Ethereum Sepolia Testnet”,
blockExplorerUrl: “https://sepolia.etherscan.io”,
ticker: “ETH”,
tickerName: “Ethereum”,
decimals: 18,
logo: “https://cryptologos.cc/logos/ethereum-eth-logo.png”,
};
const ethereumPrivateKeyProvider = new EthereumPrivateKeyProvider({
config: {
chainConfig,
},
});
const web3auth = new Web3Auth(WebBrowser, SecureStore, {
clientId,
// IMP START - Whitelist bundle ID
redirectUrl,
// IMP END - Whitelist bundle ID
network: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, // or other networks
privateKeyProvider: ethereumPrivateKeyProvider,
loginConfig: {
jwt: {
verifier: “talon-local”, // from Dashboard
typeOfLogin: “jwt”,
clientId: clientId,
},
},
});
// IMP END - SDK Initialization
export default function App() {
const [loggedIn, setLoggedIn] = useState(false);
const [provider, setProvider] = useState<any>(null);
const [console, setConsole] = useState<string>(“”);
const [email, setEmail] = useState<string>(“”);
useEffect(() => {
const init = async () => {
// IMP START - SDK Initialization
await web3auth.init();
  if (web3auth.connected) {
    // IMP END - SDK Initialization
    setProvider(ethereumPrivateKeyProvider);
    setLoggedIn(true);
  }
};
init();

}, );
const login = async () => {
const accessToken = await AsyncStorage.getItem(ACCESS_TOKEN_KEY);
try {
if (!web3auth.ready) {
setConsole(“Web3auth not initialized”);
return;
}
if (!email) {
setConsole(“Enter email first”);
return;
}
  setConsole("Logging in");
  // IMP START - Login - ERROR HERE
  await web3auth.login({
    loginProvider: LOGIN_PROVIDER.JWT,
    extraLoginOptions: {
      id_token: accessToken,
      verifier: "uuid",
    },
  });

  if (web3auth.connected) {
    // IMP END - Login
    setProvider(ethereumPrivateKeyProvider);
    uiConsole("Logged In");
    setLoggedIn(true);
  }
} catch (e: any) {
  setConsole(e.message);
}

```

### Issue 2 - Custom JWT login

Sure, but I can’t tell if it’s working or not - `login` is still stuck at `globa.base64FromArrayBuffer is not a function (it is undefined)`

---

<div class="post-metadata">

**Author:** ![marx](https://avatars.discourse-cdn.com/v4/letter/m/ecb155/32.png) [@marx](https://builder.metamask.io/u/marx)\
**Post date:** [August 5, 2025, 3:00am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/5 "2025-08-05T03:00:34Z")

</div>

### Issue 1

For what it’s worth, I’ve also tried an alternative approach where the necessary imports were initialized earlier but that did not work as well. Specifically:

```auto
// in package.json
{
...
  "main": "./AppEntry.tsx", // <-- [New] App Entry
...
}
// in AppEntry.tsx
import “react-native-get-random-values”;
import “@ethersproject/shims”;
import “./globals”;

```

I see that the Shims are injected from the console in BOTH approaches (importing in Entry AND importing in the Screen directly. Which validates that the polyfill code at least ran in both approaches.

```auto
Shims Injected:
- nextTick

```

But I’m still getting the same error so I dug further:

### My investigations in the Web3Auth source code

The `global.base64FromArrayBuffer` is thrown from the file `web3Auth.js`. It is thrown exactly in:

```auto
async authHandler(...) {
  const loginUrl = utils.constructURL({
      baseURL: url,
      hash: {
        b64Params: auth.jsonToBase64(configParams) // <-- this func
      }
    });
};

```

Stepping deeper into `web3auth > auth > dist > lib.cjs > utils > utils.js`

```auto
var base64urlLib = require('base64url');

```

Stepping deeper into `base64url > dist > base64url.js`

```auto
function encode(input, encoding) {
    if (encoding === void 0) { encoding = "utf8"; }
    if (Buffer.isBuffer(input)) {
        return fromBase64(input.toString("base64"));
    }
    return fromBase64(Buffer.from(input, encoding).toString("base64")); <-- Error thrown here (Buffer.from())
}

```

### Findings

1. The issue is likely that `Buffer` is not polyfilled correctly in my setup
2. [Issue #2] We do not need to construct and open a `loginUrl` to begin with since we are using a custom JWT auth - our Users are already authenticated with a Token with our own custom Auth. I also can’t seem to find a different pathway in `web3Auth`’s `login()` source code when `loginConfig.jwt` is defined.

---

<div class="post-metadata">

**Author:** ![marx](https://avatars.discourse-cdn.com/v4/letter/m/ecb155/32.png) [@marx](https://builder.metamask.io/u/marx)\
**Post date:** [August 7, 2025, 2:17am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/6 "2025-08-07T02:17:33Z")

</div>

Friendly bump @maharshi 🙂 , what do you think?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/082cfc3a14103b01cfa5ef7d85f1121a23fa3e81.png) [@system](https://builder.metamask.io/u/system)\
**Post date:** [August 9, 2025, 2:17am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/7 "2025-08-09T02:17:58Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [August 11, 2025, 3:12am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/8 "2025-08-11T03:12:06Z")

</div>



---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [August 11, 2025, 4:10am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/9 "2025-08-11T04:10:36Z")

</div>

Yes  
i believe the same  
The Issue#1 is due to some issue with polyfilling  
For Issue #2

### Steps to resolve:

1. **Verify JWT Setup in Web3Auth:**  
Ensure your JWT is correctly configured with the Web3Auth Dashboard and is publicly verifiable. Confirm that the `verifier` and JWT fields (like `sub` or `email`) match the expected configuration.

2. **Modify Login Code:**  
You seem to be on the right track with JWT login configuration. Here’s a refined example to ensure proper JWT authentication:

3. **Check for Errors and Debugging:**  
If you encounter errors, check if the JWT is properly formatted and ensure your backend is correctly issuing the token. You can use tools like [JWT.io](https://jwt.io/) to decode and verify the token.

---

<div class="post-metadata">

**Author:** ![marx](https://avatars.discourse-cdn.com/v4/letter/m/ecb155/32.png) [@marx](https://builder.metamask.io/u/marx)\
**Post date:** [August 11, 2025, 10:00am UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/10 "2025-08-11T10:00:55Z")

</div>

Hey @marhashi, can we mark this topic as unsolved?

### Issue #1 - Closed

I managed to getaround the Polyfill issue by adding the polyfill code at the top of the file with the web3Auth funcs (App.tsx)

```auto
global.Buffer = require("buffer").Buffer;

```

### Issue 2

The code suggested does not address the main problem of Custom JWT - Our Users are already authenticated with a token.

- The Token is already verified. I’ve confirmed this with [JWT.io](http://JWT.io).
- The custom Auth is already created on our Web3 Auth Dashboard.

There’s no obvious function to use with react-native PNP to connect to wallets. There’s a `useWeb3AuthConnect` or `connectTo/connect` functions in the Web Web3Auth SDKs. IS there something similar we can use for Expo/React-native? @maharshi

---

<div class="post-metadata">

**Author:** ![maharshi](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/maharshi/32/1525_2.png) [@maharshi](https://builder.metamask.io/u/maharshi)\
**Post date:** [August 14, 2025, 12:07pm UTC](https://builder.metamask.io/t/react-native-sdk-in-expo-login-error/987/11 "2025-08-14T12:07:45Z")

</div>

Until the V10 web equivalent for React native SDK is not released, the syntax stays a little different.  
For now here’s a reference for you  
This example uses the Firebase login: [web3auth-react-native-examples/rn-bare-firebase-example/App.tsx at main · Web3Auth/web3auth-react-native-examples · GitHub](https://github.com/Web3Auth/web3auth-react-native-examples/blob/main/rn-bare-firebase-example/App.tsx)

Please join the office hours happening today for dedicated support: [Web3Auth Developer Office Hours](https://web3auth.io/community/t/web3auth-developer-office-hours/8777)