Amplify-js: "No userPool" error message with aws-amplify-angular

[svzi]

Hi there!

I'm currently trying to add authentication via aws-amplify (and aws-amplify-angular) to my Ionic 3 app.

When I run this piece of code:

Auth.signIn(username, password)
    .then(user => {
        console.log('user: ' + user);
    })
    .catch(errSignIn => {
        console.log('errSignIn: ' + JSON.stringify(errSignIn));
    });

I'm always getting this:

errSignIn: "No userPool"

This is my aws-export.js file:

const awsmobile = {
    'aws_auth_facebook': 'enable',
    'aws_cognito_identity_pool_id': 'eu-central-1:2d2ca574-15d2-432e-xxx-xxxx',
    'aws_cognito_region': 'eu-central-1',
    'aws_facebook_app_id': 'xxxxx',
    'aws_facebook_app_permissions': 'public_profile',
    'aws_project_id': 'xxxxxxx',
    'aws_project_name': 'mobile-app',
    'aws_project_region': 'eu-central-1',
    'aws_resource_name_prefix': 'mobileapp-mobilehub-xxxx',
    'aws_sign_in_enabled': 'enable',
    'aws_user_pools': 'enable',
    'aws_user_pools_id': 'eu-central-1_xxxxxx',
    'aws_user_pools_mfa_type': 'OFF',
    'aws_user_pools_web_client_id': 'xxxxxxxxxxxxxxxx',
}

export default awsmobile;

And I'm using this packages:

    "aws-amplify": "^1.0.4",
    "aws-amplify-angular": "^1.0.2",

I've got one verified user in that user pool and I can access this pool via my serverless backend (AWS Lambda) with a different app client id (that I've created manually for the lambda access).

After searching in the issues I noticed that most "No userPool" error where reported in combination with Reat and an old version of aws-amplify. So I have no idea how I can solve my login issue.

Any help would be really much appreciated!

[elorzafe]

@svzi Can you check your node_modules/aws-amplify-angular directory to see if there is another aws-amplify installed in there, I saw that error before when there are multiple instance of aws-amplify installed on a project.

[haverchuck]

Hello @svzi - Your Ionic 3 app is typescript, yeah?

[svzi]

@elorzafe Thank you, I will check that tomorrow!

@haverchuck Yeah, it's typescript. Why do you ask?

[haverchuck]

@svzi Could it be having an issue with the aws-exports.js (i.e. the .js extension)?

[svzi]

@haverchuck How can I find out? Any idea?

[developerjohan01]

I had the same issue - always seeing the message "No userPool"

My app is just the Tutorial https://aws-amplify.github.io/amplify-js/media/tutorials/building-ionic-4-apps/ but there is a piece of _bad advice_ in there about renaming the file aws-exports.js

Since we are using TypeScript, change the name of the aws-exports file to aws-exports.ts.

If I don't rename the file then all works - if I rename the file, it does NOT work.

The problem is that the .ts file isn't maintained by the aws cli and tools - only the .js file is, so any configuration changes you made, like adding authentication isn't added to your .ts file.
When you now run the app the typescript compiler/transpiler will overwrite the .js file (with correct configuration) with the configuration from the .ts file...

Note that your IDE might hide the .js file if you got a .ts file with the same name.

Thanks @haverchuck for asking about the extension.

[svzi]

After playing around with all the suggestions, I found a silly mistake in my implementation. I did this:

import * as aws_exports from '../aws-exports';
Amplify.configure(aws_exports);

Instread of this:

import * as aws_exports from '../aws-exports';
Amplify.configure(aws_exports.default);

So to no ones surprise it didn't work. The comment from @haverchuck pointed me in the right direction. But I need to agree heavily to @developerjohan01. It's not a good idea to rename the .js to .ts, because of the reasons he described!

[haverchuck]

@developerjohan01 - Great catch on the CLI support issue for .ts extensions! I'll make sure the tutorial is updated.

The Amplify Angular guide recommends a script to change the exports file name upon build, to workaround this problem:

"scripts": { "start": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ng serve; ng serve", "build": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ng build --prod; ng build --prod" }

[haverchuck]

https://github.com/aws-amplify/amplify-js/pull/1385

[hoang-innomizetech]

I am still getting this issue with Angular AOT build

here is my config file aws-exports.ts

export default {
    Auth: {
        // // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
        // // identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',

        // // REQUIRED - Amazon Cognito Region
        region: 'xxxxx',

        // // OPTIONAL - Amazon Cognito Federated Identity Pool Region
        // // Required only if it's different from Amazon Cognito Region
        // // identityPoolRegion: 'XX-XXXX-X',

        // // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: 'xxxxx',

        // // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
        userPoolWebClientId: 'dddd'
    }
}

this is my code from app.module.ts
the below code will throw this error with development mode and AOT mode

import Amplify from '@aws-amplify/core';
import Auth from '@aws-amplify/auth';
import * as amplify from './aws-exports';

console.log('amplify config', amplify);

Amplify.configure(amplify);

this configuration works fine in development mode but not when building bundler files with AOT mode

import Amplify from '@aws-amplify/core';
import Auth from '@aws-amplify/auth';
import amplify from './aws-exports';

console.log('amplify config', amplify);

Amplify.configure(amplify);

[AnandLA]

why is this closed this is still an issue