AWS Cognito not working for IE 11, but works for every other browser

Question

So I am trying to use cognito to manage authentication in my react application, with the identity provider being SAML. This is working very smoothly in Chrome and Firefox, but not in IE 11. Here is I set up my Auth:

import { Component } from 'react';
import { connect } from 'react-redux';
import { CognitoAuth } from 'amazon-cognito-auth-js';
import { signIn, signOutSuccess } from '../store/auth';
import { setupAxios } from '../axios';

import {
  AWS_COGNITO_CLIENT_ID,
  AWS_COGNITO_USER_POOL_ID,
  AWS_COGNITO_REDIRECT_SIGN_IN,
  AWS_COGNITO_REDIRECT_SIGN_OUT,
  AWS_COGNITO_APP_WEB_DOMAIN
} from '../env';

const cognitoSetup = props => {
//as per documentation
  const authData = {
    ClientId: AWS_COGNITO_CLIENT_ID,
    TokenScopesArray: ['email', 'openid', 'profile'],
    RedirectUriSignIn: AWS_COGNITO_REDIRECT_SIGN_IN,
    RedirectUriSignOut: AWS_COGNITO_REDIRECT_SIGN_OUT,
    AppWebDomain: AWS_COGNITO_APP_WEB_DOMAIN,
    IdentityProvider: 'SAML',
    UserPoolId: AWS_COGNITO_USER_POOL_ID
  };

  const auth = new CognitoAuth(authData);
  auth.useCodeGrantFlow(); //getting the refresh token

  auth.userhandler = {
    onSuccess: result => {
      const { profile, name, family_name, email } = result.idToken.payload;
      //passes role to store for use in the rest of the app
      const username = result.idToken.payload.identities[0].userId;
      const fullName = `${name} ${family_name}`;
      props.signIn({ username, profile, fullName, email });
    },
    onFailure: function(err) {
      console.error(err);
      throw err;
    }
  };
  return auth;
};


export class AuthService extends Component {
  constructor(props) {
    super(props);
    this.authService = cognitoSetup(this.props);
//passes the auth to axios to check for token on request
    setupAxios(this.authService);
  }

  componentDidMount() {
    const curUrl = window.location.href;
    if (curUrl.includes('?code=')) {
      this.authService.parseCognitoWebResponse(curUrl);
    } else if (!curUrl.includes('?error')) {
      this.authService.getSession();
    }
  }

  signOut = async () => {
    await this.authService.signOut();
  };

  async componentDidUpdate(prevProps) {

    if (prevProps.shouldSignOut !== this.props.shouldSignOut) {
      if (this.props.shouldSignOut) {
        await this.signOut();
        this.props.signOutSuccess();
      }
    }
  }
//render nothing 
  render() {
    return null;
  }
}

const mapState = state => ({
  username: state.auth.username,
  signedIn: state.auth.signedIn,
  shouldSignOut: state.auth.shouldSignOut
});

const mapDispatch = dispatch => ({
  signIn: (username, profile) => dispatch(signIn(username, profile)),
  signOutSuccess: () => dispatch(signOutSuccess())
});

export default connect(mapState, mapDispatch)(AuthService);

This AuthService.js is rendered upon loading the application. However When loading in IE11, there is an error var jsonDataObject = JSON.parse(jsonData); invalid character.

I have no idea why this is happening. I have investigated and came to the conclusion that this is going on within the package amazon-cognito-auth-js. I'm under the impression this package was made by amazon so I believe the package is not at fault, but I cannot see anyone else with this issue. Does anyone have any suggestions?

EDIT: I do have a polyfill

Yu Zhou · Answer 1 · 2019-12-06T02:17:02.927

2

I saw you used arrow functions => in your code which is not supported by IE. You could use babel to compile it and any other ES6 syntax to ES5. For example, compile:

const cognitoSetup = props => {
  ...
}

to:

var cognitoSetup = function cognitoSetup(props) {
  ...
}

Besides, have you imported react-app-polyfill at the first line in your src/index.js? This is required for react app to run in IE 11. You could refer to the answer in this thread for detailed steps.

edited Dec 06 '19 at 02:17

answered Dec 06 '19 at 02:09

Yu Zhou

11,532
1
8
22

I appreciate the suggestion, however I do have a polyfill and am using arrow functions throughout my application. This is not the issue, the issue being thrown is a Json.parse() error that claims there is an invalid character. – mlisonek Dec 13 '19 at 20:08
The error points to which line? How do you use the `JSON.parse()` function? I can't find the code snippet about this function in your question. Could you please provide [the minimal related code which can reproduce](https://stackoverflow.com/help/minimal-reproducible-example) the issue? – Yu Zhou Dec 16 '19 at 08:25
I am not using JSON.parse() anywhere in my code base, I believe it is being used in ```this.authService.parseCognitoWebResponse(curUrl);``` inside the componentDidMount. – mlisonek Dec 16 '19 at 13:55
I checked the [source code](https://github.com/aws/amazon-cognito-auth-js/blob/master/src/CognitoAuth.js), it seems that `JSON.parse()` is not in function `parseCognitoWebResponse()`. Is it possible the error occurs in other parts of the code? Besides, what is the jsonData passing into? The error usually occurs when a json data is in an invalid format. – Yu Zhou Dec 17 '19 at 09:28
Exactly, I have also looked into the source code and it seems that it is called in onSuccessExchangeForToken() and in onSuccessRefreshToken(). I'm not entirely sure what is causing this problem, but IE says that jsonData is undefined. But this works in literally every other browser so I'm at a loss for words, any ideas? – mlisonek Dec 17 '19 at 14:42
Some characters might be invalid in JSON on IE while valid on other browsers. You could use F12 dev tools to add breakpoint on the line with error and step into to track where the error origins. It could be better if you provide a minimal example to reproduce the issue. It's hard to locate the issue with only guess. – Yu Zhou Dec 18 '19 at 08:10

AWS Cognito not working for IE 11, but works for every other browser

1 Answers1