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

# Next.js with Custom Auth

> Integrate Chipi Pay with any OIDC-compliant auth provider (Auth0, Cognito, Okta, Keycloak) in your Next.js application.

## What is JWKS?

JSON Web Key Set (JWKS) is a standard that allows Chipi Pay to verify your users' JWT tokens without ever seeing their credentials. Your auth provider exposes a public endpoint with its signing keys, and Chipi uses those keys to verify that tokens are authentic. Any OIDC-compliant provider (Auth0, Cognito, Okta, Keycloak, etc.) exposes a JWKS endpoint.

## 1. Install the Chipi SDK

```bash theme={null}
npm install @chipi-stack/nextjs
```

## 2. Add Environment Variables

Add your Chipi API keys to `.env.local`:

```bash theme={null}
NEXT_PUBLIC_CHIPI_API_KEY=your_chipi_api_public_key
CHIPI_SECRET_KEY=your_chipi_api_secret_key
```

You can get your API keys from the [Chipi Dashboard](https://dashboard.chipipay.com/configure/api-keys).

## 3. Setup the Chipi SDK Provider

Wrap your app with `ChipiProvider` alongside your auth provider:

```tsx theme={null}
// app/layout.tsx

import { ChipiProvider } from "@chipi-stack/nextjs";

export default function RootLayout({children}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {/* Your auth provider wraps ChipiProvider */}
        <YourAuthProvider>
          <ChipiProvider>{children}</ChipiProvider>
        </YourAuthProvider>
      </body>
    </html>
  );
}
```

## 4. Get the Bearer Token

Use your auth provider's SDK to get a JWT token, then pass it to Chipi hooks:

```typescript theme={null}
// components/CreateWallet.tsx
"use client";

import { useState } from "react";
import { useCreateWallet } from "@chipi-stack/nextjs";

// Replace with your auth provider's token method
async function getBearerToken(): Promise<string> {
  // Auth0: const { getAccessTokenSilently } = useAuth0();
  // Cognito: const session = await Auth.currentSession();
  // Okta: const { authState } = useOktaAuth();
  // Keycloak: const { token } = useKeycloak();
  return "your-jwt-token";
}

export default function CreateWallet() {
  const { createWalletAsync, isLoading } = useCreateWallet();
  const [encryptKey, setEncryptKey] = useState("");

  const handleCreateWallet = async () => {
    const bearerToken = await getBearerToken();

    const response = await createWalletAsync({
      params: { encryptKey },
      bearerToken,
    });

    console.log("Wallet created:", response.publicKey);
  };

  return (
    <div>
      <input
        type="password"
        placeholder="Enter encryption key"
        value={encryptKey}
        onChange={(e) => setEncryptKey(e.target.value)}
      />
      <button onClick={handleCreateWallet} disabled={isLoading}>
        {isLoading ? "Creating..." : "Create Wallet"}
      </button>
    </div>
  );
}
```

## 5. Register JWKS in Chipi Dashboard

Register your auth provider's JWKS endpoint in the [Chipi Dashboard](https://dashboard.chipipay.com/configure/jwks-endpoint):

1. Go to Configure > Auth Provider
2. Select **Other** as your provider
3. Paste your provider's URL or JWKS endpoint
4. The dashboard will try OIDC discovery automatically
5. Click **Verify & Save**

### Compatible providers

| Provider | JWKS URL pattern |
| - | - |
| Auth0 | `https://YOUR_DOMAIN/.well-known/jwks.json` |
| AWS Cognito | `https://cognito-idp.REGION.amazonaws.com/POOL_ID/.well-known/jwks.json` |
| Okta | `https://YOUR_DOMAIN/oauth2/default/v1/keys` |
| Keycloak | `https://YOUR_HOST/realms/REALM/protocol/openid-connect/certs` |

> [!TIP]
>
> Need help? Check out our [Telegram Community](https://t.me/+e2qjHEOwImkyZDVh) for
> support and to connect with other developers.


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