BA
Better Auth•3mo ago
johntanzer

Better Auth + Vercel Preview Deployements + Nuxt 3

Hi @bekacru spoke to you on X. You said i should tag you. 
export const auth = betterAuth({
  database: new Pool({
    connectionString: useRuntimeConfig().databaseUrl
  }),
  emailAndPassword: {
    enabled: true
  },
  socialProviders: {
    google: {
      clientId: useRuntimeConfig().googleClientId,
      clientSecret: useRuntimeConfig().googleClientSecret
    }
  }
})
export const auth = betterAuth({
  database: new Pool({
    connectionString: useRuntimeConfig().databaseUrl
  }),
  emailAndPassword: {
    enabled: true
  },
  socialProviders: {
    google: {
      clientId: useRuntimeConfig().googleClientId,
      clientSecret: useRuntimeConfig().googleClientSecret
    }
  }
})
this is my auth which is in /server/utils/auth and the below is my auth client in lib in root 
import { createAuthClient } from 'better-auth/vue'

export const authClient = createAuthClient()

export const {
  signIn,
  signOut,
  signUp,
  useSession,
  forgetPassword,
  resetPassword
} = authClient
import { createAuthClient } from 'better-auth/vue'

export const authClient = createAuthClient()

export const {
  signIn,
  signOut,
  signUp,
  useSession,
  forgetPassword,
  resetPassword
} = authClient
the below is the error i get in vercel preview deployemnts 
Unhandled Rejection: TypeError: Invalid URL /get-session. Are you passing in a relative URL but not setting the baseURL?
    at getURL2 (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:455:11)
    at betterFetch (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:502:16)
    at async $fetch (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:236:12)
Node.js process exited with exit status: 128. The logs above can help with debugging the issue.
Unhandled Rejection: TypeError: Invalid URL /get-session. Are you passing in a relative URL but not setting the baseURL?
    at getURL2 (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:455:11)
    at betterFetch (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:502:16)
    at async $fetch (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:236:12)
Node.js process exited with exit status: 128. The logs above can help with debugging the issue.
i dont get it in production since i set betterauthurl env var for prod domain. This has made it almost impossible to use better auth
15 Replies
johntanzer
johntanzerOP•3mo ago
i did also try to get baseUrl based on availble env vars but i get the same error. The funciton i used 
// For Vercel Preview Deployments - cant work this out it
export function getBaseURL() {
  console.log('VERCEL_ENV:', process.env.VERCEL_ENV)
  console.log('VERCEL_URL:', process.env.VERCEL_URL)
  console.log('NODE_ENV:', process.env.NODE_ENV)

  let baseURL

  if (process.env.VERCEL_ENV === 'preview') {
    baseURL = `https://${process.env.VERCEL_URL}`
  } else if (process.env.VERCEL_ENV === 'development') {
    baseURL = `https://${process.env.VERCEL_URL}`
  } else if (process.env.VERCEL_ENV === 'production') {
    baseURL = process.env.BETTER_AUTH_URL
  } else if (process.env.NODE_ENV === 'development') {
    baseURL = process.env.BETTER_AUTH_URL || 'http://localhost:3000'
  }

  console.log('baseURL:', baseURL)
  return baseURL
}
// For Vercel Preview Deployments - cant work this out it
export function getBaseURL() {
  console.log('VERCEL_ENV:', process.env.VERCEL_ENV)
  console.log('VERCEL_URL:', process.env.VERCEL_URL)
  console.log('NODE_ENV:', process.env.NODE_ENV)

  let baseURL

  if (process.env.VERCEL_ENV === 'preview') {
    baseURL = `https://${process.env.VERCEL_URL}`
  } else if (process.env.VERCEL_ENV === 'development') {
    baseURL = `https://${process.env.VERCEL_URL}`
  } else if (process.env.VERCEL_ENV === 'production') {
    baseURL = process.env.BETTER_AUTH_URL
  } else if (process.env.NODE_ENV === 'development') {
    baseURL = process.env.BETTER_AUTH_URL || 'http://localhost:3000'
  }

  console.log('baseURL:', baseURL)
  return baseURL
}
bekacru
bekacru•3mo ago
the base url need to be passed to the authClient 
const authClient = createAuthClient({
  baseURL: getBaseURL()
})
const authClient = createAuthClient({
  baseURL: getBaseURL()
})
johntanzer
johntanzerOP•3mo ago
Ok. Just confirming. Not on the server. Just client? For vercel preview deployments to work.
bekacru
bekacru•3mo ago
Yeah on the client
johntanzer
johntanzerOP•3mo ago
Ok. Will try now. Thanks so much. no doesnt work even on dev now @bekacru all useSession dont work now with this It is a nuxt ssr
bekacru
bekacru•3mo ago
are you calling useSession with useFetch for ssr?
johntanzer
johntanzerOP•3mo ago
Tried both. Generally have been using usefetch. Tried to just use directly also to test. Neither work.
bekacru
bekacru•3mo ago
what is the error message? same as before?
johntanzer
johntanzerOP•3mo ago
Nope. Now all session are not set. Also give me type error when I add base url to auth client. Haven’t been able to push as can’t get into any page with baseurl set even in dev. Before dev worked fine. Since have better auth url set as env In dev and production. Now it just shows a 500 error……
bekacru
bekacru•3mo ago
it's hard to tell what is the issue one other thing you can try on next is do something like this instead 
  const url = useRequestURL()
  const headers = import.meta.server ? useRequestHeaders() : undefined

  const client = createAuthClient({
    baseURL: url.origin,
    fetchOptions: {
      headers,
    },
  })
  const url = useRequestURL()
  const headers = import.meta.server ? useRequestHeaders() : undefined

  const client = createAuthClient({
    baseURL: url.origin,
    fetchOptions: {
      headers,
    },
  })
