> ## 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.

# React with Supabase

> Learn how to integrate Chipi Pay with your React application using Supabase for authentication and secure wallet storage.

## 1. Setup Supabase with React

First, follow the complete [Supabase React Quickstart Guide](https://supabase.com/docs/guides/getting-started/quickstarts/reactjs) to set up your Supabase project and React integration.

This will guide you through:

* Creating a Supabase project
* Setting up your React app with Supabase
* Configuring environment variables
* Creating a Supabase client

**Come back here once you've completed the Supabase setup!**

## 2. Migrate to Asymmetric JWT Tokens

For Chipi Pay to verify your users' JWT tokens, your Supabase project must use asymmetric JWT signing.

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

See the [Supabase JWT Signing Keys blog post](https://supabase.com/blog/jwt-signing-keys) for details.

## 3. Install the Chipi SDK

Install the Chipi Pay SDK for React:

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

## 4. Add Environment Variables

Add your API keys to your `.env` file:

```bash theme={null}
# Your existing Supabase variables
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# Add the Chipi Variables
VITE_CHIPI_API_KEY=your_chipi_api_public_key
```

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

## 5. Setup the Chipi SDK Provider

Set up the Chipi Pay provider in your application:

```tsx theme={null}
// App.tsx

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

export default function App() {
  return (
    <ChipiProvider config={{ apiPublicKey: import.meta.env.VITE_CHIPI_API_KEY }}>
      {/* Your app components */}
    </ChipiProvider>
  );
}
```

## 6. Creating a Wallet

Create a wallet using Supabase authentication:

```typescript theme={null}
// components/CreateWallet.tsx

import { useState } from "react";
import { supabase } from "../lib/supabase";
import { useCreateWallet } from "@chipi-stack/chipi-react";

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

  const handleCreateWallet = async () => {
    const { data: { session } } = await supabase.auth.getSession();
    const bearerToken = session?.access_token;
    const userId = session?.user?.id;

    if (!bearerToken || !userId) {
      console.error("Please sign in first");
      return;
    }

    const response = await createWalletAsync({
      params: {
        encryptKey,
        externalUserId: userId,
      },
      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>
  );
}
```

## 7. Register JWKS in Chipi Dashboard

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

1. Go to Configure > Auth Provider
2. Select **Supabase** as your provider
3. Enter your Supabase project URL
4. Click **Verify & Save**

> [!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.