Integrating Sign in with Apple into React Native App with AWS Cognito Authentication

33 Views Asked by At

I'm currently developing a React Native application using Expo and aiming to implement authentication via Sign in with Apple. My goal is to keep the authentication flow entirely within the app, avoiding any redirection to web browsers for a smoother user experience. After successfully signing in with Apple, I receive a JWT token, which I then want to use to authenticate with AWS Cognito.

I created also Issue on amplify : https://github.com/aws-amplify/amplify-js/issues/13191

I've set up Apple as an identity provider in the AWS Cognito console, including the creation of an App ID and Service ID in my Apple Developer account. However, I'm struggling with the next steps, specifically how to exchange the JWT token received from Apple for AWS Cognito credentials directly within my React Native application.

Note : I don't want to use amplify hosted ui signInRedirect currently it has a bug on IOS platform. such as like this https://github.com/aws-amplify/amplify-ui/issues/4975

Here's what I've done so far in my React Native app using Expo:

  1. Implemented Sign in with Apple using expo-apple-authentication.

const getAppleAuthContent = () => {
        if (!userToken) {
            return <AppleAuthentication.AppleAuthenticationButton
                buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
                buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
                cornerRadius={5}
                style={ { height: 44, marginTop:5}}
                onPress={ loginApple }
            />
        } else {
            const decoded = userToken.identityToken;
            console.log(decoded); // How can I make upload user to cognito via issued token from apple 


            const current = Date.now() / 1000;
            return (
                <View>
                    <Text>{decoded.email}</Text>
                    <Text>Expired: {(current >= decoded.exp).toString()}</Text>
                    <Button title="Logout" onPress={logout} />
                    <Button title="Refresh" onPress={refresh} />
                    <Button title="Get Credential State" onPress={getCredentialState} />
                </View>
            )
        }
    };

  1. Obtained the JWT token after a successful sign-in.

What I need help with is how to properly use this JWT token to authenticate with AWS Cognito. I'm aware that AWS Amplify or the AWS SDK for JavaScript could be involved in this process, but I'm unclear on the specifics, such as the correct API calls or methods to use.

Could someone provide guidance or a code snippet on how to achieve this? Specifically, how can I take the JWT token from the Apple sign-in process and use it to authenticate a user with AWS Cognito within a React Native application?

Thank you in advance for your assistance!

I am currently expecting platform specific solutions to sign in without hosted UI. Currently dev team fixed it with my notification : https://github.com/aws-amplify/amplify-js/issues/13191#event-12315761520

0

There are 0 best solutions below