amazon-archives/amazon-cognito-js

CognitoSyncManager from npm package

patrik-piskay opened this issue · 10 comments

patrik-piskay commented

Hi,

we are following https://github.com/aws/amazon-cognito-identity-js guidance on how to use Cognito with Webpack and (more importantly) npm packages. The only issue we have, we can't seem to find CognitoSyncManager being exposed in any AWS packages.

How should we be using CognitoSyncManager with npm packages?

Thanks!

itrestian commented

Hi, these are separate projects. The one you mentioned relates to the user pools feature so you won't find the CognitoSyncManager there. This is the project that targets the Cognito Sync feature so this is the one you will want to use.

Here is the npm link for Sync:

https://www.npmjs.com/package/amazon-cognito-js

patrik-piskay commented

Hi @itrestian, I've already installed amazon-cognito-js npm package but when importing it, nothing is exposed.

import AmazonCognitoJs from 'amazon-cognito-js';
console.log(AmazonCognitoJs) --> empty object

import { CognitoSyncManager } from 'amazon-cognito-js';
console.log(CognitoSyncManager); --> undefined
johnborges commented

@patrik-piskay
I'm using this npm package with browserify and it works. Original problem I had was I didn't realize
CognitoSyncManager was being attached to AWS.CognitoSyncManager. No need to assign it yourself.

AWS = require('aws-sdk');
require('amazon-cognito-js');

// AWS.CognitoSyncManager now available
  • ❤️3
itrestian commented

@patrik-piskay did that solve it?

patrik-piskay commented

Thanks @johnborges! It's really not what I expected, that you need to import aws-sdk which by itself won't have CognitoSyncManager on it but by requiring amazon-cognito-js (and not using it at all), CognitoSyncManager becomes accessible on aws-sdk object.

@itrestian could this be improved a bit for a better usability?

  • 👍7
akashbiz commented

Hello @patrik-piskay @itrestian @johnborges , this solution worked well but by using require statement it imports entire aws-sdk with all services and we can not use tree-shaking functionality to remove unnecessary code from our angular application. As Tree shaking doesn't work when we use require in stead of import.
Is there any way by which we can use import statement to use cognito sync manager service?

Thanks.

  • 👍1
jakubbares commented

What if I use typescript and cannot use require statements?
Is it then correct to write:
import * as AWS from "aws-sdk";
import "amazon-cognito-js";
?
This doesnt seem to work

tobinbc commented

I use this workaround:

import * as AWS from 'aws-sdk'
import 'amazon-cognito-js';
...
private AWSSync:any
private syncManager:any
...
//do all other AWS.stuff()
...
this.AWSSync = AWS
this.syncManager = new this.AWSSync.CognitoSyncManager(); //Now we can do the Typescript import.

mahdiridho commented

What if I use typescript and cannot use require statements?
Is it then correct to write:
import * as AWS from "aws-sdk";
import "amazon-cognito-js";
?
This doesnt seem to work

I change the amazon-cognito.min.js on the line 13 :

factory(root["AWS"]); -> It is undefined

to be

factory(AWS); -> It is found

I can get the AWS variable correctly. My global scripts will be like this :

import 'aws-sdk/dist/aws-sdk.min';
import 'amazon-cognito-js';
export class AwsCognitoSync {
   constructor(datasetName, objectName) {
      console.log(AWS); // Found the AWS object
      ...
      ...
   }
   ...
   ...
}

However, I dont like this way to change the original script of amazon-cognito.min.js. Because I need to sources this file in many projects and won't commit/push the external file (like amazon-cognito.min.js) to our repository. So, how to fix this case without touch the original file?

I am using Google Polymer version 3

  • 👍1