search

sidebase / nuxt-auth

Authentication built for Nuxt 3! Easily add authentication via OAuth providers, credentials or Email Magic URLs!
https://auth.sidebase.io
MIT License
1.26k stars 162 forks source link

Default provider -> SignOut problem #204

Closed Kingside88 closed 1 year ago

Kingside88 commented 1 year ago

Environment

Nuxt project info: 08:10:52

Reproduction

Hi, according to this feature: https://github.com/sidebase/nuxt-auth/issues/154

Unfortunately I can no longer SignOut if "defaultProvider" is set. SignOut redirect back to my page and do not SignOut.

Using newest version "0.4.0-alpha.5" nuxt.config.ts auth: { enableGlobalAppMiddleware: true, defaultProvider: 'keycloak' }, server\api\auth[...].ts `import KeycloakProvider from 'next-auth/providers/keycloak' import { NuxtAuthHandler } from '#auth'

export default NuxtAuthHandler({ debug: true, secret: process.env.AUTH_SECRET,

providers: [ // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point KeycloakProvider.default({ clientId: process.env.AUTH_CLIENT_ID ?? "", clientSecret: process.env.AUTH_SECRET, issuer: process.env.AUTH_ISSUER ?? "", idToken: true, wellKnown: process.env.AUTH_WELLKNOWN ?? "", }), ], callbacks: { session: (data : any) => { return data.session }, }, }) `

Describe the bug

After signOut() the page refresh and the user ist still logged in

Additional context

No response

Logs

