Refactor footer component structure and enhance copyright notice with… - #41
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 45 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThe app shell now uses direct header and footer components, an authenticated navigation menu, separate logo components, and an external GitHub copyright link. The footer links component was removed, and the personal collections link moved into the navigation menu. ChangesApp shell navigation
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant AppHeader
participant NavMenu
participant useNavMenu
participant useAuthSession
participant AuthClient
AppHeader->>NavMenu: Render navigation menu
NavMenu->>useNavMenu: Load session
useNavMenu->>useAuthSession: Request session
useAuthSession->>AuthClient: Fetch session with SSR cookie header
AuthClient-->>useAuthSession: Return session data
useAuthSession-->>useNavMenu: Return session
useNavMenu-->>NavMenu: Provide session
NavMenu-->>AppHeader: Render published and conditional personal links
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…ports in index.ts
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
app/shared/ui/logo/app-logo-wordmark.stories.ts (1)
1-1: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse the shared UI barrel in both stories.
app/shared/ui/logo/app-logo-wordmark.stories.ts#L1-L1: importAppLogoWordmarkfrom~/shared/ui.app/shared/ui/logo/app-wordmark.stories.ts#L1-L1: importAppWordmarkfrom~/shared/ui.As per coding guidelines,
app/shared/{api,ui,lib}/**/*.{ts,vue}must import shared modules through their segment barrels rather than deep paths.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/shared/ui/logo/app-logo-wordmark.stories.ts` at line 1, Update the AppLogoWordmark import in app/shared/ui/logo/app-logo-wordmark.stories.ts at lines 1-1 to use the shared UI barrel. Also update the AppWordmark import in app/shared/ui/logo/app-wordmark.stories.ts at lines 1-1 to import from the same barrel.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/features/copyright/ui/copyright-notice.vue`:
- Around line 5-19: Update the GitHub anchor in the template to provide an
accessible name that identifies the destination and that it opens in a new tab,
using localized visible text or a descriptive aria-label alongside the existing
copyright content. Keep the existing link target and security attributes
unchanged.
In `@app/features/nav-menu/index.ts`:
- Line 1: Update the nav-menu feature barrel in index.ts to export the
useNavMenu composable alongside NavMenu, using the composable’s existing module
path and preserving the current UI component export.
In `@app/shared/ui/logo/app-logo-wordmark.vue`:
- Around line 7-8: Update the two NuxtImg elements in the combined logo so only
one provides the translated common.logoAlt accessible name; set the other
image’s alt text to an empty decorative value. Preserve both images and their
existing dimensions within the NuxtLink.
In `@app/shared/ui/logo/app-logo.stories.ts`:
- Around line 1-14: Update the project dependency providing `@storybook-vue/nuxt`
to a Storybook 10-compatible release, ensuring its peer dependency accepts the
installed storybook@10.5.5; adjust the corresponding lockfile resolution and
preserve the existing AppLogo story integration.
---
Nitpick comments:
In `@app/shared/ui/logo/app-logo-wordmark.stories.ts`:
- Line 1: Update the AppLogoWordmark import in
app/shared/ui/logo/app-logo-wordmark.stories.ts at lines 1-1 to use the shared
UI barrel. Also update the AppWordmark import in
app/shared/ui/logo/app-wordmark.stories.ts at lines 1-1 to import from the same
barrel.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 09969fce-fce8-4c82-891d-65c172b70965
⛔ Files ignored due to path filters (1)
public/linkfolio-wordmark.svgis excluded by!**/*.svg
📒 Files selected for processing (18)
app/app.vueapp/features/auth-buttons/ui/auth-buttons.vueapp/features/copyright/ui/copyright-notice.vueapp/features/nav-menu/index.tsapp/features/nav-menu/model/use-nav-menu.tsapp/features/nav-menu/ui/nav-menu.vueapp/shared/ui/index.tsapp/shared/ui/logo/app-logo-wordmark.stories.tsapp/shared/ui/logo/app-logo-wordmark.vueapp/shared/ui/logo/app-logo.stories.tsapp/shared/ui/logo/app-logo.vueapp/shared/ui/logo/app-wordmark.stories.tsapp/shared/ui/logo/app-wordmark.vueapp/shared/ui/logo/index.tsapp/ui/app-footer.vueapp/ui/app-footer/footer-links.vueapp/ui/app-header.vueapp/ui/app-header/app-header.vue
💤 Files with no reviewable changes (4)
- app/ui/app-footer/footer-links.vue
- app/shared/ui/logo/app-logo.vue
- app/ui/app-header/app-header.vue
- app/features/auth-buttons/ui/auth-buttons.vue
| import AppLogo from "./app-logo.vue"; | ||
|
|
||
| import type { Meta, StoryObj } from "@storybook-vue/nuxt"; | ||
|
|
||
| const meta: Meta<typeof AppLogo> = { | ||
| title: "Shared UI/Logo/AppLogo", | ||
| component: AppLogo | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof AppLogo>; | ||
|
|
||
| export const Default: Story = {}; |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
npm view `@storybook-vue/nuxt`@9.0.1 peerDependencies --json
npm view storybook@10.5.5 versionRepository: ebulgakov/linkfolio
Length of output: 896
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
printf 'Package manager files:\n'
git ls-files | rg '(^|/)(package(-lock)?\.json|pnpm-lock\.yaml|yarn\.lock|bun\.lockb?)$' || true
printf '\nRelevant `@storybook-vue/nuxt/storybook` versions in package files:\n'
for f in $(git ls-files | rg '(^|/)(package(-lock)?\.json|pnpm-lock\.yaml|yarn\.lock)$' || true); do
echo "--- $f"
rg -n '"(`@storybook-vue/nuxt`|storybook)"|`@storybook-vue/nuxt`|storybook' "$f" || true
done
printf '\nLockfiles for `@storybook-vue/nuxt` package metadata:\n'
for f in $(git ls-files | rg '(^|/)pnpm-lock\.yaml$' || true); do
echo "--- $f"
sed -n '/@storybook-vue\/nuxt@9\.0\.1/,/^$/p; /node_modules\/@storybook-vue\/nuxt/,/^$/p; /@storybook-vue\/nuxt:/,/^[^:]|^$/p' "$f" | sed -n '1,160p' || true
doneRepository: ebulgakov/linkfolio
Length of output: 9860
Upgrade the Nuxt Storybook framework package.
@storybook-vue/nuxt: ^9.0.1 still resolves to @storybook-vue/nuxt@9.0.1, whose peerDependencies require storybook: ~9.0.5 instead of the installed storybook@10.5.5. Either add a Storybook 10-compatible Nuxt Storybook framework package or wait for the Nuxt Storybook provider to update.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/shared/ui/logo/app-logo.stories.ts` around lines 1 - 14, Update the
project dependency providing `@storybook-vue/nuxt` to a Storybook 10-compatible
release, ensuring its peer dependency accepts the installed storybook@10.5.5;
adjust the corresponding lockfile resolution and preserve the existing AppLogo
story integration.
- Give GitHub copyright link an aria-label describing destination and new-tab behavior instead of relying on title alone - Mark decorative wordmark image alt="" in AppLogoWordmark to avoid duplicate brand-name announcement - Export useNavMenu from nav-menu feature barrel per FSD public API convention Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
@claude review |
|
Claude finished @ebulgakov's task in 1m 52s —— View job Review
CodeRabbit's 4 actionable comments all check out as already fixed in commit
Additional findings from my own pass
None of these are blocking — the CodeRabbit-flagged items are resolved and the feature works as described. Items 1–2 are worth a follow-up if you want to tighten consistency/DRY. |
- nav-menu.vue imports useNavMenu through the feature's own barrel instead of a deep path - app-header.vue import of shared/ui barrel drops trailing slash - copyright-notice.vue drops redundant wrapping span - Extracted the duplicated authClient.useSession customFetcher (SSR cookie forwarding workaround) out of use-auth-buttons.ts and use-nav-menu.ts into a shared useAuthSession() in app/shared/api, so the non-obvious reasoning lives in one place Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
app/shared/api/use-session.ts (1)
1-1: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse the
~/shared/apibarrel for this shared dependency.
app/shared/api/use-session.tsimportsuseAuththrough./use-auth. Route shared API imports through the segment barrel. If a self-import creates a cycle, adjust the barrel structure instead of keeping a deep import.As per coding guidelines: Files matching
app/shared/{api,ui,lib}/**/*.{ts,vue}must import shared modules through their segment barrels.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/shared/api/use-session.ts` at line 1, Update use-session.ts to import useAuth through the ~/shared/api segment barrel instead of the relative ./use-auth path, and adjust the barrel structure if needed to avoid a self-import cycle.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/shared/api/use-session.ts`:
- Line 7: Use the shared auth-client selection pattern in
app/shared/api/use-session.ts at line 7 and
app/features/auth-buttons/model/use-auth-buttons.ts at line 4 so browser-side
session reads and sign-out reuse one client instance, while preserving the
existing SSR/client distinction.
- Around line 9-14: Update the useAuthSession callback passed to
authClient.useSession so absolute URLs are normalized to their relative pathname
and query before being forwarded to useFetch, preserving the existing request
headers and auth-session key. Ensure SSR logged-in session data and client
hydration continue receiving the session correctly.
---
Nitpick comments:
In `@app/shared/api/use-session.ts`:
- Line 1: Update use-session.ts to import useAuth through the ~/shared/api
segment barrel instead of the relative ./use-auth path, and adjust the barrel
structure if needed to avoid a self-import cycle.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: ff0a3e06-0a37-4dfb-ab24-a42921eb40d3
📒 Files selected for processing (11)
app/features/auth-buttons/model/use-auth-buttons.tsapp/features/copyright/ui/copyright-notice.vueapp/features/nav-menu/index.tsapp/features/nav-menu/model/use-nav-menu.tsapp/features/nav-menu/ui/nav-menu.vueapp/shared/api/index.tsapp/shared/api/use-session.tsapp/shared/ui/logo/app-logo-wordmark.vueapp/ui/app-header.vuei18n/locales/en.jsoni18n/locales/ru.json
🚧 Files skipped from review as they are similar to previous changes (5)
- app/features/nav-menu/ui/nav-menu.vue
- app/ui/app-header.vue
- app/features/copyright/ui/copyright-notice.vue
- app/features/nav-menu/index.ts
- app/shared/ui/logo/app-logo-wordmark.vue
| // it never forwards the client's own fetchOptions.headers, so the cookie useAuth() attaches | ||
| // for SSR is otherwise dropped here and the server-side session lookup comes back unauthenticated. | ||
| export async function useAuthSession() { | ||
| const authClient = useAuth(); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
rg -n -C 5 'createAuthClient|export .*authClient|useAuth\(\)|useAuthSession|useSession' app/shared/api app/featuresRepository: ebulgakov/linkfolio
Length of output: 7125
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
printf 'Files changed/modified:\n'
git diff --stat || true
printf '\nRelevant source files:\n'
for f in \
app/shared/api/auth-client.ts \
app/shared/api/use-auth.ts \
app/shared/api/use-session.ts \
app/features/auth-buttons/model/use-auth-buttons.ts \
app/features/home-landing/model/use-landing-hero.ts \
app/features/collections/ui/collections-list.vue \
app/features/auth-buttons/ui/*.vue \
app/shared/api/index.ts
do
if [ -f "$f" ]; then
echo "===== $f ====="
wc -l "$f"
cat -n "$f"
fi
done
printf '\nPackage / Better Auth version references:\n'
for f in package.json pnpm-lock.yaml yarn.lock package-lock.json bun.lockb bun.lock; do
if [ -f "$f" ]; then
echo "===== $f ====="
rg -n "better-auth|vue" "$f" | head -50
fi
done
echo "===== git status (short) ====="
git status --shortRepository: ebulgakov/linkfolio
Length of output: 16209
🌐 Web query:
better-auth vue createAuthClient singleton client useSession SSR cookies import.meta.client
💡 Result:
To use Better Auth with Vue (specifically in a Nuxt context), follow these best practices for client creation, session management, and SSR. Client Creation and Singleton The auth client is typically created once as a singleton for general use, but you may need request-scoped clients during SSR to ensure cookies are forwarded correctly [1][2][3]. Create a standard client for general use in a dedicated file: // lib/auth-client.ts import { createAuthClient } from "better-auth/vue"; export const authClient = createAuthClient({ baseURL: "http://localhost:3000" // Required if auth server is on a different domain }); export const { signIn, signUp, signOut, useSession } = authClient; SSR and Cookie Forwarding By default, the standard authClient does not forward cookies during SSR. Use one of these two approaches to handle authenticated requests server-side [2][3]: Approach A: Guard with import.meta.client Only call client methods that require authentication (like listAccounts or profile) on the client side [3]. <script setup lang="ts"> import { authClient } from "/lib/auth-client"; const data = ref; onMounted(async => { if (import.meta.client) { const res = await authClient.listAccounts; data.value = res.data; } }); </script> Approach B: Request-Scoped Client For SSR-native data fetching, create a helper composable that manually forwards cookies [2][3]. // app/composables/useAuth.ts import { createAuthClient } from "better-auth/vue"; export function useAuth { const headers = import.meta.server? useRequestHeaders(["cookie"]): undefined; return createAuthClient({ fetchOptions: { headers }, }); } // In your page/component const { data } = await useAsyncData("data", => useAuth.listAccounts.then((res) => res.data)); Session Management For session state, use the built-in /lib/auth-client"; // This fetches the session on the server and hydrates it on the client const { data: session } = await authClient.useSession(useFetch); </script> Note: If you encounter hydration mismatches or session issues due to absolute URLs in useSession hook. In Nuxt, passing useFetch to useSession allows it to handle SSR session hydration properly by including the request cookies [2][4]. <script setup lang="ts"> import { authClient } from "useFetch, use a relative path wrapper to ensure Nuxt correctly forwards cookies to the local API endpoint [4].
Citations:
- 1: https://raw.githubusercontent.com/better-auth/better-auth/main/docs/content/docs/integrations/nuxt.mdx
- 2: https://better-auth.com/docs/integrations/nuxt
- 3: https://github.com/better-auth/better-auth/blob/canary/docs/content/docs/integrations/nuxt.mdx
- 4: useSession(useFetch) in Nuxt SSR is causing: "Hydration completed but contains mismatches" better-auth/better-auth#5358
Use one browser-side authClient for session reads and sign-out.
useAuth() creates a new Better Auth client on each call. In app/features/auth-buttons/model/use-auth-buttons.ts, useAuthSession() resolves session data through one client while authClient.signOut() signs out through a different client. Use the shared client-select pattern for both SSR and client-side auth work.
app/features/auth-buttons/model/use-auth-buttons.ts#L4callsuseAuth()during browser execution.app/shared/api/use-session.ts#L7also callsuseAuth()from browser-side auth usage.
📍 Affects 2 files
app/shared/api/use-session.ts#L7-L7(this comment)app/features/auth-buttons/model/use-auth-buttons.ts#L4-L4
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/shared/api/use-session.ts` at line 7, Use the shared auth-client
selection pattern in app/shared/api/use-session.ts at line 7 and
app/features/auth-buttons/model/use-auth-buttons.ts at line 4 so browser-side
session reads and sign-out reuse one client instance, while preserving the
existing SSR/client distinction.
Source: Coding guidelines
| const { data: session } = await authClient.useSession((url, opts) => | ||
| useFetch(url, { | ||
| ...opts, | ||
| key: "auth-session", | ||
| headers: import.meta.server ? useRequestHeaders(["cookie"]) : undefined | ||
| }) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
rg -n -C 6 'baseURL|useSession|useFetch\(url|auth-session' app/shared/apiRepository: ebulgakov/linkfolio
Length of output: 1836
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
printf '--- relevant files ---\n'
wc -l app/shared/api/use-auth.ts app/shared/api/use-session.ts
cat -n app/shared/api/use-auth.ts app/shared/api/use-session.ts
printf '\n--- imports/usages of useAuthSession/useAuth ---\n'
rg -n 'useAuthSession|useAuth\(|createAuthClient|better-auth' app --glob '*.{ts,vue,tsx}'
printf '\n--- config mentions of auth/baseURL/api ---\n'
rg -n -C 4 'better-auth|baseURL|api.*base|auth' nuxt.config.* app 2>/dev/null || true
printf '\n--- package better-auth version ---\n'
node - <<'JS'
const fs = require('fs');
for (const f of ['package.json','package-lock.json','pnpm-lock.yaml','yarn.lock']) {
if (fs.existsSync(f)) console.log(f);
}
try {
const p = JSON.parse(fs.readFileSync('package.json','utf8'));
console.log({ dependencies: p.dependencies?.['better-auth'], devDependencies: p.devDependencies?.['better-auth'] });
} catch (e) {}
JSRepository: ebulgakov/linkfolio
Length of output: 248
🌐 Web query:
better-auth Nuxt integration useSession Nuxt payload reuse hydration absolute baseURL
💡 Result:
To integrate better-auth in Nuxt with proper session hydration and address potential issues with absolute URLs and cookie forwarding, use the following patterns. 1. Recommended SSR Pattern Pass Nuxt's useFetch to useSession to ensure session data is fetched during SSR and correctly hydrated on the client [1][2]. <script setup lang="ts"> import { authClient } from "~~/lib/auth-client"; const { data: session } = await authClient.useSession(useFetch); </script> 2. Handling Absolute baseURL Issues If you have a baseURL configured in your auth client (e.g., for cross-domain usage or specific environment requirements), it may cause Nuxt's useFetch to treat the request as cross-origin, which causes it to drop cookies during SSR [3][4]. To fix this, wrap useFetch to force relative paths [3][4]: import { useFetch } from '#app'; const relativeFetch = ((url: string, opts?: any) => { try { if (url.startsWith('http')) url = new URL(url).pathname; } catch {} return useFetch(url, opts); }) as any; const { data: session } = await authClient.useSession(relativeFetch); 3. Using hydrateSession For scenarios where you need to explicitly seed the client with an initial session to avoid loading flashes or to handle complex SSR data passing, you can use the hydrateSession method [5]. authClient.hydrateSession(initialSession); const { data: session } = authClient.useSession; 4. Configuration Best Practices - Base URL Priority: Ensure your baseURL is correctly defined [6][7]. In Nuxt, the recommended approach is setting NUXT_PUBLIC_SITE_URL or using runtimeConfig.public.siteUrl [8]. Relying on auto-inference is not recommended for production [6][7]. - Cookie Forwarding: Always ensure that you are using relative paths or that your setup supports cross-origin cookie credentials if you must use absolute URLs [3][4]. - Avoid Configuration Drift: If using a custom basePath (e.g., /api/v1/auth), ensure that the Better Auth server config, the API route path, and the auth client's baseURL all match precisely to avoid 404s or session resolution failures [9].
Citations:
- 1: https://better-auth.com/docs/integrations/nuxt
- 2: feat(nuxt): support session ssr for nuxt better-auth/better-auth#209
- 3: useSession(useFetch) in Nuxt SSR is causing: "Hydration completed but contains mismatches" better-auth/better-auth#5358
- 4: Nuxt SSR: useFetch integration causes session to return undefined after OAuth redirect in v1.3.10/v1.3.11 better-auth/better-auth#4722
- 5: better-auth/better-auth@4e8e4c7
- 6: https://www.better-auth.com/docs/reference/options
- 7: https://github.com/better-auth/better-auth/blob/canary/docs/content/docs/reference/options.mdx
- 8: https://better-auth.nuxt.dev/getting-started/configuration
- 9: basePath not respected in Nuxt integration (routes always default to /api/auth) better-auth/better-auth#4423
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
echo '--- relevant files ---'
wc -l app/shared/api/use-auth.ts app/shared/api/use-session.ts
cat -n app/shared/api/use-auth.ts app/shared/api/use-session.ts
echo
echo '--- imports/usages of useAuthSession/useAuth ---'
rg -n 'useAuthSession|useAuth\(|createAuthClient|better-auth' app --glob '*.{ts,vue,tsx}' || true
echo
echo '--- config mentions of auth/baseURL/api ---'
rg -n -C 4 'better-auth|baseURL|api.*base|auth' nuxt.config.* app 2>/dev/null || true
echo
echo '--- package better-auth version ---'
node - <<'JS'
const fs = require('fs');
for (const f of ['package.json','package-lock.json','pnpm-lock.yaml','yarn.lock']) {
if (fs.existsSync(f)) console.log(f);
}
try {
const p = JSON.parse(fs.readFileSync('package.json','utf8'));
console.log({ dependencies: p.dependencies?.['better-auth'], devDependencies: p.devDependencies?.['better-auth'] });
} catch (e) {}
JSRepository: ebulgakov/linkfolio
Length of output: 40062
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
echo '--- root config candidates ---'
git ls-files | rg '(^|/)nuxt\.config\.|(^|/)app\.config\.|(^|/)better-auth|auth' | sed 's#^\./##'
echo
echo '--- content around config/auth files ---'
for f in $(git ls-files | rg '(^|/)(nuxt.config|app.config|better-auth)\.(ts|js|mjs|mts|mjs)$' || true); do
echo "### $f"
wc -l "$f"
cat -n "$f"
doneRepository: ebulgakov/linkfolio
Length of output: 1798
🌐 Web query:
Better Auth Nuxt app.config.ts authURL baseURL useSession absolute URL issue
💡 Result:
In Better Auth Nuxt applications, the issue where useSession(useFetch) fails during SSR often stems from the use of an absolute URL for the baseURL in the client configuration [1][2][3]. When an absolute URL (e.g., http://localhost:3000) is provided, Nuxt's useFetch treats it as a cross-origin request, which prevents the automatic forwarding of cookies during server-side rendering [1][2][3]. Consequently, the session request is made without authentication credentials, resulting in a null session [1][2]. To resolve this, follow these recommended practices for single-domain Nuxt applications: 1. Avoid Absolute URLs on the Client: Do not set a baseURL on the client-side Better Auth instance if your application and auth handler share the same domain [1][2]. Omitting it forces requests to be relative, allowing Nuxt to correctly forward cookies during SSR [1][3]. // lib/auth-client.ts export const authClient = createAuthClient; // Do not set baseURL here 2. Configure Base URL on the Server Only: Ensure the baseURL is explicitly defined in your server-side Better Auth configuration, not on the client [1][2]. // lib/auth.ts export const auth = betterAuth({ baseURL: process.env.BETTER_AUTH_URL || 'http://localhost:3000', basePath: '/api/auth', //... }); 3. Workaround for Absolute Paths: If you absolutely must use a baseURL in the client, you can wrap the useFetch call to strip the origin, ensuring the URL remains relative for the server-side request [1][2][3]: import { useFetch } from '#app'; const relativeFetch = ((url: string, opts?: any) => { try { if (url.startsWith('http')) url = new URL(url).pathname; } catch {} return useFetch(url, opts); }) as any; const { data: session } = await authClient.useSession(relativeFetch); 4. Explicitly Handle Responses: Ensure your Nuxt catch-all handler correctly forwards headers using sendWebResponse to maintain session state [1][2]. // server/api/auth/[...all].ts export default defineEventHandler(async (event) => { const response = await auth.handler(toWebRequest(event)); return sendWebResponse(event, response); }); If you are using a Nuxt layer or a more complex architecture, ensure you are not inadvertently setting NUXT_PUBLIC_BETTER_AUTH_URL or NUXT_PUBLIC_AUTH_URL in your environment, as these can silently inject an absolute baseURL into your client config [1][2][3].
Citations:
- 1: useSession(useFetch) in Nuxt SSR is causing: "Hydration completed but contains mismatches" better-auth/better-auth#5358
- 2: Stripe plugin broken with Nuxt better-auth/better-auth#9221
- 3: Nuxt SSR: useFetch integration causes session to return undefined after OAuth redirect in v1.3.10/v1.3.11 better-auth/better-auth#4722
Use a relative URL in useAuthSession’s useFetch call.
useAuth() sets baseURL to useRequestURL().origin, so authClient.useSession() can pass an absolute URL here. That makes Nuxt treat the SSR session lookup as a cross-origin request and can drop the request body/cookie, leaving hydration with an undefined session. Test the logged-in SSR + hydration path, and normalize absolute URLs to their pathname/query before forwarding them to useFetch.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/shared/api/use-session.ts` around lines 9 - 14, Update the useAuthSession
callback passed to authClient.useSession so absolute URLs are normalized to
their relative pathname and query before being forwarded to useFetch, preserving
the existing request headers and auth-session key. Ensure SSR logged-in session
data and client hydration continue receiving the session correctly.
1 participant
… GitHub link
Summary by CodeRabbit