amazon-archives / amazon-cognito-auth-js

The Amazon Cognito Auth SDK for JavaScript simplifies adding sign-up, sign-in with user profile functionality to web apps.
Apache License 2.0
424 stars 232 forks source link

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

Open mlisonek98 opened 4 years ago

mlisonek98 commented 4 years ago

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?