Next.js with Better Auth

Setup Better Auth with Next.js

First, follow the complete Better Auth Next.js Quickstart Guide to set up your Better Auth project and Next.js integration. Then proceed to Better Auth Basic Usage to learn how to create your login and sign up pages.This will guide you through:

Creating Better Auth Tables and Schemas
Setting up your Next.js app with Better Auth
Configuring environment variables
Creating auth.ts, mounting the handler and client instance
Creating login and sign up pages ready to receive new users 🎉

Come back here once you’ve completed the Better Auth setup!

Setup the Better Auth JWT Plugin

In your auth.ts file add the following configuration:

import { betterAuth } from "better-auth";
import { Pool } from "pg";
import { jwt } from "better-auth/plugins";

export const auth = betterAuth({
    database: new Pool({
        connectionString: process.env.DATABASE_URL 
    }),
    emailAndPassword: { 
        enabled: true, 
    },
    plugins: [
        jwt({

            jwks: {
                keyPairConfig: {
                    alg: "RS256",
                    modulusLength: 2048, 
                }
            },
            jwt: {
                issuer: process.env.JWT_ISSUER ,
                audience: process.env.JWT_AUDIENCE,
                expirationTime: "15m"
               
            }
        })
    ]
});

Migrate or generate your database:

Migrate
Generate

npx @better-auth/cli migrate

npx @better-auth/cli generate

Note: Before proceeding, check the Better Auth CLI Docs to determine which CLI commands and setup fit your specific use case best.

Create an auth-client.ts

You need to create an auth-client.ts - required for client side JWT functionality

"use client";

import { createAuthClient } from "better-auth/react";
import { jwtClient } from "better-auth/client/plugins";


export const authClient = createAuthClient({
    basePath: "/api/auth",
  
    plugins: [jwtClient()],
});

Create API route handler

Create a new route.ts file under /api/[...all]/route.ts with the following content.

// Update the path to your auth file as needed
import { toNextJsHandler } from "better-auth/next-js";
import { auth } from "../../../../auth";

export const { POST, GET } = toNextJsHandler(auth);

Create a use-better-auth.ts for getting JWTs and Deploy your app

"use client";

import { authClient } from "./auth-client";


export function useBetterAuth() {
  const { data: session, isPending } = authClient.useSession();

  const getToken = async () => {
    try {
      const { data, error } = await authClient.token();
      
      if (error) {
        console.error("Failed to get JWT token:", error);
        return null;
      }

      return data?.token || null;
    } catch (error) {
      console.error("Error fetching JWT token:", error);
      return null;
    }
  };

  const userId = session?.user?.id || null;

  return {
    getToken,
    userId,
    session,
    isPending,
    isSignedIn: !!session,
  };
}

Deploy your app, then add your deployed application URL to your environment variables:

JWT_ISSUER=https://my-deployed-app-domain.com
JWT_AUDIENCE=https://my-deployed-app-domain.com

Install the Chipi SDK

First, install the required packages:

# Install Chipi Pay SDK
npm install @chipi-stack/nextjs

Setup the Chipi SDK Provider

In your .env file, add your Chipi API keys:

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:

// app/layout.tsx

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

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

Add your JWKs Endpoint Url to Chipi 🕺 !

Visit the dashboard JWKS and JWT configuration, select Better Auth as your auth provider and paste your JWKS Endpoint URL.

https://my-deployed-app-domain.com/api/auth/jwks

Note: You do not need to manually create this /api/auth/jwks endpoint!
It is automatically provided by the Better Auth JWT plugin and handled internally by the catch-all route handler. Remember to replace https://my-deployed-app-domain.com with the actual URL of where your app is deployed.

Using Better Auth with Chipi hooks 🕺 !

Below you will see a simple example of how you can get and pass your tokens to the different Chipi hooks:

"use client";

import { useGetWallet } from "@chipi-stack/nextjs";
import { useBetterAuth } from "@/hooks/use-better-auth";

export default function Home() {
  const { getToken, userId, isPending: authPending } = useBetterAuth();

  const { data: wallet, isLoading } = useGetWallet({
    getBearerToken: async () => {
      const token = await getToken();
      if (!token) {
        throw new Error("User not authenticated");
      }
      return token;
    },
    params: {
      externalUserId: userId || "",
    },
  });

  if (authPending) {
    return <div>Loading authentication...</div>;
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
      <h1>Home page</h1>
      {isLoading && <p>Loading wallet...</p>}
      {wallet && <pre>{JSON.stringify(wallet, null, 2)}</pre>}
    </div>
  );
}

Note: If you have not yet created a wallet, you may see an error with a message like:message:“Wallet not found for externalUserId: user_id, apiPublicKey: pk_prod_something”This error is expected and shows that your app is correctly contacting Chipi, but there is not yet a wallet for this user. Once you create a wallet, this error will disappear.

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.

Getting Started

Gasless

Next.js Guides

Pay With Crypto

SDK Hooks

Session Hooks

Server

MCP

Privacy

Next.js with Better Auth

Setup Better Auth with Next.js

Setup the Better Auth JWT Plugin

Create an auth-client.ts

Create API route handler

Create a use-better-auth.ts for getting JWTs and Deploy your app

Install the Chipi SDK

Setup the Chipi SDK Provider

Add your JWKs Endpoint Url to Chipi 🕺 !

Using Better Auth with Chipi hooks 🕺 !

Celebrate & Learn More!