BA
Better Auth•2w ago
Tonymif

NextJS Build Fail with createAuthClient

My nextjs build is failing when calling createAuthClient from within Middleware. When I remove it, error is gone. 
import { createAuthClient } from "better-auth/client";
import { NextRequest, NextResponse } from "next/server";

const client = createAuthClient()

export async function middleware(request: NextRequest) {
    const { data: session } = await client.getSession(
        {
            fetchOptions: {
                headers: {
                    cookie: request.headers.get("cookie") || "",
                },
            }
        }
    );
    if (!session) {
        return NextResponse.redirect(new URL("/", request.url));
    }
    return NextResponse.next();
}

export const config = {
    matcher: ["/dashboard"],
};
import { createAuthClient } from "better-auth/client";
import { NextRequest, NextResponse } from "next/server";

const client = createAuthClient()

export async function middleware(request: NextRequest) {
    const { data: session } = await client.getSession(
        {
            fetchOptions: {
                headers: {
                    cookie: request.headers.get("cookie") || "",
                },
            }
        }
    );
    if (!session) {
        return NextResponse.redirect(new URL("/", request.url));
    }
    return NextResponse.next();
}

export const config = {
    matcher: ["/dashboard"],
};
No description
Solution:
ok solved
Jump to solution
4 Replies
KiNFiSH
KiNFiSH•2w ago
You are not supposed to create authClient and use it there ...it got a client hooks with it which doesn't work on middleware or server as well Instead pass your betterAuth instance
Tonymif
TonymifOP•2w ago
Either way, even this won't work: 
import { NextMiddleware, NextResponse } from 'next/server';
import { betterFetch } from 'better-auth/react';
import { Session } from 'better-auth/types';

const nextMiddleware: NextMiddleware = async (request, event) => {
  try {
    const { data: session } = await betterFetch<Session>(
      '/api/auth/get-session',
      {
        baseURL: 'http://localhost:3000',
        headers: {
          cookie: request.headers.get('cookie') || '',
          Authorization: request.headers.get('Authorization') || '',
        },
      }
    );

    if (!session) {
      return NextResponse.redirect(new URL("/", request.url));
    }
  } catch (error) {
    console.error('Error in NextMiddleware', error);
  }

  return NextResponse.next();
};

export default nextMiddleware;

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};
import { NextMiddleware, NextResponse } from 'next/server';
import { betterFetch } from 'better-auth/react';
import { Session } from 'better-auth/types';

const nextMiddleware: NextMiddleware = async (request, event) => {
  try {
    const { data: session } = await betterFetch<Session>(
      '/api/auth/get-session',
      {
        baseURL: 'http://localhost:3000',
        headers: {
          cookie: request.headers.get('cookie') || '',
          Authorization: request.headers.get('Authorization') || '',
        },
      }
    );

    if (!session) {
      return NextResponse.redirect(new URL("/", request.url));
    }
  } catch (error) {
    console.error('Error in NextMiddleware', error);
  }

  return NextResponse.next();
};

export default nextMiddleware;

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};
.
Solution
Tonymif
Tonymif•2w ago
ok solved
Tonymif
TonymifOP•2w ago
I swapped the import { betterFetch } from 'better-auth/react'; to the import { betterFetch } from '@better-fetch/fetch';

Did you find this page helpful?