Logout Function Error "Invalid Payload"

[pvenableh]

Version

nuxt-directus-next: 0.0.14
nuxt: 3.11.1

Steps to reproduce

Login with simple function:

async function attemptLogin() {
   const result = await login(email, password);
}

Successfully logs in and creates two cookies: 'directus_access_token' and 'directus_refresh_token'.

Attempt logout with simple function:

const handleLogout = async () => {
    await logoutUser();
})

What is Expected?

Expected to logout user and remove tokens.

Error response: "Invalid payload. The refresh token is required in either the payload or cookie."

[sandros94]

Could you also share any directus configs within your nuxt.config.ts?

where is logoutUser() defined?

What happens when you do the following?

<template>
  <div>
    <button @click="logout()">Logout</button>
  </div>
</template>

<script setup>
const { logout } = useDirectusAuth()
</script>

[pvenableh]

@sandros94 Thanks for the response. Yeah I forgot to include that statement in my ticket. I have that exact code in the logout component...just with some styling.

In terms of my nuxt.config.ts settings for the directus module, I have this:

directus: {
		url: 'https://admin.********.***',
		moduleConfig: {
			devtools: true,
			readMeQuery: {
				fields: ['*'],
				updateState: true,
			},
			autoRefresh: {
				redirectTo: '/auth/signin',
			},
		},
	},

I am using Directus 10.10.4 that is self-hosted on a Docker Compose instance. Here is a screenshot of the response I get:

[pvenableh]

I reverted nuxt-directus-next to 0.0.12 and all works as intended. That reverts the @directus/sdk dependency to 14.0.0.

From what I have read - as of 15.0.0 - the SDK auth composable has a new session auth mode. I think this might be where the Invalid Payload error is coming from.

Looking through the docs at the moment.

[sandros94]

I reverted nuxt-directus-next to 0.0.12 and all works as intended. That reverts the @directus/sdk dependency to 14.0.0.

From what I have read - as of 15.0.0 - the SDK auth composable has a new session auth mode. I think this might be where the Invalid Payload error is coming from.

Looking through the docs at the moment.

yeah I'm also looking for a way to reproduce it, but haven't been able to atm. Indeed the session auth mode has been introduced in [email protected], but it is optional and not yet implemented in the module. So if I have to guess this shouldn't be it

[pvenableh]

I just did a basic test with the following and got the same result - login works, logout gives 'Invalid Payload' response:

Nuxt 3.11.1
Directus 10.5.5

The latest nuxt-directus-next is using @directus/sdk 15.1.0 as a dependency.

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.11.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "nuxt-directus-next": "^0.0.14"
  }
}

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["nuxt-directus-next"],
  directus: {
    url: "************",
  },
});

app.vue

<script setup>
const { user, logout, login } = useDirectusAuth();

const email = ref("********");
const password = ref("********");

const handleLogin = async () => {
   await login(email.value, password.value);
};

const handleLogout = async () => {
  await logout();
};
</script>
<template>
  <div>
    <a v-if="!user" @click.prevent="handleLogin()">Login</a>
    <a v-else @click.prevent="handleLogout()">Logout</a>
    <div v-if="user">
      <p>Logged in as {{ user.email }}</p>
    </div>
  </div>
</template>

[sandros94]

Sorry for delay, but I'm not able to reproduce this.

Are you, by any chance, also logging in with the Directus App interface?
By default both this module and Directus use the same cookie name, but since by default Directus also set it to http only, Nuxt will lose the ability to read it and pass it for logging out.

To solve this you could either use useNuxtCookie: false (and let Directus handle everything) or change the Nuxt's cookie name via:

nuxt-directus/playground/nuxt.config.ts

Lines 8 to 12 in 8030e51

	directus: {
	authConfig: {
	useNuxtCookies: true,
	refreshTokenCookieName: 'nuxt-directus_refresh_token'
	},

[ymilhahn]

Hello,

I get the same error using the suggested config.

nuxt-directus/playground/nuxt.config.ts

Lines 8 to 12 in 8030e51

	directus: {
	authConfig: {
	useNuxtCookies: true,
	refreshTokenCookieName: 'nuxt-directus_refresh_token'
	},

Directus: 10.10.5
@directus/sdk: ^15.1.0
nuxt-directus-next: ^0.0.14

The /auth/logout POST requests includes this body:

{
    "refresh_token": "***",
    "mode" :"cookie"
}

but errors with:

{
    "errors": [
       {
          "message": "Invalid payload. The refresh token is required in either the payload or cookie.",
          "extensions": {
             "code": "INVALID_PAYLOAD",
             "reason": "The refresh token is required in either the payload or cookie"
          }
       }
    ]
}

"directus": {
    "authConfig": {
        "useNuxtCookies": true,
        "refreshTokenCookieName": "nuxt-directus_refresh_token"
    },
    "moduleConfig": {
        "nuxtImage": {
            "useAuthToken": false,
            "useStaticToken": true
        }
    }
},

I noticed that the /auth/refresh POST request uses JSON

{
    "refresh_token": "***",
    "mode" :"json"
}

I copied the /auth/logout POST request to Postman and changed the mode to "json".
This returned 204 No content, which is expected and seems to make it work.
So we might need to use the json mode instead of the cookie mode for the logout request as well?

[sandros94]

@ymilhahn you might have found it! But I need to do some refactoring and tests. I'll update

[sandros94]

Yup, confirmed. The actual issue is upstream but since I need to also implement the session based auth mode I'll take this opportunity to prevent it from happening.

Also, in the meantime, would you be able to test out login and logouts via client?

const { client } = useDirectusAuth()

await client.login(email, password)
await client.logout()

[ymilhahn]

@sandros94
It worked with client and now it works with nuxt-directus-next 0.0.15 too!
Thanks a bunch for the fast fix!

This issue is resolved from my point of view!

[sandros94]

Thanks for the update @ymilhahn, @pvenableh feel free to reopen if you still have issues

[pvenableh]

Thank you @sandros94 and @ymilhahn!

Updated and all works as intended.

"nuxt": "^3.11.2",
"nuxt-directus-next": "^0.0.15"

Which is using '@directus/sdk': 15.1.0 as a dependency.

Really appreciate the help and quick updates.

[bennyzen]

Maybe I'm missing something crucial, but all these changes described above are not reflected in any way in the current documentation. useDirectusUser() seems now undefined. Am I looking at the wrong docs here https://nuxt-directus.de/composables/usedirectususer?

[sandros94]

@bennyzen if you are referring to the messages back in april then yes you have to look at this other documentation (for nuxt-directus-next)
https://next.nuxt-directus.de

But please do keep an eye on #273 to be notified when it gets merged, since it will break a lot of functionalities of how nuxt-directus-next currently works.

I haven't yet rewritten neither user nor auth logics, so I cannot comment on how they will work. If you want to leave an opinion of how you use them you can do so at #271