amplify-js icon indicating copy to clipboard operation
amplify-js copied to clipboard

Authentication Analytics error [Unhandled promise rejection: Error: No credentials, applicationId or region]

Open R4Y-R4Y opened this issue 2 years ago • 2 comments

Before opening, please confirm:

JavaScript Framework

React Native

Amplify APIs

Authentication, Analytics

Amplify Categories

auth, analytics

Environment information

System:
    OS: Windows 10 10.0.10240
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 927.52 MB / 3.91 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (20.10240.16384.0)
    Internet Explorer: 11.0.10240.16384
  npmPackages:
    @babel/core: ^7.12.9 => 7.19.0
    @expo/vector-icons: ^13.0.0 => 13.0.0
    @freakycoder/react-native-bounceable: ^1.0.3 => 1.0.3 (1.0.1)
    @react-native-async-storage/async-storage: ^1.17.10 => 1.17.10
    @react-native-community/netinfo: ^9.3.0 => 9.3.0
    @react-native-picker/picker: ^2.4.4 => 2.4.4
    @react-navigation/bottom-tabs: ^6.3.3 => 6.3.3
    @react-navigation/drawer: ^6.4.4 => 6.4.4
    @react-navigation/native-stack: ^6.8.0 => 6.8.0
    HelloWorld:  0.0.1
    amazon-cognito-identity-js: ^5.2.10 => 5.2.10
    aws-amplify: ^4.3.34 => 4.3.34
    aws-amplify-react-native: ^6.0.5 => 6.0.5
    expo: ~46.0.9 => 46.0.10
    expo-status-bar: ~1.4.0 => 1.4.0
    formik: ^2.2.9 => 2.2.9
    hermes-inspector-msggen:  1.0.0
    react: 18.0.0 => 18.0.0
    react-native: 0.69.5 => 0.69.5
    react-native-animated-spinkit: ^1.5.2 => 1.5.2
    react-native-dynamic-search-bar: github:WrathChaos/react-native-dynamic-search-bar#expo => 2.0.2
    react-native-dynamic-vector-icons: github:WrathChaos/react-native-dynamic-vector-icons#expo => 0.1.1
    react-native-expo-image-cache: ^4.1.0 => 4.1.0
    react-native-gesture-handler: ~2.5.0 => 2.5.0
    react-native-profile-picture: ^1.0.0 => 1.0.0
    react-native-ui-lib: ^6.21.0 => 6.21.0
    uilib-native:  3.0.9
  npmGlobalPackages:
    @aws-amplify/cli: 10.0.0
    eas-cli: 2.1.0
    expo-cli: 6.0.5
    npm: 8.19.1
    react-native-cli: 2.0.1
    sharp-cli: 2.1.1
    yarn: 1.22.19


Describe the bug

when I start the app and sign in as a user, i get this warning error [Unhandled promise rejection: Error: No credentials, applicationId or region]. The error always happens after a second when the sign up and the app displays. As i have seen in an issue before, it seems to be related to analytics. here's the issue that I am talking about. Somehow the issue has not been dealt with till now.

Expected behavior

There should be no warnings while using the app

Reproduction steps

  1. I start the app with expo start then the qr code appears.

  2. I scanned the qr code with my phone and waited for it to bundle the app.

After that the default sign in page shows up.

  1. I sign in with an account to test the app and it logs in properly.

  2. The app shows up and after 1 second it displays the error

[Unhandled promise rejection: Error: No credentials, applicationId or region]
  • the error displays once after the sign in.

Code Snippet

// Put your code below this line.

Log output

This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo start

Starting project at C:\*******************************
Some dependencies are incompatible with the installed expo package version:
 - @react-native-picker/picker - expected version: 2.4.2 - actual version installed: 2.4.4
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo doctor --fix-dependencies,
or install individual packages by running expo install [package-name ...]
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄

_supposedly the qr code of the app_

› Metro waiting on exp://***.***.***.***:19000 _I hid the IP address :p_
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
Started Metro Bundler
iOS Bundling complete 172ms
iOS Running app on R4Y Phone

[Unhandled promise rejection: Error: No credentials, applicationId or region]
at node_modules\@aws-amplify\analytics\lib-esm\Providers\AWSPinpointProvider.js:null in __generator$argument_1
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in step
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in <anonymous>
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in fulfilled
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue

