"state mismatch" error if `nuxt-auth-state` already exists

[tomlewis0]

Overview
The handleState logic falls over in the case that the nuxt-auth-state cookie is already present. This results in a "state mismatch" error and is unrecoverable without instructing users to erase cookies.

Detail

handleState attempts to fetch the cookie. If its successful, it erases and returns it. If it fails, it generates and stores it.

nuxt-auth-utils/src/runtime/server/lib/utils.ts

Lines 207 to 217 in 84f879e

	export async function handleState(event: H3Event) {
	let state = getCookie(event, 'nuxt-auth-state')
	if (state) {
	deleteCookie(event, 'nuxt-auth-state')
	return state
	}
	state = encodeBase64Url(getRandomBytes(8))
	setCookie(event, 'nuxt-auth-state', state)
	return state
	}

The issue is that we call this method twice during oauth. Once before the external redirect and again when the user returns and the code and state query params are available. Example.

The happy path is where nuxt-auth-state is undefined, it is generated, stored and sent along with the redirect to the oauth provider. On return, its returned and erased.

The failure path is where nuxt-auth-state is defined as an arbitrary value, it is returned and erased. On return, it is undefined and a new value is generated resulting in a mismatch.

Proposal
WIP - feedback welcomed

Related

• Github login failed: state mismatch #454

[IlyaSemenov]

handleState should be split apart into setStateCookie and validateStateCookie.

[IlyaSemenov]

For the time being, I came up with this wrapper:

const handler = defineOAuthGitHubEventHandler(....)

export default defineEventHandler(async (event) => {
  // Work around a bug in nuxt-auth-utils:
  // https://github.com/atinux/nuxt-auth-utils/issues/461
  if (!getQuery(event).state && getCookie(event, "nuxt-auth-state")) {
    deleteCookie(event, "nuxt-auth-state")
    return sendRedirect(event, event.path)
  }
  return handler(event)
})

[atinux]

Would you be happy to open a PR? 🙏