How to refresh user on page load ?

[mrleblanc101]

Environment

Operating system	macOS 25.2.0
CPU	Apple M1 Pro (8 cores)
Node.js version	v24.4.1
nuxt/cli version	3.32.0
Package manager	pnpm@10.14.0
Nuxt version	4.2.2
Nitro version	2.12.9
Builder	vite@7.3.1
Config	auth, compatibilityDate, components, css, devtools, fonts, hooks, i18n, modules, runtimeConfig, vite
Modules	@nuxt/eslint@1.12.1, @nuxt/fonts@0.12.1, @nuxtjs/i18n@10.2.1, @sidebase/nuxt-auth@1.1.1, @pinia/nuxt@0.11.3, floating-vue/nuxt@5.2.2

Reproduction

.

Describe the bug

I've tried this:

<script setup>
const { getSession, refresh } = useAuth()

// Attempt 1
console.log('1');
await getSession();
console.log('2');

// Attempt 2
await callOnce(async () => {
    console.log('1');
    await getSession();
    console.log('2');
});

// Attempt 3
await useAsyncData(`account-settings-general-${locale.value}`, async () => {
    console.log('1');
    await getSession();
    console.log('2');
    return true;
});
</script>

And also with refresh instead of getSession.
If I do a client side navigation, it works and I see 1, 2 in the browser console.
If I do a hard refresh, I see 1, 2 in the terminal, but page never load and I have a spinner on the tab.

Additional context

No response

Logs

[phoenix-ru]

Normally the user is always refetched on the page load, so could you please give a bit more context on what you are trying to achieve?

I am assuming you are using the local provider and not authjs?

A quick answer on how to always do the getSession API call is to use the force option:

nuxt-auth/src/runtime/composables/local/useAuth.ts

Line 178 in 4808941

