Support IBM AppID using iframe or popup

[davydnorris]

Version

v4.9.1

Reproduction link

http://requires.secret.keys/

Steps to reproduce

Trying to set up authentication via OAuth2 to IBM's AppID service. They currently prefer to support web_message as a response type. I have added the following to the standard demo code in this repo, and added a button with @click="$auth.loginWith('appID')"

      appID: {
        scheme: 'oauth2',
        secret: authInfo.secret,
        endpoints: {
          authorization: authInfo.oAuthServerUrl + '/authorization',
          token: authInfo.oAuthServerUrl + '/token',
          userInfo: authInfo.oAuthServerUrl + '/userinfo',
          logout: 'https://localhost:3443/signed-out'
        },
        responseType: 'code',
        responseMode: 'web_message',
        grantType: 'authorization_code',
        clientId: authInfo.clientId,
        scope: 'openid',
        codeChallengeMethod: 'S256'
      }

When I click the button I'm redirected to the AppID login page, and then when I log in I get the AppID auth page and an error in the console

failed to execute 'postmessage' on 'domwindow': the target origin provided ('https://localhost:3443') does not match the recipient window's origin ('https://us-south.appid.cloud.ibm.com')

This seems to indicate that they expect the authorization URL to be called in either an iframe or a separate window?

In addition, I can't see where the posted message is intercepted in the OAuth2 flow code

What is expected ?

Login is successful and I am returned to the secure page

What is actually happening?

login stalls at the AppID auth page because it cannot successfully post the message to the window it's looking for, because it doesn't exist

Additional comments?

I have looked at the OAuth2 web_message flow and it does appear that a separate or embedded window needs to be launched - this is how they keep the cross domains separate. This is not happening in the default nuxt/auth flow when responseMode is set to web_message

_{This bug report is available on Nuxt community (#c676)}

[GeorgeBT1997]

Hi! I was wondering if you'd be able to help me get IBM App ID working with my Nuxt app? I find no other references to people using IBM App ID with Nuxt Auth module, and I've been struggling all evening to implement a solution. Do you perhaps have a link to a working repo yet which implements App ID? I don't even get to the point of seeing the App ID login form, hitting login for me just gives the error:

TypeError: Cannot read property 'mounted' of undefined

I would really appreciate if you could offer any support, I know you're topic is one of support yourself so apologies if I'm being a nuisance, I just feel like I've exhausted all other avenues.

Thanks in advance!

[davydnorris]

Hi there,

I actually have a case open with IBM right now as it appears they haven't properly implemented the authentication - well, they claim to have implemented the web_message auth method but it looks like there's a bug in nuxt/auth when that one's used, and the ones that work in nuxt/auth are broken in IBM's implementation!

I am yelling at them right now because the spec includes several methods (the ones nuxt has implemented) and they are trying to tell me they are not as secure as the web_message method and I should use that, but that approach is still technically a draft, and they are just deflecting from the actual problem, which is that their implementation of the spec is buggy!

So right now if you take the example project from this repo and get it running, then add the AppID strategy above into nuxt.config.js, and add a button into the login.vue page as described above, you'll be able to test AppID and get it built at least.

If you comment out the responseMode line, you'll get the regular PKCE flow, which will bring up the AppID login and then redirect, but there's an error in AppID where the POST method isn't working properly (you'll see the error in the browser console). If you add the line back in, you'll see the error in nuxt/auth, which should be launching the AppID login in a window or iframe and the window.post will fail as documented in this bug report.

[bmulholland]

I'm not totally clear what actions there are, if any, for the auth module. Seems like most of the issues are on the IBM side? If IBM is failing when using web_message, what's the root cause in terms of what the module is doing?

[davydnorris]

Actually there are two issues with the auth module. When you select web_message as the method and then use loginWith():

• the login page must be called in a different window, or within an iframe and auth is simply calling login
• the login will use postmessage to pass back the authentication tokens to the original window, and there is no interceptor for this message in auth

You can see part of the issue in the error message above:
failed to execute 'postmessage' on 'domwindow': the target origin provided ('https://localhost:3443') does not match the recipient window's origin ('https://us-south.appid.cloud.ibm.com')

the target window no longer exists because auth has just called the login instead of opening it in a separate window or iframe. And if you look through the code, there's nothing anywhere that sets up to receive the postmessage info

[davydnorris]

Adding further to this - this is how IBM has implemented the web_message flow:
https://github.com/ibm-cloud-security/appid-clientsdk-js/tree/master/src

in particular look at the IFrameController and PopupController files that set up the separate windows and the message interceptor, and either the index file at line 41 or the utils file at around line 86 where the actual flow is implemented.