javascriptangulartypescriptaws-amplifyangular-package-format

Calling Auth.signUp from an Angular Package Format Library produces type error?


Most of the aws-amplify auth functions can be call from Angular libraries. For example Auth.signout() works fine.

However I tried to put the following implementation in a library service:

  /**
   * @param firstName The first name
   * @param lastName The last name
   * @param email The email
   * @param password The password
   * @returns The signup result
   */
   export function signUp(
    firstName: string,
    lastName: string,
    email: string,
    password: string) {
    return Auth.signUp({
      username: email,
      password,
      attributes: {
        email,
        name: firstName,
        given_name: firstName,
        family_name: lastName
      }
    });
  }

However when any of the functions in the library are imported like this for example:

import { Component } from '@angular/core';
import { getCurrentAuthenticatedUserAttributes} from 'amplifylibe'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 't1';
}

It produces the following error:


Build at: 2022-02-04T20:58:53.577Z - Hash: bd84be34957baf56 - Time: 112ms

Error: node_modules/amplifylibe/lib/auth.functions.d.ts:1:23 - error TS2688: Cannot find type definition file for 'amazon-cognito-identity-js'.

1 /// <reference types="amazon-cognito-identity-js" />
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/amplifylibe/lib/auth.functions.d.ts:14:118 - error TS2307: Cannot find module 'amazon-cognito-identity-js' or its corresponding type declarations.

14 export declare function signUp(firstName: string, lastName: string, email: string, password: string): Promise<import("amazon-cognito-identity-js").ISignUpResult>;
                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To show this I published a minimal library with the functions to NPM:

https://www.npmjs.com/package/amplifylibe

The corresponding github repository is: https://github.com/fireflysemantics/tsamplifyapidemotest

That contains the signup function. I also created an Angular 13 app that produces the error when ng serve is run:

git clone git@github.com:fireflysemantics/tsamplifylibdemoapp.git
cd tsamplifylibdemoapp
npm i 
ng serve

Any ideas on how to go about fixing this?


Solution

  • So it looks like the fix is pretty simple. Just declare a Promise<any> return type like this:

      /**
       * @returns The result promise
       */
      async getCurrentAuthenticatedUserAttributes(): Promise<any> {
        const { attributes } = await Auth.currentAuthenticatedUser();
        return attributes
      }
    
    

    Without the return type declared, it looks like Typescript tries to infer the correct return type from amplify and this is unavailable to the library when the application compiles.