# Frameworks

## Next.js App Router

See the [Getting Started guide](https://docs.orda.network/developers/widget-beta/broken-reference) for a complete Next.js App Router example with step-by-step instructions.

***

## Next.js Pages Router

For Next.js Pages Router, wrap your app in `_app.tsx`:

{% code title="pages/\_app.tsx" %}

```typescript
import type { AppProps } from 'next/app';
import '@ordanetwork/sdk/react/styles.css';
import { Providers } from '../components/Providers';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Providers>
      <Component {...pageProps} />
    </Providers>
  );
}
```

{% endcode %}

{% code title="components/Providers.tsx" %}

```typescript
'use client';

import { OrdaProvider, createAppKitConfig } from '@ordanetwork/sdk/react';

const appKitConfig = createAppKitConfig({
  projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
});

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OrdaProvider
      config={{
        getToken: async () => {
          const res = await fetch('/api/auth/jwt', { method: 'POST' });
          return res.json();
        },
        appKitConfig,
      }}
    >
      {children}
    </OrdaProvider>
  );
}
```

{% endcode %}

{% code title="pages/api/auth/jwt.ts" %}

```typescript
import type { NextApiRequest, NextApiResponse } from 'next';
import { UniversalHttpClient, JWT } from '@ordanetwork/sdk';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const httpClient = new UniversalHttpClient(
      process.env.NEXT_PUBLIC_ORDA_API_BASE_URL || 'https://api.orda.network/v1',
      30000
    );
    const jwtApi = new JWT(httpClient);

    const { token, expiresAt } = await jwtApi.generate({
      clientId: process.env.ORDA_CLIENT_ID!,
      clientSecret: process.env.ORDA_CLIENT_SECRET!,
      permissions: [
        'quotes:read',
        'offramp:read',
        'onramp:read',
        'transactions:read',
        'recipients:read',
        'recipients:write',
      ],
    });

    res.status(200).json({
      jwt: token,
      expiresAt: Math.floor(new Date(expiresAt).getTime() / 1000),
    });
  } catch (error: any) {
    console.error('JWT generation failed:', error);
    res.status(500).json({ error: error?.message || 'Authentication failed' });
  }
}
```

{% endcode %}

***

## Vite + React

{% code title="main.tsx" %}

```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@ordanetwork/sdk/react/styles.css';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

{% endcode %}

{% code title="App.tsx" %}

```typescript
import { OrdaProvider, createAppKitConfig, Widget } from '@ordanetwork/sdk/react';

const appKitConfig = createAppKitConfig({
  projectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID,
});

function App() {
  return (
    <OrdaProvider
      config={{
        getToken: async () => {
          // Call your backend to get JWT
          const res = await fetch('https://yourapi.com/auth/jwt', {
            method: 'POST',
          });
          return res.json();
        },
        appKitConfig,
      }}
    >
      <div className="app">
        <Widget />
      </div>
    </OrdaProvider>
  );
}

export default App;
```

{% endcode %}

***

## Create React App

Similar to Vite, but use `process.env.REACT_APP_*` for environment variables:

{% code title="index.tsx" %}

```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@ordanetwork/sdk/react/styles.css';
import './index.css';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

{% endcode %}

Create React App setup is similar to Vite:

{% code title="App.tsx (Create React App)" %}

```typescript
import { OrdaProvider, createAppKitConfig, Widget } from '@ordanetwork/sdk/react';

const appKitConfig = createAppKitConfig({
  projectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID!,
});

function App() {
  return (
    <OrdaProvider
      config={{
        getToken: async () => {
          const res = await fetch('https://yourapi.com/auth/jwt', {
            method: 'POST',
          });
          return res.json();
        },
        appKitConfig,
      }}
    >
      <div className="app">
        <Widget />
      </div>
    </OrdaProvider>
  );
}

export default App;
```

{% endcode %}