> 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/sdk-reference/provider-initialisation.md).

# Provider Initialisation

{% hint style="info" %}
This function does not trigger any UI elements
{% endhint %}

## Description

The base component for the Metafi SDK which takes in your API Key, unique user ID, and other options as props.

## Details

### Signature

```jsx
<MetafiProvider 
    apiKey={apiKey} 
    secretKey={secretKey} 
    supportedChains={[supportedChains]}
    customTokens={[customTokens]}
    options={options}
    metafiSSO={metafiSSO}
    pwdRecoveryMeta={pwdRecoveryMeta}
>
```

### Arguments

<table><thead><tr><th width="211">Parameter</th><th width="89">Type</th><th>Definition</th></tr></thead><tbody><tr><td><code>apiKey</code></td><td>String</td><td>Your API Key. This can be displayed publicly</td></tr><tr><td><code>secretKey</code></td><td>String</td><td>Your Secret Key. Keep this securely and do not expose.</td></tr><tr><td><code>supportedChains</code></td><td>Array</td><td>An array of chains supported by your application. Please refer to the section on <a href="/react-sdk/constants/chain.md">Chains</a> for more information on what chains we support.</td></tr><tr><td><code>customTokens</code></td><td>Array</td><td>An array of custom tokens that you want supported in your users wallet. Please refer to the section on <a href="/react-sdk/sdk-reference/registertoken.md">registering a custom token</a> for more information.</td></tr><tr><td><code>options</code></td><td>Object</td><td><p>A list of options to customise the look and feel of how the Metafi wallet looks. Here you can pass in a custom logo, as well as theme styling options. More information can be found in the <a href="/react-sdk/ui-customization.md">UI customisation</a> section.</p><pre class="language-json"><code class="lang-json">{
    "logo": "./logo.png", // pass in the URL or path to your logo
    "theme": {
        "fontColors": { 
            "primary": '#ffffff', 
            "secondary": '#e8e8e8'
        },
        "bgColor": 'linear-gradient(40deg, rgba(209,29,255,1) 0%, rgba(7,52,235,1) 100%)',
        "ctaButton": {
            "color": '#430aa0',
            "fontColor": '#ffffff'
        },
        "optionButton": {
            "color": 'rgba(0,0,0,0.1)',
            "fontColor": '#ffffff'
        },
        "metafiLogoColor": 'light',
    },
}
</code></pre></td></tr><tr><td><code>metafiSSO</code></td><td>Object</td><td><p>Specify options related to metafiSSO. Sample object: </p><pre><code>{
    enabled: true,
}
</code></pre></td></tr></tbody></table>

### Return Value

N/A

## Example

{% code lineNumbers="true" %}

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

function App() {
    const options = {
        logo: "./logo-reverse.png",
        theme: {
            fontColors: {
                primary: "rgb(219 235 234)",
                secondary: "#e8e8e8"
            },
            bgColor: "linear-gradient(227.3deg, #013742 0%, #192434 100.84%)",
            ctaButton: {
                color: "rgba(255,255,255,0.5)",
                fontColor: "rgba(255,255,255)",
                disabled: {
                    color: "rgba(255,255,255,0.2)",
                    fontColor: "rgba(255,255,255, 0.5)",
                }
            },
            optionButton: {
                color: "rgba(255,255,255,0.2)",
                fontColor: "#fff"
            },
            metafiLogoColor: 'light',
        },
    }
    
    const wethToken = RegisterToken(
        'Wrapped Ethereum', 
        'goerliWETH', 
        chains.goerli, 
        'https://d2qdyxy3mxzsfv.cloudfront.net/images/logo/ethereum.png',  
        '0xb4fbf271143f4fbf7b91a5ded31805e42b2208d6',
        18, 
    )

    return (
            <MetafiProvider
                apiKey={'live-demo-key'}
                secretKey={'live-secret-key'}
                supportedChains={[chains.eth,chains.goerli,chains.mumbai,chains.matic]}
                options={options[0]}
                customTokens={[wethToken]}
                metafiSSO={{ enabled:true }}
            >        
                <div>
                    <header>
                        {childComponents}
                    </header>
                </div>
        </MetafiProvider>
    );
}
```

{% endcode %}