search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.36k stars 2.1k forks source link

React Native Social Auth did not work on iOS release scheme only on iOS debug scheme #13335

Closed MarkMa2003 closed 2 weeks ago

MarkMa2003 commented 2 weeks ago

Before opening, please confirm:

JavaScript Framework

React Native

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

System: OS: macOS 14.4 CPU: (12) arm64 Apple M2 Max Memory: 62.31 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 21.5.0 - ~/.nvm/versions/node/v21.5.0/bin/node Yarn: 1.22.22 - ~/hypercharge/node_modules/.bin/yarn npm: 10.2.4 - ~/.nvm/versions/node/v21.5.0/bin/npm Watchman: 2023.06.26.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 124.0.6367.119 Safari: 17.4 npmPackages: @aws-amplify/core: ^6.0.27 => 6.0.27 (6.0.28) @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 () @aws-amplify/react-native: ^1.0.28 => 1.0.28 @aws-amplify/rtn-web-browser: ^1.0.28 => 1.0.28 @aws-amplify/ui-react-native: ^2.1.6 => 2.1.6 @babel/core: ^7.20.0 => 7.24.4 @babel/preset-env: ^7.20.0 => 7.24.4 @babel/runtime: ^7.20.0 => 7.24.4 @react-native-async-storage/async-storage: ^1.23.1 => 1.23.1 @react-native-community/image-editor: ^4.2.0 => 4.2.0 @react-native-community/netinfo: ^11.3.1 => 11.3.1 @react-native-ml-kit/text-recognition: ^1.5.1 => 1.5.1 @react-native/babel-preset: 0.73.21 => 0.73.21 @react-native/eslint-config: 0.73.2 => 0.73.2 @react-native/metro-config: 0.73.5 => 0.73.5 @react-native/typescript-config: 0.73.1 => 0.73.1 @react-navigation/bottom-tabs: ^6.5.20 => 6.5.20 @react-navigation/native: ^6.1.17 => 6.1.17 @react-navigation/native-stack: ^6.9.26 => 6.9.26 @types/react: ^18.2.6 => 18.2.75 @types/react-test-renderer: ^18.0.0 => 18.0.7 HelloWorld: 0.0.1 add: ^2.0.6 => 2.0.6 aws-amplify: 6.1.4 => 6.1.4 aws-amplify-react-native: ^7.0.8 => 7.0.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: ^29.6.3 => 29.7.0 base-64: ^1.0.0 => 1.0.0 (0.1.0) eslint: ^8.19.0 => 8.57.0 expo: ^50.0.0 => 50.0.15 expo-modules-core: ^1.11.13 => 1.11.13 jest: ^29.6.3 => 29.7.0 moment: ^2.30.1 => 2.30.1 openai: ^4.33.1 => 4.33.1 prettier: 2.8.8 => 2.8.8 react: 18.2.0 => 18.2.0 react-native: 0.73.6 => 0.73.6 react-native-fetch-api: ^3.0.0 => 3.0.0 react-native-fs: ^2.20.0 => 2.20.0 react-native-gesture-handler: ^2.16.0 => 2.16.0 react-native-get-random-values: ^1.11.0 => 1.11.0 react-native-haptic-feedback: ^2.2.0 => 2.2.0 react-native-iap: ^12.13.1 => 12.13.1 react-native-image-crop-picker: ^0.40.3 => 0.40.3 react-native-image-picker: ^7.1.2 => 7.1.2 react-native-keyboard-aware-scroll-view: ^0.9.5 => 0.9.5 react-native-linear-gradient: ^2.8.3 => 2.8.3 react-native-markdown-display: ^7.0.2 => 7.0.2 react-native-math-view: ^3.9.5 => 3.9.5 react-native-polyfill-globals: ^3.1.0 => 3.1.0 react-native-reanimated: ^3.8.1 => 3.8.1 react-native-safe-area-context: ^4.9.0 => 4.9.0 react-native-screens: ^3.30.1 => 3.30.1 react-native-svg: 14.1.0 => 14.1.0 react-native-swiper: ^1.6.0 => 1.6.0 react-native-syntax-highlighter: ^2.1.0 => 2.1.0 react-native-url-polyfill: ^2.0.0 => 2.0.0 react-native-vision-camera: ^3.9.2 => 3.9.2 react-test-renderer: 18.2.0 => 18.2.0 text-encoding: ^0.7.0 => 0.7.0 typescript: ^5.3.0 => 5.4.5 uuid: ^9.0.1 => 9.0.1 (8.3.2, 7.0.3) yarn: ^1.22.22 => 1.22.22 npmGlobalPackages: corepack: 0.23.0 eas-cli: 7.3.0 ios-deploy: 1.12.2 npm: 10.2.4 pdb-images: 2.4.0

