> ## Documentation Index
> Fetch the complete documentation index at: https://docs.methodfi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Libraries

Method offers a variety of libraries for your frontend application to make integrating with Opal easy and simple.

## Frontend Libraries

Depending on your application, Method offers multiple frontend libraries to help you integrate with Opal:

<CardGroup cols={2}>
  <Card title="JavaScript SDK" icon="js" href="https://static.methodfi.com/opal/v1/stable/init.js">
    For vanilla JavaScript applications
  </Card>

  <Card title="React SDK" icon="react" href="https://www.npmjs.com/package/@methodfi/opal-react">
    For React applications
  </Card>

  <Card title="React Native SDK" icon="mobile" href="https://www.npmjs.com/package/@methodfi/opal-react-native">
    For React Native applications
  </Card>
</CardGroup>

All Opal SDKs provide:

* **Token Management**: Automatic token validation and refresh
* **Event Handling**: Comprehensive event system with typed callbacks
* **Error Management**: Enhanced error handling with detailed error codes
* **Security**: Built-in security features and validation

## Installation

<Tabs>
  <Tab title="JavaScript">
    ```html theme={null}
    <script src="https://static.methodfi.com/opal/v1/stable/init.js"></script>
    ```
  </Tab>

  <Tab title="React">
    ```bash theme={null}
    npm install @methodfi/opal-react
    ```

    ## Quick usage: React (Web)

    ```tsx theme={null}
    import { OpalProvider, useOpal, OpalEventType } from "@methodfi/opal-react";

    export default function App() {
      return (
        <OpalProvider>
          <YourApp />
        </OpalProvider>
      );
    }

    function YourApp() {
      const { open, close, isOpen, error } = useOpal({
        env: "dev",
        onOpen: () => {},
        onExit: () => {},
        onEvent: (event) => {
          switch (event.type) {
            case OpalEventType.SESSION_STARTED:
              // ...
              break;
            case OpalEventType.SESSION_COMPLETED:
              // ...
              break;
            case OpalEventType.SESSION_ERRORED:
              // ...
              break;
            case OpalEventType.SESSION_EXITED:
              // ...
              break;
          }
        },
      });

      const onLaunchOpal = async () => {
        const token = await getOpalToken(); // POST /opal/token
        open({ token });
      };

      return <button onClick={onLaunchOpal}>Launch Opal</button>;
    }
    ```
  </Tab>

  <Tab title="React Native">
    ```bash theme={null}
    npm install @methodfi/opal-react-native
    ```

    ## Quick usage: React Native (Mobile)

    ```tsx theme={null}
    import {
      OpalProvider,
      useOpal,
      OpalEventType,
    } from "@methodfi/opal-react-native";

    export default function App() {
      return (
        <OpalProvider>
          <YourScreen />
        </OpalProvider>
      );
    }

    function YourScreen() {
      const { open } = useOpal({
        env: "dev",
        onOpen: () => {},
        onExit: () => {},
        onEvent: (event) => {
          switch (event.type) {
            case OpalEventType.SESSION_STARTED:
              // ...
              break;
            case OpalEventType.SESSION_COMPLETED:
              // ...
              break;
            case OpalEventType.SESSION_ERRORED:
              // ...
              break;
            case OpalEventType.SESSION_EXITED:
              // ...
              break;
          }
        },
      });

      const onLaunchOpal = async () => {
        const token = await getOpalToken(); // POST /opal/token returns otkn_*
        open({ token });
      };

      return <Button title="Launch Opal" onPress={onLaunchOpal} />;
    }
    ```
  </Tab>
</Tabs>

## Testing in Development

When testing the Opal frontend in the dev environment, any modal step that prompts you to enter a six-digit verification code will accept any six-digit code. For example: `123456`.

## Notes

* Event types follow the format `<flow>.<object>.<action>` or `opal.session.<action>` for defaults
* See [Events](/opal/events) for structure and sample payloads