i Vite client warmed up in 16164ms                                                                                                                 08:16:41
√ Nitro built in 7194 ms                                                                                                                     nitro 08:16:47
New request: /                                                                                                                                     08:16:49
New request: /                                                                                                                                     08:16:49
New request: /                                                                                                                                     08:16:49
New request: /                                                                                                                                     08:16:49  
New request: /api/auth/session?callbackUrl=http://localhost:3000/                                                                                  08:16:53
[next-auth][warn][DEBUG_ENABLED]                                                                                                                   08:16:53  
https://next-auth.js.org/warnings#debug_enabled
New request: /api/auth/session?callbackUrl=http://localhost:3000/                                                                                  08:16:56
New request: /api/auth/csrf                                                                                                                        08:17:08
New request: /api/auth/signout                                                                                                                     08:17:08
New request: /                                                                                                                                     08:17:08
New request: /api/auth/session?callbackUrl=http://localhost:3000/                                                                                  08:17:11
New request: /api/auth/providers                                                                                                                   08:17:11
New request: /api/auth/csrf                                                                                                                        08:17:11
New request: /api/auth/signin/keycloak                                                                                                             08:17:11
[next-auth][debug][CREATE_STATE] { state: 'kUz2aq1TMv0JnQlPY9A53xxAvwEW0oREW9GsSGYzBSY', maxAge: 900 }                                             08:17:11
[next-auth][debug][CREATE_PKCE_CHALLENGE_VERIFIER] {                                                                                               08:17:11  
  code_challenge: 'cO56pSfNMGPbra_okLONE-L_FPb3fasjoXfG3QPH8AI',
  code_challenge_method: 'S256',
  code_verifier: 'tXdbNdHg0MvXZ5vXOyyoQlNW0BOPfup-1hDE4wEbE1U',
  maxAge: 900
}
[next-auth][debug][GET_AUTHORIZATION_URL] {                                                                                                        08:17:11  
  url: 'http://127.0.0.1:8080/realms/vue/protocol/openid-connect/auth?client_id=vuejs&scope=openid%20email%20profile&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fkeycloak&state=kUz2aq1TMv0JnQlPY9A53xxAvwEW0oREW9GsSGYzBSY&code_challenge=cO56pSfNMGPbra_okLONE-L_FPb3fasjoXfG3QPH8AI&code_challenge_method=S256',
  cookies: [
    {
      name: 'next-auth.state',
      value: 'eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..vDkQvbq4JkJg_G5J.-9tsvyhVtiGtcM7Dtl_-vE_f_fO7fwQ2fXnDG7zhXjF9b3oaz2fWJBf2u5q8jNeYu4t0KUUR_9gfJgjw7d4-AvQiIlMvhtC14Uwe5LXmcWZBKVnXJ0ZcnhYQqBJNlMYGCNBdE_UeykSIMcRCel-7etWKuySwKk1fs-vMxTkOpTNWK6S1fNw.29-9Q1HlUusUjZSR1T9RVg',
      options: [Object]
    },
    {
      name: 'next-auth.pkce.code_verifier',
      value: 'eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..Y9WBfhMm1Ej8uRrs.oJtJOje5Gfhozxyw8NAUYKs8k0o8mqq9KUa9c4d_TRm4Zv_CmjVw5RetJdhOS9O_2Bo-u7C-cNTPIp0n3ZmIItoT37oHswpRCfDcNdo2I4JcdwET8B22ajmZFtZ_sB6ScYpc2E6pN98U3KxGzM1gbNLvMuvF2xrLiD4aFcFeNfnvDlRsmL60F6A1QHgr4g.-t_caFeZOr9IAB1dRyx4uw',
      options: [Object]
    }
  ],
  provider: {
    id: 'keycloak',
    name: 'Keycloak',
    wellKnown: 'http://127.0.0.1:8080/realms/vue/.well-known/openid-configuration',
    type: 'oauth',
    authorization: { params: [Object] },
    checks: [ 'pkce', 'state' ],
    idToken: true,
    profile: [Function: profile],
    style: {
      logo: '/keycloak.svg',
      logoDark: '/keycloak.svg',
      bg: '#fff',
      text: '#000',
      bgDark: '#fff',
      textDark: '#000'
    },
    clientId: 'vuejs',
    clientSecret: 'ELQTKN7sMrMJueVTZM9bAVzE4PU0Xc1x',
    issuer: 'http://127.0.0.1:8080/realms/vue',
    signinUrl: 'http://localhost:3000/api/auth/signin/keycloak',
    callbackUrl: 'http://localhost:3000/api/auth/callback/keycloak'
  }
}
New request: /api/auth/callback/keycloak?state=kUz2aq1TMv0JnQlPY9A53xxAvwEW0oREW9GsSGYzBSY&session_state=56a3ae45-646f-4946-8f04-d78a3beb850c&code=4fe1a882-91c4-4ab2-a7d1-630d79ca6199.56a3ae45-646f-4946-8f04-d78a3beb850c.f1bc23fc-5aa7-4b27-8497-71911f583b74
[next-auth][debug][PROFILE_DATA] {                                                                                                                 08:17:11
  OAuthProfile: {
    exp: 1675408931,
    iat: 1675408631,
    auth_time: 1675408529,
    jti: 'f2b02dfd-84db-4ae3-810b-60869debf75f',
    iss: 'http://127.0.0.1:8080/realms/vue',
    aud: 'vuejs',
    sub: '29c459ef-dfca-4787-bf0b-5dc77f7d08e1',
    typ: 'ID',
    azp: 'vuejs',
    session_state: '56a3ae45-646f-4946-8f04-d78a3beb850c',
    at_hash: 'sPxCcY_FCJrZtNg7OF0lKA',
    acr: '0',
    sid: '56a3ae45-646f-4946-8f04-d78a3beb850c',
    email_verified: true,
    preferred_username: 'vueuser',
    given_name: '',
    family_name: ''
  }
}
[next-auth][debug][OAUTH_CALLBACK_RESPONSE] {                                                                                                      08:17:11  
  profile: {
    id: '29c459ef-dfca-4787-bf0b-5dc77f7d08e1',
    name: 'vueuser',
    email: undefined,
    image: undefined
  },
  account: {
    provider: 'keycloak',
    type: 'oauth',
    providerAccountId: '29c459ef-dfca-4787-bf0b-5dc77f7d08e1',
    access_token: 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJMeVdDSDdlUGhiZFY4OUF3MXhWZHo1bHYycmlFMHpIc1lXdWcyLVk3ZFdjIn0.eyJleHAiOjE2NzU0MDg5MzEsImlhdCI6MTY3NTQwODYzMSwiYXV0aF90aW1lIjoxNjc1NDA4NTI5LCJqdGkiOiJhMDU4NDQ0NC0wYWRmLTRlM2ItYmMyMi1kNzY5ZWMyZDRlNDIiLCJpc3MiOiJodHRwOi8vMTI3LjAuMC4xOjgwODAvcmVhbG1zL3Z1ZSIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiIyOWM0NTllZi1kZmNhLTQ3ODctYmYwYi01ZGM3N2Y3ZDA4ZTEiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJ2dWVqcyIsInNlc3Npb25fc3RhdGUiOiI1NmEzYWU0NS02NDZmLTQ5NDYtOGYwNC1kNzhhM2JlYjg1MGMiLCJhY3IiOiIwIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6MzAwMC8qIiwiaHR0cDovL2xvY2FsaG9zdDozMDAwIl0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLXZ1ZSIsIm9mZmxpbmVfYWNjZXNzIiwiYWRtaW4iLCJ1bWFfYXV0aG9yaXphdGlvbiJdfSwicmVzb3VyY2VfYWNjZXNzIjp7ImFjY291bnQiOnsicm9sZXMiOlsibWFuYWdlLWFjY291bnQiLCJtYW5hZ2UtYWNjb3VudC1saW5rcyIsInZpZXctcHJvZmlsZSJdfX0sInNjb3BlIjoib3BlbmlkIHByb2ZpbGUgZW1haWwiLCJzaWQiOiI1NmEzYWU0NS02NDZmLTQ5NDYtOGYwNC1kNzhhM2JlYjg1MGMiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwicHJlZmVycmVkX3VzZXJuYW1lIjoidnVldXNlciIsImdpdmVuX25hbWUiOiIiLCJmYW1pbHlfbmFtZSI6IiJ9.A3cIopXwpU1bkiPN2AZVZ3bDalLCSMCzuGqbfr9Lz6LWLKddnyyikn_UOHew0mXQfeAs_eQLFZX937tV3fqu67LQyMw9bDUG2m4-wx9dhqBXXXk4ltX1bcGl1-zvV5E2IDm-4kGibnetdoazhjfrMKDqH3W9m_nvLVtURQ0a78r6qzxbJ9DuG8vPAFUbRp7W8lCDfRWzzhS0-iJwBb0ZOAM_kJPCdnFcKWQEcLPqt5AhKOnWiVxtJ_lAcJ4PABkRb9lF1oNOEJQAmOQyWVkqw1rZbFOhUYVUSGCpNRsXjsCgERIM4Zzqgkz06hZ1P13q0yvE3ZXmifFAMI45a20dIA',
    expires_at: 1675408931,
    refresh_expires_in: 1800,
    refresh_token: 'eyJhbGciOiJIUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICI1NTkzMzBlMy05NmJlLTRiMWYtYmYyZS03YWQ0ODJiNTMzMmQifQ.eyJleHAiOjE2NzU0MTA0MzEsImlhdCI6MTY3NTQwODYzMSwianRpIjoiNTkxYjRlMDUtZmQ5OC00M2E3LWI2OTctMjcyMDM2ZWUzZWI3IiwiaXNzIjoiaHR0cDovLzEyNy4wLjAuMTo4MDgwL3JlYWxtcy92dWUiLCJhdWQiOiJodHRwOi8vMTI3LjAuMC4xOjgwODAvcmVhbG1zL3Z1ZSIsInN1YiI6IjI5YzQ1OWVmLWRmY2EtNDc4Ny1iZjBiLTVkYzc3ZjdkMDhlMSIsInR5cCI6IlJlZnJlc2giLCJhenAiOiJ2dWVqcyIsInNlc3Npb25fc3RhdGUiOiI1NmEzYWU0NS02NDZmLTQ5NDYtOGYwNC1kNzhhM2JlYjg1MGMiLCJzY29wZSI6Im9wZW5pZCBwcm9maWxlIGVtYWlsIiwic2lkIjoiNTZhM2FlNDUtNjQ2Zi00OTQ2LThmMDQtZDc4YTNiZWI4NTBjIn0.d4NluMuKwIu8Qnzcv9d-MWF4yxAIonwBr-soP1CIs3U',
    token_type: 'Bearer',
    id_token: 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJMeVdDSDdlUGhiZFY4OUF3MXhWZHo1bHYycmlFMHpIc1lXdWcyLVk3ZFdjIn0.eyJleHAiOjE2NzU0MDg5MzEsImlhdCI6MTY3NTQwODYzMSwiYXV0aF90aW1lIjoxNjc1NDA4NTI5LCJqdGkiOiJmMmIwMmRmZC04NGRiLTRhZTMtODEwYi02MDg2OWRlYmY3NWYiLCJpc3MiOiJodHRwOi8vMTI3LjAuMC4xOjgwODAvcmVhbG1zL3Z1ZSIsImF1ZCI6InZ1ZWpzIiwic3ViIjoiMjljNDU5ZWYtZGZjYS00Nzg3LWJmMGItNWRjNzdmN2QwOGUxIiwidHlwIjoiSUQiLCJhenAiOiJ2dWVqcyIsInNlc3Npb25fc3RhdGUiOiI1NmEzYWU0NS02NDZmLTQ5NDYtOGYwNC1kNzhhM2JlYjg1MGMiLCJhdF9oYXNoIjoic1B4Q2NZX0ZDSnJadE5nN09GMGxLQSIsImFjciI6IjAiLCJzaWQiOiI1NmEzYWU0NS02NDZmLTQ5NDYtOGYwNC1kNzhhM2JlYjg1MGMiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwicHJlZmVycmVkX3VzZXJuYW1lIjoidnVldXNlciIsImdpdmVuX25hbWUiOiIiLCJmYW1pbHlfbmFtZSI6IiJ9.UQvH8u-1sxXrH9C9eNp0OjJC38f11JEXgGmuLHJ_3gbS0dIAIjuQ20xXRqR-J-blJeiOOdb8xpBNL_sAMkKER2nCvSsP1ga4y26BZfJhWsfFJmK3ITVt12Iur5EHbVNvV-EkhK0GsO-wOAxeA-R6_SoD76crug8AacwQGgyGHlfmJH7KCNExQXP3Nrjn4ki4G3neJAQG6kKhUauMvXerlRi-x35cumz7Iu0QeT1Bq7hwESy0vQdxmNHS3DOWA2CwfCotag7AeHlWOdgPAvG3AbCP9aypMJZ2LJ4FS1c6itiv_Th243Fmb4BhKlwJsVWGa0sr9TvCjxyiFaYwNHWokQ',
    'not-before-policy': 0,
    session_state: '56a3ae45-646f-4946-8f04-d78a3beb850c',
    scope: 'openid profile email'
  },
  OAuthProfile: {
    exp: 1675408931,
    iat: 1675408631,
    auth_time: 1675408529,
    jti: 'f2b02dfd-84db-4ae3-810b-60869debf75f',
    iss: 'http://127.0.0.1:8080/realms/vue',
    aud: 'vuejs',
    sub: '29c459ef-dfca-4787-bf0b-5dc77f7d08e1',
    typ: 'ID',
    azp: 'vuejs',
    session_state: '56a3ae45-646f-4946-8f04-d78a3beb850c',
    at_hash: 'sPxCcY_FCJrZtNg7OF0lKA',
    acr: '0',
    sid: '56a3ae45-646f-4946-8f04-d78a3beb850c',
    email_verified: true,
    preferred_username: 'vueuser',
    given_name: '',
    family_name: ''
  }
}
New request: /                                                                                                                                     08:17:11
New request: /api/auth/session?callbackUrl=http://localhost:3000/                                                                                  08:17:14
jorgv commented 1 year ago