johntanzer
johntanzerOP•3mo ago
still get this when depolyed 
Unhandled Rejection: TypeError: Invalid URL /get-session. Are you passing in a relative URL but not setting the baseURL?
    at getURL2 (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:455:11)
    at betterFetch (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:502:16)
    at async $fetch (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:236:12)
Node.js process exited with exit status: 128. The logs above can help with debugging the issue.
Unhandled Rejection: TypeError: Invalid URL /get-session. Are you passing in a relative URL but not setting the baseURL?
    at getURL2 (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:455:11)
    at betterFetch (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:502:16)
    at async $fetch (file:///var/task/node_modules/@better-fetch/fetch/dist/index.js:236:12)
Node.js process exited with exit status: 128. The logs above can help with debugging the issue.
and set like this 
import { createAuthClient } from 'better-auth/vue'

export const authClient = createAuthClient({
  baseUrl: process.env.VERCEL_URL
})
export const {
  signIn,
  signOut,
  signUp,
  useSession,
  forgetPassword,
  resetPassword
} = authClient
import { createAuthClient } from 'better-auth/vue'

export const authClient = createAuthClient({
  baseUrl: process.env.VERCEL_URL
})
export const {
  signIn,
  signOut,
  signUp,
  useSession,
  forgetPassword,
  resetPassword
} = authClient
this will never work it isnt in a plugin or composable doesnt have nuxt context availble it is just in libs folder in main dir
bekacru
bekacru•3mo ago
for the record it's baseURL not baseUrl also im not super familiar with nuxt, the issue in general is it can't infer the base url. By default, without you defining the baseURL, it should be able to infer it. one thing I'd try remove the baseURL and don't pass any getBaseURL or anything for the client or the server and just let it infer itself. also check this resources https://github.com/leamsigc/nuxt-better-auth-drizzle https://github.com/atinux/nuxthub-better-auth
GitHub
GitHub - leamsigc/nuxt-better-auth-drizzle: Nuxt 4 Integration with...
Nuxt 4 Integration with Better auth and Drizzle ORM - leamsigc/nuxt-better-auth-drizzle
GitHub
GitHub - atinux/nuxthub-better-auth: A demo of using Better Auth wi...
A demo of using Better Auth with Nuxt & NuxtHub (Cloudflare D1 & KV). - atinux/nuxthub-better-auth
johntanzer
johntanzerOP•3mo ago
been through both of those! infer doesnt work with nothing set tried. atinux has got alot of custom things from his auth in - which isnt what i am looking for and other one obviously wont work in this situation since it is not addressed there at all thanks for your help! really want this to work! will pg post after a working demo if we can get this up!
daveycodez
daveycodez•3mo ago
export const getURL = () => {
    const url =
        (process.env.NEXT_PUBLIC_EXPORT == "true" ? process.env.NEXT_PUBLIC_BASE_URL : // Set this to production URL in all envs. (For output: "export")
            process.env.NEXT_PUBLIC_SITE_URL || // Set this to your site URL in production env only. (Production)
            process.env.NEXT_PUBLIC_VERCEL_URL) || // Automatically set by Vercel. (Preview)
        "http://localhost:3000" // Default to localhost. (Development)

    // Make sure to include `https://` when not localhost.
    return url.includes("http") ? url : `https://${url}`

}
export const getURL = () => {
    const url =
        (process.env.NEXT_PUBLIC_EXPORT == "true" ? process.env.NEXT_PUBLIC_BASE_URL : // Set this to production URL in all envs. (For output: "export")
            process.env.NEXT_PUBLIC_SITE_URL || // Set this to your site URL in production env only. (Production)
            process.env.NEXT_PUBLIC_VERCEL_URL) || // Automatically set by Vercel. (Preview)
        "http://localhost:3000" // Default to localhost. (Development)

    // Make sure to include `https://` when not localhost.
    return url.includes("http") ? url : `https://${url}`

}
set NEXT_PUBLIC_SITE_URL to your production URL but only for production environment on Vercel Do not set NEXT_PUBLIC_SITE_URL for any other environments It will use NEXT_PUBLIC_VERCEL_URL for previews And in dev mode it falls back to localhost:3000 
export const authClient = createAuthClient({
    baseURL: getURL(),
})
export const authClient = createAuthClient({
    baseURL: getURL(),
})
Oh this is for NEXT idk about NUXT env Here is the port for NUXT 
export const getURL = () => {
    const url =
            process.env.SITE_URL || // Set this to your public site URL in production env only. (Production)
            process.env.VERCEL_URL || // Automatically set by Vercel. (Preview)
        "http://localhost:3000" // Default to localhost. (Development)

    // Make sure to include `https://` when not localhost.
    return url.includes("http") ? url : `https://${url}`
}
export const getURL = () => {
    const url =
            process.env.SITE_URL || // Set this to your public site URL in production env only. (Production)
            process.env.VERCEL_URL || // Automatically set by Vercel. (Preview)
        "http://localhost:3000" // Default to localhost. (Development)

    // Make sure to include `https://` when not localhost.
    return url.includes("http") ? url : `https://${url}`
}
use BETTER_AUTH_URL instead of SITE_URL if you have that set for production But make sure BETTER_AUTH_URL is only set on production environment, nowhere else
johntanzer
johntanzerOP•3mo ago
Solved. Thanks a lot. Yip it was. Not so clear what issue was. Think most likely combination between only testing vercel url without the https and misspelling baseURL alternating!

Did you find this page helpful?