Replace callbacks with Behavioral Subjects

[mwawrusch]

You create a lot of tight coupling and testability woes by using callbacks. A more angular way would be to use Observables, probably based on Behavioral Subjects.

You might also want to look into Guarding routes, making use of modules and adhere to the one component per file convention.

That said thanks for posting this.

[KoldBrewEd]

+1

I've used parts of this code (which is great, BTW) for CUP authentication to API Gateway in a web app where I'm using Observables to communicate to my API sending the ID Token retrieved from Cognito and was wondering the same thing: would it be possible to use Observables to make the calls to Cognito?

[vbudilov]

Hi @mwawrusch & @awsed ,

I completely agree -- there's a lot of tight coupling and that's not optimal. I'm looking at ways to remove this complexity.

Thanks,
Vladimir

[wmagda]

Any update on this?
We had to do a lot of changes to convert to observables and we never quite figured out a clean way to handle token refresh (or request resubmitting on error....)
I'm looking to start another project soon it it would be nice to have a clean starting point.

Thanks!

[vbudilov]

Hi @wmagda ,

I'm looking into this but there's no definite plan at this time.

Thanks,
Vladimir

[ZhiliangGong]

+1

Thank you for the great starting template!

I'm looking into the code, and my previous experience on Angular 2 has been mostly using Observables, which is clearer and more intuitive.

Thanks!

[vbudilov]

@robertbrower-technologies,

You might want to create a new question and add more details. This issue is for a different topic.

Vladimir

[taji]

Any interest in a pull request where the components and services are refactored to Observables? (I haven't done this yet. I'm just checking the waters to see if that is a goal for your project). Once it's using Observables, unit testing could be implemented as well.

[vbudilov]

Hi @taji ,

Yes, PRs are definitely welcome!

Thanks,
Vladimir

[taji]

Busy week so I'm a bit late replying. Okay, I've done a bit of refactoring of this project to observables. I'm still not sure I have the bandwidth, but if I (or someone else) decide(s) to contribute, I think this undertaking should have some coordination to ensure it comes off properly. The project should be broken down into smaller pull requests that are easy to submit and accept. As a basic plan, I see this:

1. Convert AWS SDK and Cognito SDK global references to proper typescript module imports using the typings here: (https://github.com/aws/aws-sdk-js/tree/support/typescript/typings). I think this would make a difference with mocking when unit tests are implemented with the observables.

2. Convert the javascript callback code to observables at the component and service levels. It would be a good idea to add karma/jasmine test configuration so that Angular CLI can run the tests. I recommend refactoring a single component and service class with unit tests and then submitting that for review before refactoring all of the components and services.

3. Another concern is how much change is coming to this project and how to ensure the refactoring doesn't fall out of sync with the new changes.

Like I said, it may not be me, but it's a significant change and whoever does it should have a good roadmap.

Your thoughts?

[vbudilov]

Hi @taji , thanks for sharing the roadmap proposal. If you want to do some refactoring to observables feel free to start small with one Service or Component. Once you're comfortable doing a PR, pull the trigger and I'll review it. That's probably the most efficient way of tackling this, if you want to. In regards to the rate of changes -- taking it a step at a time should alleviate some of your concerns.

[taji]

Sounds good :)

[dpantke]

I'm beginning to address this in a couple of PR's. Using an Observable to control a single session object is a bit of overkill IMO ( unless you really do want everything on the planet to be a stream ). My approach is going to be to use Promises for the session object, then Observables for the DynamoDB interactions.

[3uPh0riC]

Hi guys

Ive been trying to use an Observale to replace the callbacks in my app, but for the life of me im not winning. Please can somebody tell me whats wrong here?

login(username: string, password: string): Observable<any> {
    console.log('Login called for user: ' + username);

    const authenticationData = {
      Username: username,
      Password: password,
    };
    const authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);

    const userData = {
      Username: username,
      Pool: new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(AuthService.POOL_CREDENTIALS)
    };

    const cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);

    const awsObservable = Observable.bindCallback(cognitoUser.authenticateUser);

    return awsObservable.call(cognitoUser, authenticationDetails);
  }

I get an error message: r.newPasswordRequired is not a function.

Im running a admin login so the first callback function called when logging in the is newPasswordRequired