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

<Steps>
  <Step title="Setup Supabase with React" titleSize="h2">
    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!**
  </Step>

  <Step title="Migrate to Asymmetric JWT Tokens" titleSize="h2">
    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.
  </Step>

  <Step title="Install the Chipi SDK" titleSize="h2">
    Install the Chipi Pay SDK for React:

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

  <Step title="Add Environment Variables" titleSize="h2">
    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).
  </Step>

  <Step title="Setup the Chipi SDK Provider" titleSize="h2">
    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>
      );
    }
    ```
  </Step>

  <Step title="Creating a Wallet" titleSize="h2">
    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>
      );
    }
    ```
  </Step>

  <Step title="Register JWKS in Chipi Dashboard" titleSize="h2">
    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**
  </Step>
</Steps>

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