Back
Cannot use Apple Oauth2 in React Native/Expo
Hi! I've trying to add the Apple sign in feature into my Expo App. I followed the docs, but I still receiving the error "Cannot set 'location.href'". Can someone help me, please? 🙏🏻
TL;DR
Cannot use Apple Oauth2 in React Native/Expo due to the error "Cannot set 'location.href'". To resolve this issue, consider using `WebBrowser.openAuthSessionAsync` with a scheme redirect.The code is
```js
const makeRedirectUri = ({ preferLocalhost = false } = {}) => {
const redirectUri = Linking.createURL('auth', { scheme: appwrite-callback-${APPWRITE_PROJECT} });
if (preferLocalhost) {
const url = new URL(redirectUri);
url.hostname = 'localhost';
return url.toString();
}
return redirectUri;
};
TypeScript
const provider = OAuthProvider.Apple;
const loginWithApple = async () => {
setIsLoading(true);
try {
if (Platform.OS !== 'ios') {
return { error: { message: 'Apple Sign In solo está disponible en iOS' } };
}
// Create deep link that works across Expo environments
// Ensure localhost is used for the hostname to validation error for success/failure URLs
const deepLink = new URL(makeRedirectUri({ preferLocalhost: true }));
const scheme = `${deepLink.protocol}//`; // e.g. 'exp://' or 'appwrite-callback-<PROJECT_ID>://'
// Start OAuth flow
const loginUrl = await account.createOAuth2Token({
provider,
success: `${deepLink}`,
failure: `${deepLink}`,
});
// Open loginUrl and listen for the scheme redirect
const result = await WebBrowser.openAuthSessionAsync(`${loginUrl}`, scheme);
// Extract credentials from OAuth redirect URL
const url = new URL(result.url);
const secret = url.searchParams.get('secret');
const userId = url.searchParams.get('userId');
// Create session with OAuth credentials
await account.createSession({
userId,
secret
});
// Redirect as needed
} catch (error) {
console.error('OAuth error:', error);
setIsLoading(false);
throw error;
}
};
TypeScript
