# How to integrate browser wallet extension into react app

**URL:** <https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431>\
**Category:** General\
**Tags:** faqs\
**Created:** [January 14, 2023, 4:04pm UTC](https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431 "2023-01-14T16:04:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucidity0x](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/lucidity0x/32/754_2.png) [@lucidity0x](https://forum.fuel.network/u/lucidity0x)\
**Post date:** [January 14, 2023, 4:04pm UTC](https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431/1 "2023-01-14T16:04:56Z")

</div>

i am trying to integrate the browser wallet into a react front end (following the fuel wallet API docs - [API | Fuel Wallet](https://fuels-wallet.vercel.app/docs/api/)). The property ‘fuel’ can not be accessed with `window.fuel.connect();`

imports are

import Fuel from ‘@fuel-ts/wallet’;  
import { Wallet } from “fuels”;

i have included the relevant fuel sdk imports in the tsconfig.json file and installed the relevant dependencies.

Any ideas?

---

<div class="post-metadata">

**Author:** ![cipoto](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/cipoto/32/87_2.png) [@cipoto](https://forum.fuel.network/u/cipoto)\
**Post date:** [January 15, 2023, 12:49pm UTC](https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431/2 "2023-01-15T12:49:07Z")

</div>

I have some problem with you. No body know 🙂

---

<div class="post-metadata">

**Author:** ![matt](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/matt/32/6_2.png) [@matt](https://forum.fuel.network/u/matt)\
**Post date:** [January 15, 2023, 7:59pm UTC](https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431/3 "2023-01-15T19:59:52Z")

</div>

Hi,

To help us figure out and solve your problem could you tell us what version of the `@fuel-ts/sdk` you are using?

---

<div class="post-metadata">

**Author:** ![stacio](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@stacio](https://forum.fuel.network/u/stacio)\
**Post date:** [January 15, 2023, 9:43pm UTC](https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431/4 "2023-01-15T21:43:01Z")

</div>

The `window.fuel` object can be undefined for a couple of milliseconds before it’s accessible. This happens because the fuel injection happens after the page scripts, like your react app, are loaded.

You can create a hook to wrap up this and solve the issue. You can find some examples here on how to create: [fuels-wallet/useFuel.tsx at master · FuelLabs/fuels-wallet · GitHub](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/docs/src/hooks/useFuel.tsx)

---

<div class="post-metadata">

**Author:** ![lucidity0x](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/lucidity0x/32/754_2.png) [@lucidity0x](https://forum.fuel.network/u/lucidity0x)\
**Post date:** [January 19, 2023, 12:07am UTC](https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431/5 "2023-01-19T00:07:01Z")

</div>

> [@matt](#):
>
> @fuel-ts/sdk

v0.29.1, sorry for the late response

---

<div class="post-metadata">

**Author:** ![lucidity0x](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/lucidity0x/32/754_2.png) [@lucidity0x](https://forum.fuel.network/u/lucidity0x)\
**Post date:** [January 19, 2023, 12:09am UTC](https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431/6 "2023-01-19T00:09:09Z")

</div>

it still is not accessible.

“Property ‘fuel’ does not exist on type ‘Window & typeof globalThis’.”

---

<div class="post-metadata">

**Author:** ![matt](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/matt/32/6_2.png) [@matt](https://forum.fuel.network/u/matt)\
**Post date:** [January 19, 2023, 4:15pm UTC](https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431/7 "2023-01-19T16:15:24Z")

</div>

Sorry I asked for the version of the wrong dependency. What is your version of @fuel-wallet/sdk ? Also could you send your tsconfig just so we can double check it

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex022/uploads/fuel/original/2X/5/57d5a345cc15a64b636e0d56e042857f8a0e80b1.png) [@system](https://forum.fuel.network/u/system)\
**Post date:** [February 20, 2023, 6:55am UTC](https://forum.fuel.network/t/how-to-integrate-browser-wallet-extension-into-react-app/1431/8 "2023-02-20T06:55:50Z")

</div>

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