It happens the same to me. logout just refreshes the page

Kingside88 commented 1 year ago

I provide a full keycloak demo and nuxt 3 starter pack from sfx-code. you can use it for testing purposes. Just clone it, add .env file provided from markdown and pnpm run dev will start your're demo instance https://github.com/Kingside88/nuxt3-primevue-starter-auth

BracketJohn commented 1 year ago

Hey @Kingside88 👋

Thank you for the very generous reproduction - it's amazing that you setup and made a vailable a full keycloak instance for this!

I just tested it through: I cannot reproduce the error: When I click "sign out" I see the signout request happening + am redirected to the login page. Refreshing or manually trying to navigate to / also forces me back onto the login page.

Here's the sequence of commands I ran:

> git clone https://github.com/Kingside88/nuxt3-primevue-starter-auth

> cd nuxt3-primevue-starter-auth

# ... create .env file

> pnpm i

> pnpm run dev

I also tried it via pnpm run build && pnpm run preview and could nstill not see the behavior. What am I missing?

Btw: could you update the repro to use @sidebase/nuxt-auth@0.4.0-alpha.6 which we just released?

BracketJohn commented 1 year ago

I also just tried to replicate this with a github-oauth provider + firefox -> I was logged out as expected on the latest version.

Kingside88 commented 1 year ago

