Is it possible to set a redirect on login?

[da-wilky]

Hey :) At first - awesome work! Thank you so much that we can use ur work to get done with our projects faster, its a big help to not implement all of this myself, dont even know if I could... Thanks!

I have one question at the moment - Is it somehow possible to give the $oidc.login() method a parameter to a link, where the user will be redirected after the login? I can see that there is already such a parameter, but its not used further and the redirect after the /oidc/callback is hardcoded to / .

Is this possible in general? Do you think you will do that change or wont have time for this?

Have a good one! :)

[aborn]

Not supported now! It's a general feature, which will achieved in the future.

[da-wilky]

Awesome! Thanks for the reply!

And is it currently indefinitely in the future, or is there already a timeline for when we could expect that feature?

[aborn]

Awesome! Thanks for the reply!

And is it currently indefinitely in the future, or is there already a timeline for when we could expect that feature?

Next month, the end of March.

[da-wilky]

Perfect! I'm looking forward for this change, very excited :) Thank you so much for your work!

[aborn]

Pls upgrade to latest version. https://github.com/aborn/nuxt-openid-connect/releases/tag/0.5.0

$oidc.login('your_ redirect_url')

Here is an example: https://github.com/aborn/nuxt-openid-connect/blob/main/playground/pages/index.vue

[da-wilky]

That was insane fast! Thank you so much! I'll try it out instantly, thank you! :)

[da-wilky]

Thank you very much!

At the current stage I got the problem, that I can only get on the /oidc/cbt Callback page, which is just showing me that HTML Page "OIDC Callback Middle Page. Loading..." but not really processing the callback... So I want to get redirected to /oidc/callback, which is really handling my callback with the redirect.

Currently in the login.ts file there is just: const callbackUrl = 'http://' + req.headers.host + '/oidc/cbt?redirect=' + redirectUrl

I think it needs to be something like this, so I can set the callback Url again with my environment variable: const callbackUrl = (op.callbackUrl && op.callbackUrl.length > 0) ? op.callbackUrl + '?redirect=' + redirectUrl : 'http://' + req.headers.host + '/oidc/cbt?redirect=' + redirectUrl

If you agree with this it would be nice to have this hotfix :) Thank you very much for your work and effort! :)

[da-wilky]

I've never done a pull request before, hope I did it right to lower ur needed work for that change :D

14

[aborn]

I've never done a pull request before, hope I did it right to lower ur needed work for that change :D #14

I have published, upgrade to 0.5.1. Thanks your hotfix pr.

[da-wilky]

So currently I get another error trying to use it:

invalid_grant (Incorrect redirect_uri)

at Client.grant (.\node_modules\openid-client\lib\client.js:1327:22)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Client.callback (.\node_modules\openid-client\lib\client.js:476:24)
at async /./.nuxt/dev/index.mjs:711:22
at async Object.handler (/./node_modules/h3/dist/index.mjs:1196:19)
at async Server.toNodeHandle (/./node_modules/h3/dist/index.mjs:1271:7)

just replaced my path with a dot.

The error gets triggered by callback.mjs const params = issueClient.callbackParams(req);, I tried printing stuff, and before that line its printing, after that line not anymore... At the moment I don't know where the error is coming from, I'll have a closer look into this, or maybe you know where this error is coming from :)

[aborn]

Can your provide more detail config info, and i will try to debug it. What's your redirect_uri ?

[da-wilky]

Yes, thank you!

I just tried it with the playground - I changed nothing, I only set the openidConnect Config to:

op: {
  issuer: 'http://192.168.178.133:8080/realms/TestUrl',  # My local keycloak instance
  clientId: 'testClient',
  clientSecret: '46s1ya46tfrYoFzh3l9rYaX3l7777777',
  callbackUrl: 'http://192.168.178.133:3000/oidc/callback', # Playground Running with npm run dev
  scope: [
    'openid',
    'email',
    'profile',
    // 'address'
  ]
},

Going on the frontpage http://192.168.178.133:3000/ and clicking login gets me to my keycloak where I log in. Then I get redirected to e.g. http://192.168.178.133:3000/oidc/callback?redirect=/secure&session_state=a76eac7a-74c8-482a-af88-fb37aaf5179f&code=93045586-bb7e-4e69-8fa9-06820f960e23.a76eac7a-74c8-482a-af88-fb37aaf5179f.a31d0637-d1c5-40ad-acd0-af04f07692c1 and there this error page is shown:

