The react native app shows an error when we've implemented the sign in & sign out

Tructivity commented 2 months ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Amplify CLI

Environment information

``` # Put output below this line System: OS: Windows 11 10.0.22631 CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz Memory: 10.40 GB / 15.81 GB Binaries: Node: 20.15.0 - C:\Program Files\nodejs\node.EXE npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (126.0.2592.87) Internet Explorer: 11.0.22621.3527 npmPackages: @aws-amplify/core: ^6.3.3 => 6.3.3 @aws-amplify/core/internals/adapter-core: undefined () @aws-amplify/core/internals/aws-client-utils: undefined () @aws-amplify/core/internals/aws-client-utils/composers: undefined () @aws-amplify/core/internals/aws-clients/cognitoIdentity: undefined () @aws-amplify/core/internals/aws-clients/pinpoint: undefined () @aws-amplify/core/internals/providers/pinpoint: undefined () @aws-amplify/core/internals/utils: undefined () @aws-amplify/core/server: undefined () @babel/core: ^7.12.9 => 7.24.6 @babel/runtime: ^7.12.5 => 7.24.6 @react-native-community/checkbox: ^0.5.17 => 0.5.17 @react-native-community/datetimepicker: ^8.0.1 => 8.0.1 @react-native-community/eslint-config: ^2.0.0 => 2.0.0 @react-native-community/masked-view: ^0.1.11 => 0.1.11 @react-native-community/slider: ^4.5.2 => 4.5.2 @react-native-picker/picker: ^2.7.7 => 2.7.7 @react-navigation/drawer: ^6.6.15 => 6.6.15 @react-navigation/native: ^6.1.17 => 6.1.17 @react-navigation/stack: ^6.3.29 => 6.3.29 HelloWorld: 0.0.1 aws-amplify: ^6.3.8 => 6.3.8 aws-amplify/adapter-core: undefined () aws-amplify/analytics: undefined () aws-amplify/analytics/kinesis: undefined () aws-amplify/analytics/kinesis-firehose: undefined () aws-amplify/analytics/personalize: undefined () aws-amplify/analytics/pinpoint: undefined () aws-amplify/api: undefined () aws-amplify/api/server: undefined () aws-amplify/auth: undefined () aws-amplify/auth/cognito: undefined () aws-amplify/auth/cognito/server: undefined () aws-amplify/auth/enable-oauth-listener: undefined () aws-amplify/auth/server: undefined () aws-amplify/data: undefined () aws-amplify/data/server: undefined () aws-amplify/datastore: undefined () aws-amplify/in-app-messaging: undefined () aws-amplify/in-app-messaging/pinpoint: undefined () aws-amplify/push-notifications: undefined () aws-amplify/push-notifications/pinpoint: undefined () aws-amplify/storage: undefined () aws-amplify/storage/s3: undefined () aws-amplify/storage/s3/server: undefined () aws-amplify/storage/server: undefined () aws-amplify/utils: undefined () babel-jest: ^26.6.3 => 26.6.3 date-fns: ^3.6.0 => 3.6.0 eslint: ^7.32.0 => 7.32.0 hermes-inspector-msggen: 1.0.0 jest: ^26.6.3 => 26.6.3 metro-react-native-babel-preset: ^0.72.1 => 0.72.4 (0.72.1) moment: ^2.30.1 => 2.30.1 react: 18.1.0 => 18.1.0 react-native: 0.70.0 => 0.70.0 react-native-big-calendar: ^4.12.0 => 4.12.0 react-native-calendars: ^1.1305.0 => 1.1305.0 react-native-collapsible: ^1.6.1 => 1.6.1 react-native-color-picker: ^0.6.0 => 0.6.0 react-native-date-picker: ^5.0.3 => 5.0.3 react-native-elements: ^3.4.3 => 3.4.3 react-native-gesture-handler: ^2.16.2 => 2.16.2 react-native-keyboard-aware-scroll-view: ^0.9.5 => 0.9.5 react-native-modal: ^13.0.1 => 13.0.1 react-native-modal-datetime-picker: ^17.1.0 => 17.1.0 react-native-modal-dropdown: ^1.0.2 => 1.0.2 react-native-modal-dropdown-demo: 0.6.2 react-native-modal-selector: ^2.1.2 => 2.1.2 react-native-picker-select: ^9.1.3 => 9.1.3 react-native-popup-menu: ^0.16.1 => 0.16.1 react-native-rate: ^1.2.12 => 1.2.12 react-native-reanimated: ~2.2.0 => 2.2.4 react-native-redash: ^18.1.3 => 18.1.3 react-native-safe-area-context: ^4.10.1 => 4.10.1 react-native-screens: ^3.31.1 => 3.31.1 react-native-splash-screen: ^3.3.0 => 3.3.0 react-native-store-review: ^0.4.3 => 0.4.3 react-test-renderer: 18.1.0 => 18.1.0 npmGlobalPackages: @aws-amplify/cli: 12.12.4 npm notice npm notice New minor version of npm available! 10.7.0 -> 10.8.1 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1 npm notice To update run: npm install -g npm@10.8.1 npm notice ```

