> ## 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.
```bash theme={null}
npm install @chipi-stack/nextjs
```
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).
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 (
{/* Your auth provider wraps ChipiProvider */}
{children}
);
}
```
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 {
// 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 (
setEncryptKey(e.target.value)}
/>
);
}
```
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` |
Need help? Check out our [Telegram Community](https://t.me/+e2qjHEOwImkyZDVh) for
support and to connect with other developers.