> ## 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 Supabase
> Learn how to integrate Chipi Pay with your Next.js application using Supabase for authentication and secure wallet storage.
First, follow the complete [Supabase Next.js Quickstart Guide](https://supabase.com/docs/guides/getting-started/quickstarts/nextjs) to set up your Supabase project and Next.js integration.
This will guide you through:
* Creating a Supabase project
* Setting up your Next.js app with the Supabase template
* Configuring environment variables
* Creating Supabase client files
**Come back here once you've completed the Supabase setup!**
For enhanced security, migrate your Supabase project to use asymmetric JWT tokens as described in the [Supabase JWT Signing Keys blog post](https://supabase.com/blog/jwt-signing-keys).
1. Go to your Supabase project dashboard
2. Navigate to Settings > API
3. Under "JWT Settings", enable "Use asymmetric JWT signing"
4. Follow the migration steps provided in the dashboard
This ensures your JWT tokens are signed with asymmetric keys for better security.
Now install the Chipi Pay SDK:
```bash theme={null}
npm install @chipi-stack/nextjs
```
Add your Chipi API key to your `.env.local` file (alongside your existing Supabase variables):
```bash theme={null}
# Your existing Supabase variables
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=your_supabase_anon_key
# Add the Chipi Variables
NEXT_PUBLIC_CHIPI_API_KEY=your_chipi_api_public_key
CHIPI_SECRET_KEY=your_chipi_api_secret_key
```
Set up the Chipi Pay provider in your application:
```tsx theme={null}
// app/layout.tsx
"use client";
import { ChipiProvider } from "@chipi-stack/nextjs";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
Create a wallet creation component using Supabase authentication:
```typescript theme={null}
// app/components/CreateWallet.tsx
"use client";
import { useState } from "react";
import { createClient } from "@/lib/supabase/client";
import { useCreateWallet } from "@chipi-stack/nextjs";
export default function CreateWallet() {
const client = createClient();
const { createWalletAsync, isLoading } = useCreateWallet();
const [encryptKey, setEncryptKey] = useState("");
const [error, setError] = useState("");
const [success, setSuccess] = useState("");
const handleCreateWallet = async () => {
if (!encryptKey) {
setError("Please enter an encryption key");
return;
}
try {
setError("");
setSuccess("");
const sessionData = (await client.auth.getSession()).data.session;
const bearerToken = sessionData?.access_token;
const user = sessionData?.user;
if (!user || !bearerToken) {
setError("Supabase user not found. Please sign in first.");
return;
}
const response = await createWalletAsync({
params: {
encryptKey,
externalUserId: user.id,
},
bearerToken,
});
console.log("createWalletResponse", response);
setSuccess(
`Wallet created successfully! Public Key: ${response.publicKey}`
);
setEncryptKey("");
} catch (error) {
setError(error.message || "Failed to create wallet");
console.error("Error creating wallet:", error);
}
};
return (
);
}
```
That's it! You should now have an initial working version of Chipi Pay integrated into your application. You can now start implementing various features like:
* Wallet Creations
* Sending tokens
* Signing transactions
* and more!
Need help? Check out our [Telegram Community](https://t.me/+e2qjHEOwImkyZDVh)
for support and to connect with other developers.