How to implement Login with amazon in ReactJS?

Viewed 743

Why amazon Blocked a frame with origin "https://na.account.amazon.com" from accessing a cross-origin frame?

I am trying to implement LWA with ReactJS. But after authorizing the app it halts and gives this error-

Uncaught DOMException: Blocked a frame with origin "https://na.account.amazon.com" from accessing a cross-origin frame.
    at x (https://na.account.amazon.com/ap/oa?arb=a68c7499-a8a6-4672-bc34-8b87764fb2d6:238:51)
    at https://na.account.amazon.com/ap/oa?arb=a68c7499-a8a6-4672-bc34-8b87764fb2d6:266:7
    at https://na.account.amazon.com/ap/oa?arb=a68c7499-a8a6-4672-bc34-8b87764fb2d6:267:7

Here is how I am implementing LWA-

index.html:

<div id="amazon-root"></div>
      <script type="text/javascript">
        window.onAmazonLoginReady = function () {
          amazon.Login.setClientId('****');
        };
        (function (d) {
          var a = d.createElement('script');
          a.type = 'text/javascript';
          a.async = true;
          a.id = 'amazon-login-sdk';
          a.src = 'https://assets.loginwithamazon.com/sdk/na/login1.js';
          d.getElementById('amazon-root').appendChild(a);
        })(document);
      </script>

The button:

<a href="" id="LoginWithAmazon" onClick={(handleAmazonLogin)}>
       <img style={{ borderRadius: "10px" }} width="55px" alt="Login with Amazon" src={AmazonLogo} />
</a>

And the implementation:

declare const window: any;
...
const handleAmazonLogin = () => {
        let options: any = {};
        options.scope = 'profile';
        options.pkce = true;
        window.amazon.Login.authorize(options, function (response: any) {
            if (response.error) {
                console.log('oauth error ' + response.error);
                return;
            }
            window.amazon.Login.retrieveToken(response.code, function (response: any) {
                if (response.error) {
                    console.log('oauth error ' + response.error);
                    return;
                }
                window.amazon.Login.retrieveProfile(response.access_token, 
                function (response: any) {
                    console.log('Hello, ' + response.profile.Name);
                    console.log('Your e-mail address is ' + response.profile.PrimaryEmail);
                    console.log('Your unique ID is ' + response.profile.CustomerId);
                    if (window.console && window.console.log)
                        window.console.log(response);
                });
            });
        });
    }
1 Answers

Is this the implementation to retrieve the authorization code grant?

Occasionally when testing the workflow, the error logged above can occur when the application is in draft status and you need add the query parameter version=beta to the end of the OAuth2 link.

Related