BA
Better Auth•2d ago
kobaasama

Nuxt 3 SSR Client and Hono Server issue.

I have a Nuxt 3 ssr enabled FE which I am not using the server API instead I have a separate BE with hono js. While integrating the better-auth/vue client for SSR 
const { data: session, error } = await authClient.useSession(useFetch);
const { data: session, error } = await authClient.useSession(useFetch);
I am getting this error 
 WARN  [Vue Router warn]: No match found for location with path "/api/auth/get-session"  
 WARN  [Vue Router warn]: No match found for location with path "/api/auth/get-session"  
 ERROR  [GET] "/api/auth/get-session": 404 Page not found: /api/auth/get-session                                                                                          3:32:51 AM

    at new H3Error (node_modules/h3/dist/index.mjs:46:5)
    at createError (node_modules/h3/dist/index.mjs:72:19)
    at createError (node_modules/nuxt/dist/app/composables/error.js:38:58)
    at <anonymous> (node_modules/nuxt/dist/app/composables/asyncData.js:102:68)
    at processTicksAndRejections (native:7:39)

  [cause]: [GET] "/api/auth/get-session": 404 Page not found: /api/auth/get-session



 ERROR  [nuxt] [request error] [unhandled] [500] undefined is not an object (evaluating '$setup.session.data')    
 ERROR  [GET] "/api/auth/get-session": 404 Page not found: /api/auth/get-session                                                                                          3:32:51 AM

    at new H3Error (node_modules/h3/dist/index.mjs:46:5)
    at createError (node_modules/h3/dist/index.mjs:72:19)
    at createError (node_modules/nuxt/dist/app/composables/error.js:38:58)
    at <anonymous> (node_modules/nuxt/dist/app/composables/asyncData.js:102:68)
    at processTicksAndRejections (native:7:39)

  [cause]: [GET] "/api/auth/get-session": 404 Page not found: /api/auth/get-session



 ERROR  [nuxt] [request error] [unhandled] [500] undefined is not an object (evaluating '$setup.session.data')
I suspect that when useFetch is being passed Better-auth/vue is taking the baseURL of the app? instead of the auth-client.ts 
import { createAuthClient } from "better-auth/vue"
export const authClient = createAuthClient({
    baseURL: [["http://localhost:4000"]], // the base url of your auth server
})
import { createAuthClient } from "better-auth/vue"
export const authClient = createAuthClient({
    baseURL: [["http://localhost:4000"]], // the base url of your auth server
})
I could solve this by making a proxy API in nuxt server api route handler 
export default defineEventHandler(async (event) => {
  const response = await fetch('{{apiBaseURL}}/api/auth/get-session')
....
}
export default defineEventHandler(async (event) => {
  const response = await fetch('{{apiBaseURL}}/api/auth/get-session')
....
}
Is this a bug or am I missing something? ref: https://github.com/better-auth/better-auth/blob/main/packages/better-auth/src/client/vue/index.ts#L94
2 Replies
bekacru
bekacru•2d ago
the useSession hook with ssr helper is meant to be used for nuxt3 full stack apps. You can wrap authClient.getSession if you have a separate backend
kobaasama
kobaasamaOP•2d ago
@bekacru Could you please provide an example?

Did you find this page helpful?