500
invalid_grant (Incorrect redirect_uri)

at Client.grant (.\nuxt-openid-connect\node_modules\openid-client\lib\client.js:1327:22)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Client.callback (.\nuxt-openid-connect\node_modules\openid-client\lib\client.js:476:24)
at async /./nuxt-openid-connect/playground/.nuxt/dev/index.mjs:700:22
at async Object.handler (/./nuxt-openid-connect/node_modules/h3/dist/index.mjs:1196:19)
at async Server.toNodeHandle (/./nuxt-openid-connect/node_modules/h3/dist/index.mjs:1271:7)

Hope you can reproduce, thank you for your time and effort debugging this! :)

[aborn]

The redirect_url param is 'redirect=/secure', which means '/secure' is not incorrect redirect_uri (because of no host name info). Maybe change it to 'http://192.168.178.133:3000/secure' , try it again.

[da-wilky]

I tried that one, so I got redirected to the page http://192.168.178.133:3000/oidc/callback?redirect=http://192.168.178.133:3000/secure&session_state=61b2bd5e-e93e-4d57-b8ce-ed134ff859fe&code=32635744-8444-46ca-be5d-ce6f0e2fc47c.61b2bd5e-e93e-4d57-b8ce-ed134ff859fe.a31d0637-d1c5-40ad-acd0-af04f07692c1 Unfortunately the same error occurs...

[da-wilky]

I dont really know how node-openid-client is working exactly. I can see that in your issueclient.ts file, a Client gets initiated, with an array of callbackUrls

  const client = new issuer.Client({
    client_id: op.clientId,
    client_secret: op.clientSecret,
    redirect_uris: [callbackUrl],
    response_type: config.response_type
    // id_token_signed_response_alg (default "RS256")
  }) // => Client

I dont exactly know what this part is doing, maybe a problem could be there? Just because I found the word redirect_uri there. Guess you know better where to look, just thought it might be a hint :)

[aborn]

I guess your oidc provider returns the redirect_uri, and node-openid-client verify redirect_uri is same as the client provided before. For me, my oidc provider doesn't provide this return param. Try to upgrade to 0.5.2.

[da-wilky]

Unfortunately it is not working for my keykloak setup yet... What do you mean with the return of redirect_uri by my oidc provider (keycloak)? I just printed the req.url inside the callback.ts file, once on the 0.4.5 version and once on the 0.5.2 version, there is no redirect_uri param in the url originally... The req.url from 0.4.5: /oidc/callback?session_state=e9a2abbc-2198-4e12-86d0-965773d70ff2&code=8d5f6ccd-fcc2-46ea-88e3-008cf3abae2b.e9a2abbc-2198-4e12-86d0-965773d70ff2.a31d0637-d1c5-40ad-acd0-af04f07692c1 The req.url from 0.5.2: /oidc/callback?redirect=http://192.168.178.133:3000/secure&session_state=e9a2abbc-2198-4e12-86d0-965773d70ff2&code=bb461957-1b02-409c-ab9a-78f00a84772d.e9a2abbc-2198-4e12-86d0-965773d70ff2.a31d0637-d1c5-40ad-acd0-af04f07692c1

So ofc it could be a problem with keycloak, but I dont really understand what exactly the problem is / for what I would need to look.... And without that redirect url param everything is working fine :) Maybe you got an idea? Or what to change inside the code to make it work? Which oidc provider are you using? :)

Thanks for all your time investing on my problem! :)

[aborn]

Your oidc provider is keycloak. How to install keycloak local? Currently I can't reproduce this case, because I haven't keycloak local env.

[da-wilky]

I use docker for that. My docker-compose.yml:

version: '3'

services:
  db_keycloak:
    container_name: db_keycloak
    image: postgres:15
    expose:
      - "5432"
    volumes:
      - ./db_keycloak:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: keycloak
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: 000000

  keycloak:
    image: quay.io/keycloak/keycloak:20.0
    container_name: keycloak
    depends_on:
      - db_keycloak
    ports:
      - 8080:8080
    environment:
      KEYCLOAK_ADMIN: admin
      KEYCLOAK_ADMIN_PASSWORD: admin

      KC_DB: postgres
      KC_DB_URL_HOST: db_keycloak
      KC_DB_USERNAME: postgres
      KC_DB_PASSWORD: 000000
    command: start-dev