thank you for taking time for my issue. I updated the package. But now defaultProvider: 'keycloak' seems to be ignored. I expect the login page without selecting "Sign in with keycloak" 08-02-2023_22-02-39

mcazeneuve commented 1 year ago

When you close the session in the application in keycloak it is still active and when you re-enter the application it does not ask you again for the credentials. What is the programmed behavior?. SignIn always ask for credentials SignOut always clean session data and close the session on keycloak, this is the desired behavior, how can we achieve this?

mcazeneuve commented 1 year ago

[next-auth][error][OAUTH_CALLBACK_ERROR] 18:48:17 https://next-auth.js.org/errors#oauth_callback_error checks.state argument is missing { error: TypeError: checks.state argument is missing ....providerId: 'keycloak', message: 'checks.state argument is missing' }

Kingside88 commented 1 year ago

When you close the session in the application in keycloak it is still active and when you re-enter the application it does not ask you again for the credentials. What is the programmed behavior?. SignIn always ask for credentials SignOut always clean session data and close the session on keycloak, this is the desired behavior, how can we achieve this?

We could use the keycloak REST Api. The keycloak provider do the same. https://www.keycloak.org/docs-api/18.0/rest-api/#_users_resource you can search for Remove all user sessions associated with the user Also send notification to all clients that have an admin URL to invalidate the sessions for the particular user.

