5 replies

Correct way to determine the baseURL?

Hey there

What is the recommended way in Next.js to determine the baseURL on the client?

The docs tell us to create an environment variable

BETTER_AUTH_URL

BETTER_AUTH_URL

. However, I don't see where the docs recommends that we use this env variable. On the client, the example used only shows an explicitly defined string. In Next.js, I have used the following:

import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient({
    baseURL: NEXT_PUBLIC_BETTER_AUTH_BASE_URL
    // or...  NEXT_PUBLIC_APP_DOMAIN
})

import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient({
    baseURL: NEXT_PUBLIC_BETTER_AUTH_BASE_URL
    // or...  NEXT_PUBLIC_APP_DOMAIN
})

However, I am inclined to follow a method usually used in tRPC. On the client, we typically do something like this to determine the URL:

function getBaseUrl() {
  if (typeof window !== "undefined") return window.location.origin;
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

function getBaseUrl() {
  if (typeof window !== "undefined") return window.location.origin;
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

So, should we really just be using a function like

getBaseUrl()

getBaseUrl()

on the client to determine the auth location? Also, is

BETTER_AUTH_URL

BETTER_AUTH_URL

used somewhere internally that I'm not seeing?

Better Auth•13mo ago•

5 replies

.jsonp

Correct way to determine the baseURL?

Hey there

What is the recommended way in Next.js to determine the baseURL on the client?

The docs tell us to create an environment variable

BETTER_AUTH_URL

BETTER_AUTH_URL

. However, I don't see where the docs recommends that we use this env variable. On the client, the example used only shows an explicitly defined string. In Next.js, I have used the following:

import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient({
    baseURL: NEXT_PUBLIC_BETTER_AUTH_BASE_URL
    // or...  NEXT_PUBLIC_APP_DOMAIN
})

import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient({
    baseURL: NEXT_PUBLIC_BETTER_AUTH_BASE_URL
    // or...  NEXT_PUBLIC_APP_DOMAIN
})

However, I am inclined to follow a method usually used in tRPC. On the client, we typically do something like this to determine the URL:

function getBaseUrl() {
  if (typeof window !== "undefined") return window.location.origin;
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

function getBaseUrl() {
  if (typeof window !== "undefined") return window.location.origin;
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

So, should we really just be using a function like

getBaseUrl()

getBaseUrl()

on the client to determine the auth location? Also, is

BETTER_AUTH_URL

BETTER_AUTH_URL

used somewhere internally that I'm not seeing?

Correct way to determine the baseURL?

Similar Threads

Correct way to determine the baseURL?

Similar Threads

Similar Threads

Similar Threads