I also exported my Test Realm, you should be able to import it and hopefully have the same setup as me: realm-export.zip

Let me know if you need anything more or if you cant reproduce it still, or have questions in case you are not familiar with keycloak/docker. :)

Thanks for all the engagement!

EDIT: I am using keycloak version 20.0.5, a new version just got released but is also not working.

[aborn]

Okay I will try to install keycloak local tomorrow.

[da-wilky]

Awesome! Thank you very much! :)

[aborn]

Today, I install keycloak local. But I didn't reproduce this error case. I update a new version 0.5.3, you can try it. Here is my config:

openidConnect: {
    addPlugin: true,
    op: {
      issuer: 'http://192.168.26.114:8080/realms/test', // change to your OP addrress
      clientId: 'testClient',
      clientSecret: 'cnuLA78epx8s8vMbRxcaiXbzlS4u8bSA',
      callbackUrl: 'http://192.168.26.114:3000/oidc/callback', // optional
      scope: [
        'email',
        'profile',
        'address'
      ]
    },
    config: {
      debug: true,
      response_type: 'id_token token',
      secret: 'oidc._sessionid',
      cookie: { loginName: '' },
      cookiePrefix: 'oidc._',
      cookieEncrypt: true,
      cookieEncryptKey: 'bfnuxt9c2470cb477d907b1e0917oidc',
      cookieEncryptIV: 'ab83667c72eec9e4',
      cookieEncryptALGO: 'aes-256-cbc',
      cookieMaxAge: 24 * 60 * 60, //  default one day
      cookieFlags: {
        access_token: {
          httpOnly: true,
          secure: false
        }
      }
    }
  }

Using keycloak as oidc provider local, it test passed. Hope this upgrade can help you. Please provide your openidConnect if this upgrade doesn't work.

[da-wilky]

Very awesome! It works! Thank you very much! :)

I never activated the Implicit Flow, now your error message told me to, and its working with the Implicit flow activated, thank you very much!

Now I am just curious - I'm just starting to learn OIDC and that stuff and I tried to read as much as possible about it... Overall the opinion goes to "Dont use implicit flow, better use authorization code flow (with PKCE)", do you think there is any way, to get this working with the Authorization Code Flow instead of the Implicit Flow? Or do you maybe know OIDC pretty well and there are no security concerns or anything with the Implicit Flow?

Thank you very much, im so glad its working - the Flow stuff would just be a little improvement in my head, I dont know if it is really necessary, I guess thats up on you. Thank you so much :)

[aborn]

For me, Implicit Flow more simpler then Authorization Code Flow. In our production env, we use implicit flow. For security Authorization Code Flow is better choice.

[da-wilky]

Okay, do you think there is a way to get this working with Authorization Code Flow? Because that flow is already working without those redirects inside the callback URLs. Just if I set my response_type to code again, the same error occurs as before :)

[da-wilky]

I guess there is no possibility to use a dynmic redirect URL with Authorization Code Flow, or at least others are complaining about that too... One solution I found, would be not sending that redirect as query parameter, instead save it on the server together with the state value of the request. So when receiving the callback from the oidc provider, read the redirect value from the given state and redirect there... Do you understand how I mean that? Would that be a possible option, or it might be too much work for a little security improvement? :)

[aborn]

I guess there is no possibility to use a dynmic redirect URL with Authorization Code Flow, or at least others are complaining about that too... One solution I found, would be not sending that redirect as query parameter, instead save it on the server together with the state value of the request. So when receiving the callback from the oidc provider, read the redirect value from the given state and redirect there... Do you understand how I mean that? Would that be a possible option, or it might be too much work for a little security improvement? :)

I will spend time to test Authorization Code Flow.

[da-wilky]

Thank you very much! :)

[aborn]

Version 0.5.4 has supported authorization code flow. I have tested in my local environment. You can try it and give me a feedback, thanks a lot.

[da-wilky]

That is insane! It was really just the following line?

const callBackUrl = op.callbackUrl.replace('cbt', 'callback')

It is working fine for me now, I thank you so much for all the effort and work you did for me and others using this package! Thanks a lot!