Skip to content
This repository has been archived by the owner on Feb 24, 2018. It is now read-only.

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

Open
Oxid2178 opened this issue Dec 29, 2017 · 0 comments

Comments

@Oxid2178
Copy link

Oxid2178 commented Dec 29, 2017

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
https://github.com/aurelia/skeleton-navigation/tree/master/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.
https://github.com/aws/amazon-cognito-identity-js#using-npm-and-webpack.

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?

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