Skip to content
This repository has been archived by the owner on Mar 12, 2020. It is now read-only.

is anyone maintaining this repo? I have major problems with IE 11 #216

Open
mlisonek98 opened this issue Dec 16, 2019 · 0 comments
Open

Comments

@mlisonek98
Copy link

mlisonek98 commented Dec 16, 2019

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, Firefox and Safari, 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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant