@openfort/openfort-react

Openfort react Library

Website | Documentation | API Docs | Twitter

Installation

npm install @openfort/openfort-react

Usage

This library provides way to hande OpenfortJS in react applications.

Initialization

The OpenfortProvider component should be initialized at the root of your application. It takes a publishableKey prop which is your Openfort publishable key.

import { OpenfortProvider } from '@openfort/openfort-react';

const App = () => {
  return (
    <OpenfortProvider publishableKey={"pk_XXXX"}>
      <div>
        <h1>Openfort React Library</h1>
      </div>
    </OpenfortProvider>
  );
};

useOpenfort

This hook returns the Openfort instance and loading state.

import { useOpenfort } from '@openfort/openfort-react';
const { openfort, loading: openfortLoading } = useOpenfort();

if (openfortLoading) return <p>Loading Openfort...</p>;

// here you can use openfort instance as explained in [OpenfortJS](https://github.com/openfort-xyz/openfort-js)

waitUntilAuthenticated

If you authenticate the user using Openfort, you can use this helper function to wait until the user is authenticated. For example in the case of use of Embedded Signer and creation of non-custodial account.

import { waitUntilAuthenticated } from '@openfort/openfort-react';
await openfort.authorizeWithOAuthToken(OAuthProvider.Firebase, idToken);

try {
    await openfort.configureEmbeddedSigner(chainId);
} catch (error) {
    if (error instanceof MissingRecoveryMethod) {
        const password = requestPasswordToUser();

        const passwordRecovery = new PasswordRecovery(password);
        await openfort.configureEmbeddedSignerRecovery(passwordRecovery);
    }
}

await waitUntilAuthenticated(openfort);