> For the complete documentation index, see [llms.txt](https://docs.usemeta.fi/react-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usemeta.fi/react-sdk/get-started.md).

# Get Started

{% hint style="warning" %}
You will need an API Key to get started. Get your key by signing up on the [Developer Portal](https://developer-test.usemeta.fi/).
{% endhint %}

## Demo

To view a sample integration, please refer to our [demo application](https://codesandbox.io/s/metafi-embedded-wallet-demo-qxqfdd?file=/src/App.js). Alternatively, please post any other questions on our [Discord](https://discord.gg/yaxvxEmuKn).

## Step 1: Install the library

First, install the library via your terminal.

<pre class="language-shell" data-line-numbers><code class="lang-shell"><strong># install via Yarn
</strong>yarn add @metafi/metafi-react-package

# or via NPM
npm install @metafi/metafi-react-package
</code></pre>

## Step 2a: Initialise Metafi Component

Next, wrap your top level component as follows with the Metafi provider.&#x20;

{% code lineNumbers="true" %}

```jsx
import { MetafiProvider, chains } from '@metafi/metafi-react-package';

function App() {
    return (
    <MetafiProvider 
        apiKey={apiKey} 
        secretKey={secretKey} 
        supportedChains={supportedChains}
        customTokens={customTokens}
        options={options}
        metafiSSO={metafiSSO}
    >
        <YourComponents>
        ...
        </YourComponents>
    </MetafiProvider>
    );
};
```

{% endcode %}

Refer to the section on [Provider Initialisation](/react-sdk/sdk-reference/provider-initialisation.md) for more information on `MetafiProvider`.

For more information on customising your wallet interface, please refer to the section on [UI Customisation](/react-sdk/ui-customization.md).

## Step 2b: Setup User Login

{% hint style="info" %}
This step is only required if you are using your own login/authentication mechanism
{% endhint %}

Go to the projects page of the [Developer Portal](https://developer-test.usemeta.fi/merchant/projects) and navigate to Settings. There you can update the URL which we will use to authenticate your user token. Once this URL is updated, you can create a wallet for a user by passing in their `userIdentifier` and `jwtToken` into our SDK.

More information on this can be found in the [Login](/react-sdk/sdk-reference/login.md) section of our documentation.

## Step 3: Function Invocation

You're done! You can now invoke the functions that you need.

{% code lineNumbers="true" %}

```jsx
import { useMetafi } from '@metafi/metafi-react-package';

function displayWallet(userIdentifier) {
    const { ShowWallet } = useMetafi();
    
    return (
        <>
           <button onClick={()=>ShowWallet()}>Show Wallet</button>
        </>
    );
};
```

{% endcode %}