I'm using Cognito and social connect (Facebook, Google, and signInWithApple) for users logged into my app. It works fine, but the user is taken to a browser to login.
My app was rejected in IOS App store with the following message:
Guideline 4.0 - Design
We noticed that the user is taken to Safari to sign in with Google, which provides a poor user experience.
Next Steps
To resolve this issue, please revise your app to enable users to sign in or register for an >account in the app.
We recommend implementing the Safari View Controller API to display web content within your >app. The Safari View Controller allows the display of a URL and inspection of the certificate from an embedded browser in an app so that customers can verify the webpage URL and SSL
certificate to confirm they are entering their sign in credentials into a legitimate page.
Resources
For additional information on the Safari View Controller API, please review the What's New in Safari webpage.
We tried to fix this but our webview requires a URL. My method of connection with Cognito is define by this doc at Amplify: Auth method federate Sign in.
So my code looked like this before:
import Auth from '@aws-amplify/auth';
[...]
const SignInForm = ({ styles, navigation, }) => {
[...]
<TouchableOpacity
style={{
backgroundColor: '#4286F3',
borderWidth: 1,
borderColor: '#4286F3',
padding: 4,
height: 40,
margin: 8,
width: '84%',
borderRadius: 4,
flexDirection: 'row',
alignItems: 'center',
}}
onPress={() => Auth.federatedSignIn({provider: 'Google'})}>
<Icon
size={28}
color='white'
name={'logo-google'}
style={{ marginHorizontal: 8 }}
/>
<Typography color="black" align="center" size="label">
{'Se connecter via Google'}
</Typography>
</TouchableOpacity>
I want use a webview in my app or display the webview in modal. But, the problem remains that Cognito does not provide us with a URL, just a function. How do we get around this problem?
We have a browser component that looks like this:
import React from 'react';
import {WebView} from 'react-native-webview';
import PropTypes from 'prop-types';
const Browser = ({route}) => {
const url = ''
return <WebView source={{uri: url}} />;
};
Browser.propTypes = {
route: PropTypes.shape().isRequired,
};
export default Browser;
And if we find the URL, we could probably use it in a modal or in a webview with this
navigation.navigate('Browser');
in the onPress.
I don't know if the problem comes from Cognito or from our code.