> ## 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:

> [card] [JavaScript SDK](https://static.methodfi.com/opal/v1/stable/init.js)
>
> For vanilla JavaScript applications

> [card] [React SDK](https://www.npmjs.com/package/@methodfi/opal-react)
>
> For React applications

> [card] [React Native SDK](https://www.npmjs.com/package/@methodfi/opal-react-native)
>
> For React Native applications

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

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

> [tab] 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] 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} />;
> }
> ```

## 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](https://docs.methodfi.com/opal/events.md) for structure and sample payloads


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.