How import the right way aws-cognito module in aurelia with webpack and typescript

1

I have installed the aws-cognito moduls with

npm install --save amazon-cognito-identity-js

I use Aurelia with Typescript from the skeleton-typescript-webpack

I have implemented a aws-cognito-services.ts for a user authentication as explained here:
Use case 4. Authenticating a user and establishing a user session with the Amazon Cognito Identity service.
GitHub - amazon-archives/amazon-cognito-identity-js: Amazon Cognito Identity SDK for JavaScript.

Then I create an instance for aws-cognito-services in the login.ts view-model. When I load the login page I became this error:

Error: No view model found in module “login”.

When I don’t create a aws-cognito-services instance in the login view-model, then the login page will load fine.

here the aws-cognito-services code:

import 'aws-sdk/dist/aws-sdk';
//import "amazon-cognito-identity-js/dist/amazon-cognito-identity";
//import 'amazon-cognito-identity-js/dist/amazon-cognito-identity'
//import { AuthenticationDetails, CognitoIdentityServiceProvider, CognitoUser, CognitoUserAttribute, CognitoUserPool } from "amazon-cognito-identity-js";
import { View } from "aurelia-framework";
//import * as AWSCognito from "../../node_modules/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js";
//import * as AWSCognito from "amazon-cognito-identity-js/dist/amazon-cognito-identity";
import * as AWSCognito from "amazon-cognito-identity-js";
//import * as AWS from "aws-sdk/dist/aws-sdk";

//const AWSCognito = ( window as any ).AWSCognito;
const AWS = ( window as any ).AWS;


export class AWSCognitoServices {
    
    private identityPoolId: string  = "xxx";
    private userPollId: string      = "xxx";
    private clientId: string        = "xxx";
    private region: string          = 'xxx';
    private defaultUserName: string = "xxx";
    private defaultPassword: string = "xxx";

    // Use case 4. Authenticating a user and establishing a user session with the Amazon Cognito Identity service.
    // https://github.com/aws/amazon-cognito-identity-js#using-npm-and-webpack
    
    private authData: AWSCognito.IAuthenticationDetailsData;
    private authDetails = new AWSCognito.AuthenticationDetails( this.authData );

    private poolData: AWSCognito.ICognitoUserPoolData;
    private userPool = new AWSCognito.CognitoUserPool( this.poolData );

    private userData: AWSCognito.ICognitoUserData;
    private cognitoUser = new AWSCognito.CognitoUser( this.userData );


    constructor() {
        console.log("AWSCognitoServices constructor called...");
        
        // authData
        this.authData.Username = this.defaultUserName;
        this.authData.Password = this.defaultPassword;
        
        // poolData
        this.poolData.UserPoolId = this.identityPoolId;
        this.poolData.ClientId = this.clientId;
        
        // userData
        this.userData.Username = this.authData.Username;
        this.userData.Pool     = this.userPool;
    }

    public authenticateUser() {
        console.log("authenticateUser() called...");
        console.log("with credentials: " + this.authData.Username + this.authData.Password);
        
        this.cognitoUser.authenticateUser( this.authDetails, {
            onSuccess: function( result ) {
                console.log( 'access token + ' + result.getAccessToken().getJwtToken() );

                //POTENTIAL: Region needs to be set if not already set previously elsewhere.
                AWS.config.region = this.region;

                AWS.config.credentials = new AWS.CognitoIdentityCredentials( {
                    IdentityPoolId: this.identityPoolId, // your identity pool id here
                    Logins: {
                        // Change the key below according to the specific region your user pool is in.
                        'cognito-idp.eu-west-1.amazonaws.com/eu-west-1xxx': result.getIdToken().getJwtToken()
                    }
                } );

                //refreshes credentials using AWS.CognitoIdentity.getCredentialsForIdentity()
                AWS.config.credentials.refresh(( error ) => {
                    if ( error ) {
                        console.error( error );
                    } else {
                        // Instantiate aws sdk service objects now that the credentials have been updated.
                        // example: var s3 = new AWS.S3();
                        console.log( 'Successfully logged!' );
                    }
                } );
            },

            onFailure: function( err ) {
                alert( err );
            },

        } );
    }
}

here the login code (not complete):

import { AWSCognitoServices } from "./services/aws-cognito-services"
import { autoinject } from "aurelia-framework";
import { View } from "aurelia-framework";

@autoinject( AWSCognitoServices )
export class Login {

    constructor(private awsCognitoSerives: AWSCognitoServices) {
        console.log("Login constructor called...");
    }

}

Knows anywhere this error?

2

I’m trying to do the same amazon-cognito-identity-js use case 4, except that I’m using user pool authentication flow and not federated identity flow. I’m not familiar with typescript, and how you should import interfaces. In my ES6 project I do not import AWSCognito nor aws-sdk. All classes is imported from amazon-cognito-identity-js and I create objects using the class/function directly let authDetails = new AuthenticationDetails(this.authData). AWS seams to be awailable in onSuccess.

import { 
 AuthenticationDetails, IAuthenticationDetailsData, CognitoIdentityServiceProvider,
 CognitoUser, CognitoUserAttribute, CognitoUserPool, ICognitoUserPoolData 
} from "amazon-cognito-identity-js";

export class AWSCognitoServices {
private identityPoolId: string  = "xxx";
private userPollId: string      = "xxx";
private clientId: string        = "xxx";
private region: string          = 'xxx';
private defaultUserName: string = "xxx";
private defaultPassword: string = "xxx";

// Use case 4. Authenticating a user and establishing a user session with the Amazon Cognito Identity service.
// https://github.com/aws/amazon-cognito-identity-js#using-npm-and-webpack

private authData: IAuthenticationDetailsData;
private authDetails = new AuthenticationDetails( this.authData );

private poolData: ICognitoUserPoolData;
private userPool = new CognitoUserPool( this.poolData );

private userData: ICognitoUserData;
private cognitoUser = new CognitoUser( this.userData );


constructor() {
    console.log("AWSCognitoServices constructor called...");
    
    // authData
    this.authData.Username = this.defaultUserName;
    this.authData.Password = this.defaultPassword;
    
    // poolData
    this.poolData.UserPoolId = this.identityPoolId;
    this.poolData.ClientId = this.clientId;
    
    // userData
    this.userData.Username = this.authData.Username;
    this.userData.Pool     = this.userPool;
}

public authenticateUser() {
    console.log("authenticateUser() called...");
    console.log("with credentials: " + this.authData.Username + this.authData.Password);
    
    this.cognitoUser.authenticateUser( this.authDetails, {
        onSuccess: function( result ) {
            console.log( 'access token + ' + result.getAccessToken().getJwtToken() );

            //POTENTIAL: Region needs to be set if not already set previously elsewhere.
            AWS.config.region = this.region;

            AWS.config.credentials = new AWS.CognitoIdentityCredentials( {
                IdentityPoolId: this.identityPoolId, // your identity pool id here
                Logins: {
                    // Change the key below according to the specific region your user pool is in.
                    'cognito-idp.eu-west-1.amazonaws.com/eu-west-1xxx': result.getIdToken().getJwtToken()
                }
            } );

            //refreshes credentials using AWS.CognitoIdentity.getCredentialsForIdentity()
            AWS.config.credentials.refresh(( error ) => {
                if ( error ) {
                    console.error( error );
                } else {
                    // Instantiate aws sdk service objects now that the credentials have been updated.
                    // example: var s3 = new AWS.S3();
                    console.log( 'Successfully logged!' );
                }
            } );
        },

        onFailure: function( err ) {
            alert( err );
        },

    } );
}
}