Hello Im having trouble setting up authentication with the default Cognito Hosted UI for my mobile application.
I am working with Amplify in a react-native project.
Ive got sign in with Apple and google both configured.
When I login or successfully create and verify an account instead of being redirected to the AppNavigator I remain at the welcomeScreen.js.
Accounts are successfully being created in the user pool.
I also have deep linking configured in the AppDelegate and Url in info.plist file.
here is my code:
WelcomeScreen.js
const WelcomeScreen = () => {
const domain = " ";
const redirectSignIn = "Name://";
const clientId = " ";
const handleOpenSignIn = async () => {
const url = `https://${domain}/oauth2/authorize?client_id=${clientId}&response_type=code&scope=email+openid+profile&redirect_uri=${encodeURIComponent(redirectSignIn)}`;
console.log("Attempting to open URL:", url); // Logs the URL being opened
try {
if (await InAppBrowser.isAvailable()) {
console.log("Opening In-App Browser for sign-in");
const result = await InAppBrowser.openAuth(url, redirectSignIn, {});
console.log("In-App Browser closed, result:", result);
if (result.type === 'success' && result.url) {
console.log("Successful authentication, URL:", result.url);
} else {
console.log("Authentication was not successful");
}
} else {
console.error("In-app browser is not available");
}
} catch (error) {
console.error("Error opening in-app browser for sign-in:", error);
}
};
return (
<View style={styles.container}>
<Text style={styles.title}>Welcome to X!</Text>
<Text style={styles.paragraph}>
Revolutionize the way you X.
</Text>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.loginButton}
onPress={handleOpenSignIn}
>
<Text style={styles.buttonText}>Log In or Sign Up</Text>
</TouchableOpacity>
</View>
</View>
);
};
App.js:
function App() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [isAuthenticating, setIsAuthenticating] = useState(true); // New state to track if auth check is in progress
const checkAuthState = async () => {
try {
await Auth.currentAuthenticatedUser();
console.log('Auth state changing: User is authenticated'); // Log when authenticated
setIsAuthenticated(true);
} catch {
console.log('Auth state changing: User is not authenticated'); // Log when not authenticated
setIsAuthenticated(false);
}
setIsAuthenticating(false); // Set to false after checking auth state
};
useEffect(() => {
const listener = (data) => {
console.log('Event received:', data.payload.event);
if (data.payload.event.includes('_failure')) {
console.log('Error details:', data.payload.data);
}
switch (data.payload.event) {
case 'signIn':
setIsAuthenticated(true);
setIsAuthenticating(false); // Set to false upon sign-in
console.log('Auth state changing: User signed in');
break;
case 'signOut':
setIsAuthenticated(false);
setIsAuthenticating(false); // Set to false upon sign-out
console.log('Auth state changing: User signed out');
break;
default:
console.log(`Unhandled event: ${data.payload.event}`);
break;
}
};
Hub.listen('auth', listener);
checkAuthState();
return () => Hub.remove('auth', listener);
}, []);
// Render a loading indicator while checking authentication state
if (isAuthenticating) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" />
</View>
);
}
return (
<ThemeProvider>
<NavigationContainer>
{isAuthenticated ? <AppNavigator /> : <WelcomeScreen />}
</NavigationContainer>
<Toast />
</ThemeProvider>
);
}
export default App;
here are Logs when I attempt to sign in
LOG Auth state changing: User is not authenticated
LOG Attempting to open URL: https://auth-Name.auth.us-east-2.amazoncognito.com/oauth2/authorize?client_id=4sj96pmn8mukg3td835pen0nve&response_type=code&scope=email+openid+profile&redirect_uri=Name%3A%2F%2F
LOG Opening In-App Browser for sign-in
LOG Event received: parsingCallbackUrl
LOG Unhandled event: parsingCallbackUrl
LOG In-App Browser closed, result: {"type": "success", "url": "CallBackUrlName://?code=6ce42774-39e0-4838-bec1-ada64cb75039"}
LOG Successful authentication, URL: CallBackUrlName://?code=6ce42774-39e0-4838-bec1-ada64cb75039
