amazon-archives / amazon-cognito-identity-js

Amazon Cognito Identity SDK for JavaScript
Other
985 stars 454 forks source link

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

Open Oxid2178 opened 6 years ago

Oxid2178 commented 6 years ago

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?