Describe the bug

So we was linking the existing aws amplify back-end in the cloud which is the authentication part to the react native (Enable sign-up, sign-in, and sign-out, https://docs.amplify.aws/gen1/react-native/build-a-backend/auth/enable-sign-up/) and all the steps of the sign in and sign out has been done but the app then shows this error:

ERROR TypeError: Cannot read property 'configure' of undefined, js engine: hermes ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

Expected behavior

When this error is fixed, then the app will run fine the authentication will work fine!

Reproduction steps

Apply the steps of the sign in and sign out of this article : Enable sign-up, sign-in, and sign-out (https://docs.amplify.aws/gen1/react-native/build-a-backend/auth/enable-sign-up/) and it will give you this error message:

ERROR TypeError: Cannot read property 'configure' of undefined, js engine: hermes ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ``` ```


### aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "xxxxxxxxxxxx",
    "aws_cognito_identity_pool_id": "xxxxxxxxxxxxxxx",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "xxxxxxxxxxxxxx",
    "aws_user_pools_web_client_id": "xxxxxxxxxxxx",
    "oauth": {},
    "aws_cognito_username_attributes": [],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ]
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

Tructivity commented 2 months ago

Hey @HuiSF I've seen that you recently worked on someone's problem that involves AWS authentication with React Native and I would like you to help me please if you can.

I've been facing this problem for days and the project has a deadline to be completed.

cwomack commented 2 months ago

Hello, @Tructivity and sorry to hear you're running into this. Are you able to provide a full stack trace of the error so we can better determine the root cause (just a screenshot of this would be helpful). Also, can you share a code snippet or just an example shape of what your Amplify.configure() call looks like?

Also want to confirm that when you mention that you're trying to "link the existing backend resources" for Auth, have you seen this reference in the docs for setting up backend resources (then looking under the "Existing Resources" tab)?

Tructivity commented 2 months ago

@cwomack Here’s an example of how Amplify.configure() should look like in your React Native application:

import Amplify from 'aws-amplify';
import awsconfig from './src/aws-exports';

try {
Amplify.configure(awsconfig);
console.log("Amplify configured successfully.");
} catch (error) {
console.error("Amplify configuration error:", error);
}

HuiSF commented 2 months ago

Hi @Tructivity the code seems incorrect:

import Amplify from 'aws-amplify';
// should be
import { Amplify } from 'aws-amplify';

I noticed that you were not using Typescript in your react-native project, is there a specific reason for doing so?

Tructivity commented 2 months ago

Hey @HuiSF I'm so lucky I've found someone like you, the problem has been resolved. My developer told me that he just learned it on JavaScript instead of Typescript. Is there any disadvantage of that?

Also, he asked me if you can please provide the code of the sign in that hold only email and password for just checking that he did the code right. For safety only!

cwomack commented 2 months ago

@Tructivity, happy to hear that @HuiSF's comment helped unblock you! As for the questions above, you can refer to our docs on the signIn() API here for examples on how to just use a simple email/password flow as well as the TypeScript improvements section of our release announcement of Amplify v6.

Let us know if there are further questions or blockers from here.

Tructivity commented 2 months ago

Hey @cwomack so now I'm moving to the CRUD operation so the first thing I should do it this "Set up Amplify GraphQL API" then move to this "Create, update, and delete application data" right? Does this automatically implement datastore in the React Native app so I have offline use of the app? or I should implement another thing?

I saw this one called "Connect your app code to the API" but didn't understand what's the benefits of it. Can u please explain? Do I need it in this scenario?

Tructivity commented 2 months ago

Hey @HuiSF can u please answer the above questions? I've been waiting the whole day and the project's deadline is close!

Tructivity commented 2 months ago

Hey @chrisbonifacio can u please answer my question above? I'm waiting but no one is answering me! I've seen you worked on graphql issue few days ago so I tagged you here!

Tructivity commented 2 months ago

Hey @cwomack I'm waiting for ur answer, can u please help?

cwomack commented 1 month ago

@Tructivity, apologize for the delayed reply here. There's a few questions within the comments above, so but can you possibly give us an update of what your current blockers are to see if we can break them down and assist further. I know you mentioned the original problem was resolved once you used the proper Typescript import, but hopefully the documentation pages you listed above were able to assist you in implementing Data category and connecting the API.

Beyond letting us know what you're still blocked by, wanted to make sure you had a few more resources that can help address general questions as well:

Our AWS Amplify Discord server has a huge amount of questions, threads, and community members engaged in helping out
The AWS FEWM Blog site has guides and walkthroughs for integrating various AWS Services into Amplify apps
YouTube channels and blogs from our Developer Advocates on the Amplify team such as Program with Erik and Focusotter

Tructivity commented 1 month ago

Hey @cwomack my question was clear above, I wanted to implement offline first app so what are the resources I should follow?

Shubhagj commented 1 month ago

Hey @cwomack I wanted to Implement Cognito Google Authentication with AWS Amplify in Mobile Apps

Prerequisites: JavaScript Framework: React Native Backend Amplify CLI Java Version (JDK): 17.0.11 React Native Version: ^0.72.4 Gradle Version: 8.0.1 or 8.0.2

Describe the bug:

I have installed the AWS CLI and configured AWS Amplify, as well as set up Google configuration. After running amplify push, I received the hosted UI endpoint URL in the format https:///login?response_type=code&client_id=&redirect_uri=myapp://

Upon using this hosted UI endpoint, I was able to see the Google login page. rg1

After entering the email and password, the user is successfully login. user registered in the backend Cognito user pool. However, after returning to the app's login screen, I want the user to be redirected to the home screen.

To achieve this, I added an intent filter in the AndroidManifest.xml file. Please let me know how to handle the redirect correctly.

redirection still leads to the login page instead of the home page.

Expected Behavior: after user login successfully redirect to home screen

cwomack commented 1 month ago

I wanted to implement offline first app so what are the resources I should follow?

@Tructivity, there's a few ways to approach this. While DataStore is something that can be leveraged, we'd recommend doing something more along the lines of an "Offline AppSync" implementation that is described in better detail with issue #9481. Specfically, there's this comment in that issue.

You can also leverage the GraphQL category within Amplify to use the subscription connection states and build logic for your users around those.

Any type of offline scenario is going to require a bit of custom implementation and additional development work due to the complexities that comes with the offline experience. There's a feature request in our repo as well for improved offline support for session management in React Native apps captured in #10393 if you want to give that issue a comment/upvote for more traction.

Let me know if all this is sufficient to help you make some progress!

cwomack commented 1 month ago

@Shubhagj, followed up on issue #13744 that you opened.

Tructivity commented 1 month ago

@cwomack Let me explain my situation, I have a web app developed using Dynamodb and GraphQL (AppSync) so I want to connect it to my React Native app.

So first of all, I will use these two articles "Set up Amplify GraphQL API" and then move to "Create, update, and delete application data" to connect it to Dynamodb to get the data so I can do the CRUD operations on the mobile app but later also I want to add the offline sync.

So which approach can be done from the two you've mentioned above? Also, is that possible? Because people are seeing a problem with that in the references you've mentioned. It seems your first suggestion Set up Amplify DataStore is better!

See the video of my mobile app on my Google Drive for more info!

cwomack commented 1 month ago

@Tructivity if offline syncing capabilities are needed, then DataStore is currently the best way to do that and the corresponding docs you've linked are the best way to approach.

To be clear, you should not use both the GraphQL API and DataStore at the same time. But outside of the offline syncing capabilities... interacting with AppSync directly via the GraphQL API category is going to be the preferred way to implement the CRUD operations that you're looking for.

If you have any follow up questions while trying to build your app from here, feel free to join our Discord Server and we, or someone from the community, can help further.

Tructivity commented 1 month ago

@cwomack thanks for the reply, but I've found the solution for this. I will first implement datastore for offline use, then do Syncing data to cloud which will do the rest of linking the offline data to the cloud since the cloud backend is already built.

Tructivity commented 1 month ago

@cwomack please let me know if what I'm going to do after a few days is the right thing to do or not?

aws-amplify / amplify-js