if (!tokenValue && !getSessionOptions?.force) {

Note, however, that using it will clear the authentication state if an error occurs (e.g. if your backend returns a 401 Unauthorized):

nuxt-auth/src/runtime/composables/local/useAuth.ts

Lines 199 to 201 in 4808941

	// Clear all data: Request failed so we must not be authenticated
	data.value = null
	rawToken.value = null

[mrleblanc101]

I want to refetch the user on SPA navigation, not on hard refresh. I'm using authjs provider with Keycloak

[phoenix-ru]

@mrleblanc101 The getSession for authjs should always request /session endpoint:

nuxt-auth/src/runtime/composables/authjs/useAuth.ts

Lines 223 to 286 in 4808941

	/**
	* Refresh and get the current session data.
	*
	* @param getSessionOptions - Options for getting the session, e.g., set `required: true` to enforce that a session _must_ exist, the user will be directed to a login page otherwise.
	*/
	async function getSession(getSessionOptions?: GetSessionOptions): Promise<SessionData | null> {
	const callbackUrlFallback = await getRequestURLWN(nuxt)
	const { required, callbackUrl, onUnauthenticated } = defu(getSessionOptions || {}, {
	required: false,
	callbackUrl: undefined,
	onUnauthenticated: () => signIn(undefined, {
	callbackUrl: getSessionOptions?.callbackUrl || callbackUrlFallback
	})
	})
	function onError() {
	loading.value = false
	}
	const headers = await getRequestHeaders(nuxt)
	return _fetch<SessionData>(nuxt, '/session', {
	onResponse: ({ response }) => {
	const sessionData = response._data
	// Add any new cookie to the server-side event for it to be present on the app-side after
	// initial load, see sidebase/nuxt-auth/issues/200 for more information.
	if (import.meta.server) {
	const setCookieValues = response.headers.getSetCookie ? response.headers.getSetCookie() : [response.headers.get('set-cookie')]
	if (setCookieValues && nuxt.ssrContext) {
	for (const value of setCookieValues) {
	if (!value) {
	continue
	}
	appendHeader(nuxt.ssrContext.event, 'set-cookie', value)
	}
	}
	}
	data.value = isNonEmptyObject(sessionData) ? sessionData : null
	loading.value = false
	if (required && status.value === 'unauthenticated') {
	return onUnauthenticated()
	}
	return sessionData
	},
	onRequest: ({ options }) => {
	lastRefreshedAt.value = new Date()
	options.params = {
	...options.params,
	callbackUrl: callbackUrl || callbackUrlFallback
	}
	},
	onRequestError: onError,
	onResponseError: onError,
	headers
	}, /* proxyCookies = */ true)
	}
	function getSessionWithNuxt(nuxt: NuxtApp) {
	return callWithNuxt(nuxt, getSession)
	}

If I do a hard refresh, I see 1, 2 in the terminal, but page never load and I have a spinner on the tab.

Can you try this on a very minimal project, ideally on an empty project, or with all other middleware disabled which might be interfering. The fact that you see logs means that getSession call succeeded and you the module should have a correct state.

What are you experiencing right now?

[mrleblanc101]

I'm not sure how can I do a repro for this.
Is there a demo auth I can use somewhere ?

Here is more info.

In my page I use:

// pages/accont/settings/general.vue
await useAsyncData(`account-settings-general-${locale.value}`, async () => {
    console.log(1);
    await getSession({ force: true });
    console.log(2);
    return true;
});

We use keycloak, but some user data is in Laravel, se we use this to fetch it before login:

// server/[...].ts
    callbacks: {
        jwt({ token, account }) {
            // Persist the OAuth access_token and or the user id to the token right after signin
            console.log('jwt');
            if (account) {
                token.accessToken = account.access_token;
                token.refreshToken = account.refresh_token;
                token.provider = account.provider;
                token.exp = account.expires_at;
                token.idToken = account.id_token;
            }
            return token;
        },
        async session({ session, token }) {
            console.log('session', 1);
            if (token.accessToken) {
                console.log('session', 2);
                const userinfo = await $fetch(`${process.env.API_URL}/api/users/me`, {
                    headers: {
                        Accept: 'application/json',
                        Authorization: `Bearer ${token.accessToken}`,
                    },
                });
                session.token = token;
                session.user = userinfo?.data;
            }
            console.log('session', 3);
            return session;
        },
    },

As you can see, with SPA navigation, I see jwt, session 1, session 2, session 3 in ther terminal.
And 1, 2 on the browser console and the page load fine.

But if I do a hard refresh.
Then I get jwt, session 1, session 2, session 3 from the initial fetch, then 1 from the asyncData, then jwt, session 1, session 2, session 3 from the re-fetch, then 2 from asyncData, but the page never load.

[phoenix-ru]

This might be a problem with Nuxt though as there are multiple warnings in the docs:

If you're using a custom useAsyncData wrapper, do not await it in the composable as that can cause unexpected behavior. See recipe for custom async data fetcher.

I will try your snippets in our project to see if I can reproduce it

[phoenix-ru]

@mrleblanc101 Sorry, but I was not able to reproduce this, repeating the same steps as you did. The only case I can get the web page to load for a long time is by explicitly returning user: undefined inside the session callback - can it be the case that your backend does not always return the user data, or e.g. it does not receive the access token? Can you debug it?
But even in this case the page does load and show expected results - no meaningful content (only layout) and errors occurring, but not "stuck loading nothing"

[mrleblanc101]

@phoenix-ru I added console.log(userinfo?.data);.
On a normal page, it's logged one time after the @sidebase/nuxt-auth authentification.
On the page with the useAsyncData, it's logged once on the client side when I navigate to the page.
On the server-side, if I do a hard refresh, the user object is fetched/logged twice, once from the @sidebase/nuxt-auth authentification, and once from the useAsyncData call like I would expect.

[phoenix-ru]

@mrleblanc101 Is it ever logged as undefined or is it always what you expect? I don't think we've seen such an error on any of our projects, meaning that this is likely a problem with your setup or the way you use useAsyncData.

Does maybe this work for you?

await callOnce(getSession)
// or await useAsyncData('...', getSession)

Another way to make sure that the problem for you is in NuxtAuth is by awaiting an empty promise:

await useAsyncData('...', async () => {
  await new Promise(resolve => setTimeout(resolve, 1000))
  return true
})

If the snippet above also hangs for you, that would mean the problem is not in NuxtAuth. Otherwise we need to find a way to reliably reproduce it.