Describe the bug

A error Invalid responseType: blob will be logged when trying to log in through social provider in release build from xcode, but debug mode that running on local will successfully receieve signInWithRedirect through the Hub.

Expected behavior

User should be able to sign in and redirect to another screen

Reproduction steps

edit the Xcode scheme to release

Code Snippet

// Put your code below this line.
import React, { useEffect, useState } from 'react';
import { Alert, Text, View, TouchableOpacity, Dimensions } from 'react-native';
import { AuthUser, fetchUserAttributes, getCurrentUser, signInWithRedirect } from 'aws-amplify/auth';
import { Hub } from '@aws-amplify/core';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import HomeScreen from './screens/HomeScreen';
import { Amplify } from 'aws-amplify';
import config from './aws-exports';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { generateClient } from 'aws-amplify/api';
import { getProducts, purchaseUpdatedListener, getPurchaseHistory, validateReceiptIos, finishTransaction} from 'react-native-iap';
import 'react-native-gesture-handler'
import 'react-native-url-polyfill/auto';
import 'react-native-polyfill-globals/auto';

Amplify.configure(config);
console.log('config:', config);

const App = () => {
  const [user, setUser] = useState<AuthUser | null>(null);

  useEffect(() => {
    Hub.listen('auth', ({ payload  }) => {
      console.log(payload)
      switch (payload.event) {
        case 'signInWithRedirect':
          console.log(payload)
          getUser()
          break;
        case 'signedIn':
          console.log(payload)
          getUser()
          break;
        case 'signedOut':
          setUser(null);
          break;
      }
    });
  }, []);
return (
    <SafeAreaProvider>
      <NavigationContainer>
        <GestureHandlerRootView style={{ flex: 1, backgroundColor: 'black' }}>
          {user ? (
            <HomeScreen />
          ) : (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
              <View style={{flex:1}}/>
              <View style={{paddingBottom:80}}>
              <TouchableOpacity
                style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 15,backgroundColor:'white',width:Dimensions.get('screen').width-60,height:40,borderRadius:10,justifyContent:'center'}}
                onPress={() => signInWithRedirect({ provider: 'Apple' })}
              >
                <MaterialCommunityIcons name="apple" size={22} color="black"/>
                <Text style={{ color: 'black', fontSize: 18, fontWeight:'500',marginLeft:20}}>Sign in with Apple</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 15,backgroundColor:'#272727',width:Dimensions.get('screen').width-60,height:40,borderRadius:10,justifyContent:'center' }}
                onPress={() => signInWithRedirect({ provider: 'Google' })}
              >
                <MaterialCommunityIcons name="google" size={18} color="white"  />
                <Text style={{ color: 'white', fontSize: 18, fontWeight:'500',marginLeft:20}}>Sign in with Google</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{ flexDirection: 'row', alignItems: 'center',backgroundColor:'#272727',width:Dimensions.get('screen').width-60,height:40,borderRadius:10,justifyContent:'center' }}
                onPress={() => signInWithRedirect()}
              >
                <MaterialCommunityIcons name="email" size={18} color="white" />
                <Text style={{ color: 'white', fontSize: 18, fontWeight:'500' ,marginLeft:20}}>Sign in with Email</Text>
              </TouchableOpacity>
              </View>
            </View>
          )}
        </GestureHandlerRootView>
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

export default App;

Log output

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

aws-exports.js

No response

Manual configuration

"oauth": {
        "domain": "xxx.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "myapp://",
        "redirectSignOut": "myapp://",
        "responseType": "code"
    }

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

MarkMa2003 commented 2 weeks ago

{ event: 'signInWithRedirect_failure', data: { error: [TypeError: Cannot read property 'blobId' of undefined] } }

MarkMa2003 commented 2 weeks ago

it have something to do with import 'react-native-polyfill-globals/auto';

cwomack commented 2 weeks ago

Hey, @MarkMa2003. I'm not able to reproduce the issue in a React Native app using the documented imports/dependencies for Amplify... but the error you're seeing very well could be related to the polyfills you imported. I'll try adding in your dependencies next to confirm, but does removing the polyfill resolve the issue for you?

MarkMa2003 commented 2 weeks ago

Hey, @MarkMa2003. I'm not able to reproduce the issue in a React Native app using the documented imports/dependencies for Amplify... but the error you're seeing very well could be related to the polyfills you imported. I'll try adding in your dependencies next to confirm, but does removing the polyfill resolve the issue for you?

Yes thanks you for your quick reply! after I polyfill on demand, the issue is fixed