Authentication window does not close on callback #3

ArcaneTSGK · 2018-08-07T08:03:21Z

I am trying to implement GitHub OAuth flow as detailed in your blog, except that I am using Gatsby as my static site generator.

Issue
The serverless endpoints are working with 'serverless offline' on localhost, but in a production environment the auth window popup does not close on callback.

The github:success token can be seen when you view the source of the callback in the popup.

Expected Behaviour
Auth window closes and I am logged in to the netlify-cms GitHub backend

netlify-cms version: 1.9.3

I took a look at your config.yml and the only difference is your base_url: is your home page whereas mine is the lambda endpoint https://[].execute-api.us-east-1.amazon.aws/prod

ArcaneTSGK · 2018-08-07T11:18:46Z

Interestingly, with the script the callback returns below, the alerts in the receiveMessage function is not hit in prod but does get hit on localhost

function getScript(mess, content) {
  return `<html><body><script>
  (function() {
    function receiveMessage(e) {
      alert('alert');
      console.log("receiveMessage %o", e)
      window.opener.postMessage(
        'authorization:github:${mess}:${JSON.stringify(content)}',
        e.origin
      )
      window.removeEventListener("message",receiveMessage,false);
    }
    window.addEventListener("message", receiveMessage, false)
    console.log("Sending message: %o", "github")
    window.opener.postMessage("authorizing:github", "*")
    })()
  </script></body></html>`;
}

ArcaneTSGK · 2018-08-08T06:30:53Z

The issue was with my config.yml after discussing the issue on gitter netlify, the base URL should not include the /prod

If you follow your blog post after the PR you initiated with the auth window issue (where you can now set an auth_endpoint) it is actually slightly incorrect and will cause a breaking bug.

The config.yml in your blog post should be updated to:

base_url: https://RANDOMSTUFF.execute-api.us-east-1.amazonaws.com
auth_endpoint: /prod/auth

It's also worth mentioning that when deploying a cloned version of your serverless app to AWS it doesn't prepend /oauth/ to [stage]/[method] which may also confuse readers of the blog post (hence why I omitted /oauth/ from the auth_endpoint above).

chrismade · 2018-08-10T19:10:17Z

I do have exactly the same issue - and will now follow instructions from above posts as provided by @ArcaneTSGK -

chrismade · 2018-08-11T08:59:17Z

I confirm that my issue was fixed by changing config.yml to this format:
base_url: https://RANDOMSTUFF.execute-api.us-east-1.amazonaws.com
auth_endpoint: /prod/auth

marksteele · 2019-02-13T03:52:18Z

For my site I'm doing some magic with CloudFront, so that might be part of the issue that most folks seem to be having. When I have time I'll revisit this.

jagyas · 2019-02-17T05:56:01Z

The issue was with my config.yml after discussing the issue on gitter netlify, the base URL should not include the /prod

If you follow your blog post after the PR you initiated with the auth window issue (where you can now set an auth_endpoint) it is actually slightly incorrect and will cause a breaking bug.

The config.yml in your blog post should be updated to:

base_url: https://RANDOMSTUFF.execute-api.us-east-1.amazonaws.com
auth_endpoint: /prod/auth

It's also worth mentioning that when deploying a cloned version of your serverless app to AWS it doesn't prepend /oauth/ to [stage]/[method] which may also confuse readers of the blog post (hence why I omitted /oauth/ from the auth_endpoint above).

Many many Thanks @ArcaneTSGK you saved me from lots of problems. Documentation must have this point. I was struggling a lot to figure out the issue. Thanks a lot man, cheers 👍

kpopper · 2019-06-07T10:53:06Z

I've been following the docs and blog post but am still seeing a similar situation to this.

Everything is working as expected until the successful callback fires and tries to do the postMessage to the opener window.

At that point I see the following error in the opener's console:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('http://localhost:4000').

localhost:3000 is the server of my serverless backend
localhost:4000 is my jekyll site

The issue appears to be in the postMessage call:

      window.opener.postMessage(
        'authorization:github:${mess}:${JSON.stringify(content)}',
        e.origin
      )

It is passing in e.origin as the expected origin of the target window which is only true if you do some DNS wizardry to have both blog and auth function operating at the same origin.

I have confirmed that the auth flow completes successfully if I change this e.origin to '*' in the postMessage params.

Could there be another setting (e.g. TARGET_ORIGIN) that could be set in the Secrets declaration and used here (falling back to e.origin if TARGET_ORIGIN is not set)?

I'll have a go and if successful will push a PR.

kpopper · 2019-06-07T11:36:24Z

I'll push my fix to my fork but here's the summary of my (pretty hacky) change to allow me to specify the target origin:

In Secrets declaration:

  TARGET_ORIGIN: 'http://localhost:4000',

Update to getScript() function:

function getScript(mess, content, targetOrigin = '') {
  return `<html><body><script>
  (function() {
    function receiveMessage(e) {
      console.log("receiveMessage %o", e)
      window.opener.postMessage(
        'authorization:github:${mess}:${JSON.stringify(content)}',
        (window.targetOrigin) ? window.targetOrigin : e.origin
      )
      window.removeEventListener("message",receiveMessage,false);
    }
    window.targetOrigin = '` + targetOrigin + `'
    window.addEventListener("message", receiveMessage, false)
    console.log("Sending message: %o", "github")
    window.opener.postMessage("authorizing:github", "*")
    })()
  </script></body></html>`;
}

Change to callback response handler:

          body: getScript('success', {
            token: token.token.access_token,
            provider: 'github',
          }, secrets.TARGET_ORIGIN),

maxgardner mentioned this issue Mar 7, 2019

Clarify that base_url should contain only hostname decaporg/decap-cms#2143

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Authentication window does not close on callback #3

Authentication window does not close on callback #3

ArcaneTSGK commented Aug 7, 2018

ArcaneTSGK commented Aug 7, 2018 •

edited

Loading

ArcaneTSGK commented Aug 8, 2018

chrismade commented Aug 10, 2018

chrismade commented Aug 11, 2018

marksteele commented Feb 13, 2019

jagyas commented Feb 17, 2019

kpopper commented Jun 7, 2019

kpopper commented Jun 7, 2019 •

edited

Loading

Authentication window does not close on callback #3

Authentication window does not close on callback #3

Comments

ArcaneTSGK commented Aug 7, 2018

ArcaneTSGK commented Aug 7, 2018 • edited Loading

ArcaneTSGK commented Aug 8, 2018

chrismade commented Aug 10, 2018

chrismade commented Aug 11, 2018

marksteele commented Feb 13, 2019

jagyas commented Feb 17, 2019

kpopper commented Jun 7, 2019

kpopper commented Jun 7, 2019 • edited Loading

ArcaneTSGK commented Aug 7, 2018 •

edited

Loading

kpopper commented Jun 7, 2019 •

edited

Loading