Custom logout page not routed as the documentation states

[arajkovic22]

Hi everybody, I am trying to create a custom logout page and navigate to it but for some reason path in navigateTo is getting transformed. On the upper picture is my file structure. This is how I am trying to navigate on my index page: <Button @click="navigateTo('/auth/logout')">LOGOUT And I get error 404... And this is oidc part of my nuxt config oidc: { defaultProvider: 'zitadel', providers: { zitadel: { clientId: '', baseUrl: '', redirectUri: '', clientSecret: '', } }, middleware: { globalMiddlewareEnabled: true, customLoginPage: true, } } Is this a known issue or am I missing something?

[tomfri]

I'm not sure why you get 404 but as I have understood the documentation you should set globalMiddlewareEnabled to false if you want to make custom login and logout pages. If globalMiddlewareEnabled is set to true /auth/logout will be redirected to /auth/zitadel/logout since you have made zitadel the defaultProvider.

[arajkovic22]

@tomfri But I want to have globalMiddlewareEnabled for all routes. Login works when placed like in the picture above but logout does not. As a workaround I created a subfolder called zitadel and moved my logout.vue inside of it. If I also move the login.vue then login gets the similar error... there are some inconsistencies here... I really don't want to have a file structure looking like:

[thedrc123]

@arajkovic22 @tomfri I am experiencing the exact same inconsistent behavior with the auth/logout route using the generic oidc configuration and oidc as my default provider. I also need the globalMiddlewareEnabled to be true and the customLoginPage to be true.

The docs don't mention anything about setting globalMiddlewareEnabled to false in order to use custom login and logout pages.

According to the docs: "This module can automatically add a global middleware to your Nuxt server. You can enable it by setting globalMiddlewareEnabled under the middleware section of the config. The middleware automatically redirects all requests to /auth/login if the user is not logged in. You can disable this behavior by setting redirect to false in the middleware configuration. The /auth/login route is only configured if you have defined a default provider. If you want to use a custom login page and keep your default provider or don't want to set a default provider at all, you can set customLoginPage to true in the middleware configuration.

If you set customLoginPage to true, you have to manually add a login page to your Nuxt app under /auth/login. You can use the login method from the useOidcAuth composable to redirect the user to the respective provider login page. Setting customLoginPage to true will also disable the /auth/logout route. You have to manually add a logout page to your Nuxt app under /auth/logout and use the logout method from the useOidcAuth composable to logout the user or make sure that you always provide the optional provider parameter to the logout method."

I've added the /auth/login.vue page and it works as described. I've added the /auth/logout.vue page and the /auth/logout route redirects to /auth/oidc/logout resulting in a 404 error when i call navigateTo('/auth/logout').

If I type the /auth/logout route manually into the browser it redirects me to the provider logoutUrl.

I'm assuming the custom logout page is meant to behave as the custom login does. If the custom logout route being intercepted and redirected to /auth/<default provider name>/logout is the intended behavior, that is unclear and not mentioned in the docs.

Hopefully the info I've provided helps to pin down the issue or verify if this is the intended behavior.

[mmillican]

I'm seeing this as well with a defaultProvider selected and no global middleware enabled. I've noticed that if you refresh though, it ends up redirecting you to the IDP login page.