[Unhandled promise rejection: Error: No credentials, applicationId or region]
at node_modules\@aws-amplify\analytics\lib-esm\Providers\AWSPinpointProvider.js:null in __generator$argument_1
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in step
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in <anonymous>
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in fulfilled
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue

***signed out***

[Unhandled promise rejection: Error: No credentials, applicationId or region]
at node_modules\@aws-amplify\analytics\lib-esm\Providers\AWSPinpointProvider.js:null in __generator$argument_1
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in step
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in <anonymous>
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in fulfilled
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue

[Unhandled promise rejection: Error: No credentials, applicationId or region]
at node_modules\@aws-amplify\analytics\lib-esm\Providers\AWSPinpointProvider.js:null in __generator$argument_1
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in step
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in <anonymous>
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in fulfilled
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue

[Unhandled promise rejection: Error: No credentials, applicationId or region]
at node_modules\@aws-amplify\analytics\lib-esm\Providers\AWSPinpointProvider.js:null in __generator$argument_1
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in step
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in <anonymous>
at node_modules\@aws-sdk\client-pinpoint\node_modules\@aws-crypto\sha256-js\node_modules\tslib\tslib.js:null in fulfilled
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue
› Stopped server


aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

iPhone 12 Pro Max / Samsung Galaxy A11

Mobile Operating System

iOS 15.6.1 / Android 11

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

R4Y-R4Y avatar Sep 12 '22 18:09 R4Y-R4Y

Hi @R4Y-repo I was able to reproduce this issue. The warning does appear on both React Native CLI and Expo apps when signing up/signing in using the withAuthenticator component.

However, it does not appear to log a warning when using the Auth library directly via Auth.signIn.

withAuthenticator Screenshot 2022-09-16 at 11 37 48 AM

Auth.signIn Screenshot 2022-09-16 at 12 57 24 PM

chrisbonifacio avatar Sep 16 '22 16:09 chrisbonifacio

So basically i should avoid using withAuthenticator() function and instead use Auth.signIn() like this for now until it is fixed: export default Auth.signIn(App);

R4Y-R4Y avatar Sep 20 '22 16:09 R4Y-R4Y

Here's an example of using a React Context to manually configure authentication logic, this can be implemented with React Navigation or anything else you'd like to use.

./src/context/UserContext.js

import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { Auth } from '@aws-amplify/auth';

export const UserContext = createContext(null);

export const UserProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    
    useEffect(() => {
  Auth.currentAuthenticatedUser()
            .then(user =>
    },[]);

    const login = (usernameOrEmail, password) =>
        Auth.signIn(usernameOrEmail, password)
        .then(cognitoUser => {
            setUser(cognitoUser);
            return cognitoUser;
        })
        .catch((err) => {
            if (err.code === 'UserNotFoundException') {
                err.message = 'Invalid username or password';
            }
            throw err;
        }
    );

    const logout = () =>
        Auth.signOut()
        .then(data => {
            setUser(null);
            return data;
        }
    );

    const deleteUser = async () => {       
        try {
            const result = await Auth.deleteUser();
            console.log(result);
        } catch (err) {
            console.log("Error deleting user", err);
        } finally {
            setUser(null);
        }
    }
    
    const values = useMemo(() => ({
        user,
        login,
        logout,
        deleteUser
    }), [user, userData]);

    return (
        <UserContext.Provider value={values}>{children}</UserContext.Provider>
    )
}

export const useUser = () => {
    const context = useContext(UserContext);

    if (context === undefined) {
        throw new Error('`useUser` must be within a `UserProvider` component');
    }

    return context;
};

To use this you must first wrap your app in the UserProvider component:

./App.js

import App from './src/App';

import Amplify from 'aws-amplify';
import config from './src/aws-exports';
import { UserProvider } from './src/context/UserContext';

Amplify.configure(config)

function Main() {
  return (
    <UserProvider>
      <App />
    </UserProvider>
  );
}

export default Main;

