Why do I get a Magic Extension Error (oauth): [Cannot read property 'openAuth' of null] An error has occurred

[AB7zz]

✅ Prerequisites

• [✅ ] Did you perform a cursory search of open issues? Is this question already asked elsewhere?
• [✅] Are you reporting to the correct repository (magic-sdk)?

❓ Question

I've initialized a magic instance as in the docs

const magic = new Magic(MAGIC_PUBLISHABLE_KEY, {
        network: {
            rpcUrl: RPC_URL_DEV,
            chainId: CHAIN_ID
        },
        extensions: [
            new OAuthExtension()
        ]
    });

const handleSocialMediaLogin = async (provider, redirectUri) => {

        try {
            setLoading(true);
            setError(null);
              const result = await magic.oauth.loginWithPopup({
                provider,
                redirectUri
              });
              console.log('OAuth login result:', result);

            setLoading(false);
        } catch (error) {
            setLoading(false);
            console.error('OAuth login error:', error);
            setError(`Error logging in with ${provider}: ${error.message}`);
        }
    }

and when I try to login using any social media, I get a OAuth login error saying "Magic Extension Error (oauth): [Cannot read property 'openAuth' of null] An error has occurred". Not sure why when I've followed everything as in the docs. I even have a dedicated wallet. Sign in with email works perfectly fine.

🌎 Environment

Software	Version(s)
magic-sdk	13.6.2
Mobile	iPhone
npm	10.9.0
Operating System	iOS

[ayv8er]

@AB7zz
Which Magic dependencies are you utilizing?
Are you building a web app?

[abiwagmi]

@ayv8er

It's a react native application, and I'm testing it on iOS

[ayv8er]

@abiwagmi
Is there a reason why you're using both the bare and expo libs?
Could you provide a code snippet of the page where you're importing all dep and constructing Magic?

[abiwagmi]

Yea, I had installed the expo libs while experimenting with metro oauth, because it wasn't working

`
// Dependencies imported
import { Magic } from "@magic-sdk/react-native-bare";
import { OAuthExtension } from "@magic-ext/react-native-bare-oauth";

function Signin({route, navigation}) {
const { magicProps } = useContext(Context);
const [loading, setLoading] = useState(false)
const [loginEmail, setLoginEmail] = useState("")
const [error, setError] = useState(null);
const context = useContext(Context);
const [showAlert, setShowAlert] = useState(false);
const [alertMessage, setAlertMessage] = useState('');

// const magic = context.magicProps.magic
const magic = new Magic(MAGIC_PUBLISHABLE_KEY, {
    network: {
        rpcUrl: RPC_URL_DEV,
        chainId: CHAIN_ID
    },
    extensions: [
        new OAuthExtension()
    ]
});
const web3 = context.magicProps.web3;

const loginTypes = [
    {
        text: "Login With Google",
        provider: "google",
        image: gmailIcon,
        redirectURI: "liiwallet://SignIn"
    },
    {
        text: "Login With Microsoft",
        provider: "microsoft",
        image: microsoftIcon,
        redirectURI: "https://auth.magic.link/v1/oauth2/....."
    },
    {
        text: "Login With Twitter",
        provider: "twitter",
        image: xIcon,
        redirectURI: "https://auth.magic.link/v1/oauth2/....."
    },
    {
        text: "Login With Apple",
        provider: "apple",
        image: appleIcon,
        redirectURI: "https://auth.magic.link/v1/oauth2/...."
    }
]

const handleSocialMediaLogin = async (provider, redirectURI) => {

    try {
        setLoading(true);
        setError(null);
        const magicRes = await magic.oauth.loginWithPopup({
            provider,
            redirectURI
        });

        console.log(res)

        setLoading(false);
    } catch (error) {
        setLoading(false);
        console.error('OAuth login error:', error);
        setError(`Error logging in with ${provider}: ${error.message}`);
    }
}

return (
    <View style={styles.container}>
        <ImageBackground source={bg} resizeMode="cover" style={styles.imageBg}>
            <View style={styles.view}>
                <Image source={logo} style={styles.logo} />
                <Text style={styles.title}>Log in</Text>
                <Text style={styles.desc}>Log in using your email or your digital wallet</Text>
                <View style={styles.emailWrapper}>
                    <Image source={emailIcon} style={styles.emailIcon} />
                    <TextInput
                        placeholder="Email or Phone Number"
                        placeholderTextColor="#6B7280"
                        style={styles.emailInput}
                        value={loginEmail} 
                        onChangeText={text => setLoginEmail(text)}
                        autoCapitalize="none"  // Ensure auto-capitalization is disabled
                        keyboardType="email-address"  // Set keyboard type to email
                        autoCorrect={false}  // Disable auto-correction
                    />
                </View>
                {error && <Text style={{ color: 'red', marginBottom: 10 }}>{error}</Text>}
                <TouchableOpacity onPress={() => emailLogin()} style={styles.loginButton} disabled={loading}>
                    {loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.loginButtonText}>Log In</Text>}
                </TouchableOpacity>
                <View style={styles.socialLogin}>
                    {loginTypes.map((item, index) => (
                        <TouchableOpacity key={index} onPress={() => handleSocialMediaLogin(item.provider, item.redirectURI)} disabled={loading}>
                            <Image source={item.image} style={styles.socialIcon} />
                        </TouchableOpacity>
                    ))}
                </View>
            </View>
            <Text style={styles.orLoginText}>Or Login with</Text>
            <TouchableOpacity style={styles.connectButton} disabled={loading}>
                <Text style={styles.connectButtonText}>Connect your wallet</Text>
            </TouchableOpacity>
            {showAlert && (
                <CustomAlert 
                    message={alertMessage} 
                    onClose={() => {
                        setShowAlert(false);
                        navigation.navigate('Home');
                    }} 
                />
            )}
        </ImageBackground>
    </View>
)

}

export default Signin;

`

Would really appreciate any help