jorgv commented 1 year ago

I dont know if this is related or should I open a different issue, since the original problem was the redirection when login out but turned to be into something else.

Anyway, regarding the original issue of refreshing the page. Looks like after upgrading Nuxt Auth from ^0.3.3 to ^0.4.0. signOut({callbackUrl: "/foo"}) No longers works as expected and this causes a full refresh on the page.

According to Auth Next documentation the recommendation is to use it as: signOut({redirect: false, callbackUrl: "/foo"})

However, in Nuxt this doesn't work. It doesn't refresh anymore but it does not redirect to the callbackUrl as before.

Let me know if there is something I can do to further test this problem or if there is already any workaround.

thanks

Kingside88 commented 1 year ago

Thanks to this tutorial https://blog.devgenius.io/security-in-vuejs-3-0-with-authentication-and-authorization-by-keycloak-part-1-ae884889fa0d

I created a vanilla vue 3 project including pure keycloakJs package. It works like a charm from minute 1. I created a demo vue 3 app linked to my demo keycloak instance. In my case I will implement it in nuxt 3 and use it there. https://github.com/Kingside88/vue3-auth-keycloakJs

I like the idea of just using a provider but it seems to me the dependencies are to heavy. nuxt-auth is dependend on next-auth and both are dependend on provider written by nobody knows.

Using official libraries is better than be depended on 3rd parties. I will update you guys if my solution is ready so everybody can use it

Kingside88 commented 1 year ago

Ok guys, I've got an update for you. Nuxt 3 is running with official keycloakJs Javascript package. You can get a ready to go demo here: https://github.com/Kingside88/nuxt3-primevue-starter-auth/blob/keycloakJs/README.md The sidebase/nuxt-auth or better say next-auth keycloak provider has a bug providing the JWT token. It misses some properties. Now we can compare both solutions.

zoey-kaiser commented 1 year ago

As there has not been any progress here for a while I will close this issue. It seems like the issue has more to do with NextAuth. Maybe a good next step would be to contact them and investigate futhur!