Then you can import the login, logout functions or the user object (which you're getting from Auth.currentAuthenticatedUser()) into any file in your app by simply using const {user} = useUser(); for example:

import * as React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import DrawerSignOut from '../components/DrawerSignOut';
import { useUser } from '../context/UserContext';

const Drawer = createDrawerNavigator();

export default function AppWithDrawerNav() {

  const { user } = useUser();

  return (
    <Drawer.Navigator>
      {user ? (
     <>
       <Stack.Screen name="Home" component={HomeScreen} />
       <Stack.Screen name="Profile" component={ProfileScreen} />
       <Stack.Screen name="Settings" component={SettingsScreen} />
     </>
   ) : (
     <>
       <Stack.Screen name="SignIn" component={SignInScreen} />
       <Stack.Screen name="SignUp" component={SignUpScreen} />
     </>
   );
    </Drawer.Navigator>
  );
}

pjsandwich avatar Sep 22 '22 18:09 pjsandwich

Here's an example of using a React Context to manually configure authentication logic, this can be implemented with React Navigation or anything else you'd like to use.

./src/context/UserContext.js


import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';

import { Auth } from '@aws-amplify/auth';



export const UserContext = createContext(null);



export const UserProvider = ({ children }) => {

    const [user, setUser] = useState(null);

    

    useEffect(() => {

  Auth.currentAuthenticatedUser()

            .then(user =>

    },[]);



    const login = (usernameOrEmail, password) =>

        Auth.signIn(usernameOrEmail, password)

        .then(cognitoUser => {

            setUser(cognitoUser);

            return cognitoUser;

        })

        .catch((err) => {

            if (err.code === 'UserNotFoundException') {

                err.message = 'Invalid username or password';

            }

            throw err;

        }

    );



    const logout = () =>

        Auth.signOut()

        .then(data => {

            setUser(null);

            return data;

        }

    );



    const deleteUser = async () => {       

        try {

            const result = await Auth.deleteUser();

            console.log(result);

        } catch (err) {

            console.log("Error deleting user", err);

        } finally {

            setUser(null);

        }

    }

    

    const values = useMemo(() => ({

        user,

        login,

        logout,

        deleteUser

    }), [user, userData]);



    return (

        <UserContext.Provider value={values}>{children}</UserContext.Provider>

    )

}



export const useUser = () => {

    const context = useContext(UserContext);



    if (context === undefined) {

        throw new Error('`useUser` must be within a `UserProvider` component');

    }



    return context;

};

To use this you must first wrap your app in the UserProvider component:

./App.js


import App from './src/App';



import Amplify from 'aws-amplify';

import config from './src/aws-exports';

import { UserProvider } from './src/context/UserContext';



Amplify.configure(config)



function Main() {

  return (

    <UserProvider>

      <App />

    </UserProvider>

  );

}



export default Main;

Then you can import the login, logout functions or the user object (which you're getting from Auth.currentAuthenticatedUser()) into any file in your app by simply using const {user} = useUser(); for example:


import * as React from 'react';

import { createDrawerNavigator } from '@react-navigation/drawer';

import DrawerSignOut from '../components/DrawerSignOut';

import { useUser } from '../context/UserContext';



const Drawer = createDrawerNavigator();



export default function AppWithDrawerNav() {



  const { user } = useUser();



  return (

    <Drawer.Navigator>

      {user ? (

     <>

       <Stack.Screen name="Home" component={HomeScreen} />

       <Stack.Screen name="Profile" component={ProfileScreen} />

       <Stack.Screen name="Settings" component={SettingsScreen} />

     </>

   ) : (

     <>

       <Stack.Screen name="SignIn" component={SignInScreen} />

       <Stack.Screen name="SignUp" component={SignUpScreen} />

     </>

   );

    </Drawer.Navigator>

  );

}

Thank you all for your active support! Really helped me to start my journey with Amplify. 😄😁

R4Y-R4Y avatar Sep 23 '22 13:09 R4Y-R4Y

I am getting currentAuthenticated user but not able to get response from Auth.currentUserCredentials(). Is this method working?

v1puj avatar Oct 11 '22 09:10 v1puj

Hi @v1puj - can you please use Auth.currentSession() and see if that serves your use case for getting user credentials?

abdallahshaban557 avatar Oct 11 '22 15:10 abdallahshaban557

Thanks for the response.

Yes, I am getting the response from the Auth.currentSession(). Now I am getting the response from Auth.currentUserCrdentials().

v1puj avatar Oct 12 '22 05:10 v1puj

so do you have any issues - or can we close this issue you have created? https://github.com/aws-amplify/amplify-js/issues/10456

@tannerabread

abdallahshaban557 avatar Oct 12 '22 05:10 abdallahshaban557

yes, you can close this issue. now it is resolved.

v1puj avatar Oct 12 '22 12:10 v1puj

Thank you all for your involvement in this issue. I am closing this as resolved. Please comment here if you have a related issue so that we can reopen and better assist you. 😸

tannerabread avatar Oct 12 '22 13:10 tannerabread