Next.js with Supabase

Setup Supabase with Next.js

First, follow the complete Supabase Next.js Quickstart Guide 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!

Migrate to Asymmetric JWT Tokens

For enhanced security, migrate your Supabase project to use asymmetric JWT tokens as described in the Supabase JWT Signing Keys blog post.

Go to your Supabase project dashboard
Navigate to Settings > API
Under “JWT Settings”, enable “Use asymmetric JWT signing”
Follow the migration steps provided in the dashboard

This ensures your JWT tokens are signed with asymmetric keys for better security.

Install the Chipi SDK

Now install the Chipi Pay SDK:

npm install @chipi-stack/nextjs

Add Chipi Environment Variables

Add your Chipi API key to your .env.local file (alongside your existing Supabase variables):

# 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

Setup the Chipi SDK Provider

Set up the Chipi Pay provider in your application:

// app/layout.tsx
"use client";

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ChipiProvider>{children}</ChipiProvider>
      </body>
    </html>
  );
}

Creating a Wallet

Create a wallet creation component using Supabase authentication:

// 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 (
    <div className="space-y-4 p-4 border rounded-lg">
      <h2 className="text-xl font-semibold">Create Wallet</h2>

      {error && <div className="text-red-500 text-sm">{error}</div>}
      {success && <div className="text-green-500 text-sm">{success}</div>}

      <div className="space-y-2">
        <input
          type="password"
          placeholder="Enter encryption key"
          value={encryptKey}
          onChange={(e) => setEncryptKey(e.target.value)}
          className="w-full p-2 border rounded"
        />

        <button
          onClick={handleCreateWallet}
          disabled={isLoading || !encryptKey}
          className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50 w-full"
        >
          {isLoading ? "Creating..." : "Create Wallet"}
        </button>
      </div>
    </div>
  );
}

Celebrate & Learn More!

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 for support and to connect with other developers.

⌘I

Getting Started

Gasless

Next.js Guides

Pay With Crypto

SDK Hooks

Session Hooks

Server

MCP

Privacy

Next.js with Supabase

Setup Supabase with Next.js

Migrate to Asymmetric JWT Tokens

Install the Chipi SDK

Add Chipi Environment Variables

Setup the Chipi SDK Provider

Creating a Wallet

Celebrate & Learn More!