Back

Problem with Google Authentication using Appwrite in React Native (Expo)

  • 0
  • Android
  • Auth
  • Web
  • Self Hosted
__sacipereréca__
30 Nov, 2024, 01:22

Hello, Guys!

I’m facing an issue with implementing Google authentication via Appwrite in my React Native app using Expo. Despite having everything correctly set up, the Google authentication screen (OAuth2 flow) is not being shown automatically. Below, I’m detailing the issue: I am using the following code to start the Google authentication flow:

TypeScript
export async function signInWithGoogle() {
  try {
    // Starts the authentication flow with Google using Appwrite OAuth
    const response = await account.createOAuth2Session(
      'google',
      'http://localhost:8081/',
      'http://localhost:8081/failure'
    );

    console.log(response.href); // Debugging step
    if (!response || !response.providerAccessToken) {
      throw new Error('Failed to authenticate with Google.');
    }

    // Retrieves the authenticated user's information
    const user = await account.get();
    const email = user.email;
    const accountId = user.$id;

  } catch (error) {
    console.error('Error logging in with Google:', error.message);
    throw { message: error.message, code: error.code || 500 };
  }
}

The Problem: When the signInWithGoogle function is called:

The response.href is generated correctly. If I manually copy and paste the URL into a browser, the Google authentication screen appears. However, the email selection screen is not automatically displayed within the app, even though I am triggering this within a click event.

What I’ve Checked Success and failure URLs are configured properly in the Appwrite dashboard. The Google OAuth2 provider is enabled and credentials are correctly configured. I’ve tested in different browsers and checked that pop-ups or redirects are not being blocked. The signInWithGoogle function is being called properly from within the click event.

TL;DR
Issue: Google authentication screen not showing automatically when using Appwrite in React Native (Expo). Solution: - Check configuration of success and failure URLs in Appwrite dashboard. - Ensure Google OAuth2 provider is enabled and the credentials are correctly configured. - Test in different browsers to make sure pop-ups or redirects are not blocked. - Confirm that the signInWithGoogle function is properly triggered from the click event.
Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more