is there a way to fix access blocked clerk request does not comply with google policy

445 Views Asked by At

I'm integrating clerk authentication to allow users to sign up using google auth in my expo react native application , but i get a error that clerk request does not comply with google policy Here is my code

WebBrowser.maybeCompleteAuthSession()


enum Strategy {
    Google = 'oauth_google',
    Apple = 'oauth_apple',
    Facebook = 'oauth_facebook'
}

export default function Page() {
    useWarmUpBrowser();

    const router = useRouter()

    const { startOAuthFlow: appleAuth } = useOAuth({ strategy: 'oauth_apple' })
    const { startOAuthFlow: googleAuth } = useOAuth({ strategy: 'oauth_google' })
    const { startOAuthFlow: facebookAuth } = useOAuth({ strategy: 'oauth_facebook' })


    // function to choose the auth

    const onSelectAuth = async (strategy: Strategy) => {

        // select strategy => create a object with key and value to select each auth using enum

        const selectedAuth = {
            [Strategy.Google]: googleAuth,
            [Strategy.Apple]: appleAuth,
            [Strategy.Facebook]: facebookAuth

        }[strategy];

        try {
            const {createdSessionId , setActive} = await selectedAuth()

            //console.log(createdSessionId , 'session started')

            if(createdSessionId){
                setActive!({session:createdSessionId})
                router.back()
            }
        } catch (error) {
            console.error('OAuth error', error)
            
        }

    }


    return (
        <View style={styles.container}>
            <TextInput autoCapitalize='none' placeholder='email' style={[defaultStyles.inputField, { marginBottom: 30 }]} />
            <TouchableOpacity style={defaultStyles.btn}>
                <Text style={defaultStyles.btnText}>Continue</Text>
            </TouchableOpacity>
            <View style={styles.separatorView}>
                <View style={{
                    flex: 1,
                    borderBottomColor: '#000',
                    borderBottomWidth: StyleSheet.hairlineWidth,
                }} />

                <Text style={styles.separator}>or</Text>
                <View style={{
                    flex: 1,
                    borderBottomColor: '#000',
                    borderBottomWidth: StyleSheet.hairlineWidth,
                }} />

            </View>
            <View style={{ gap: 20 }}>
                <TouchableOpacity style={styles.btnOutline}>
                    <Ionicons size={24} name='call-outline' style={defaultStyles.btnIcon} />
                    <Text style={styles.btnOutlineText}>Continue with phone</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => onSelectAuth(Strategy.Apple)} style={styles.btnOutline}>
                    <Ionicons size={24} name='md-logo-apple' style={defaultStyles.btnIcon} />
                    <Text style={styles.btnOutlineText}>Continue with Apple</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => onSelectAuth(Strategy.Google)} style={styles.btnOutline}>
                    <Ionicons size={24} name='md-logo-google' style={defaultStyles.btnIcon} />
                    <Text style={styles.btnOutlineText}>Continue with google</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => onSelectAuth(Strategy.Facebook)} style={styles.btnOutline}>
                    <Ionicons size={24} name='md-logo-facebook' style={defaultStyles.btnIcon} />
                    <Text style={styles.btnOutlineText}>Continue with Facebook</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

on selecting google to sign up, the below error pops up. I have already configured my token from clerks dashboard to facilitate the authentication, but it is still not working .

error message that appears on the android emulator

0

There are 0 best solutions below