ahsanhanif99 / Modular-World

0 stars 0 forks source link

Google Login Issue (probably because of WIX Site) #1

Open sandroidmusic opened 1 month ago

sandroidmusic commented 1 month ago

Hey, i'm writing this in hopes to help you out with the login issue.

The issue seems to be that WIX uses its own Login Flow for Google, so you might have to change the code for handleShouldStartLoadWithRequest in App.js

Here's an updated piece of code for that function

const handleShouldStartLoadWithRequest = (event) => {
  const googleAuthUrls = [
    "https://accounts.google.com",
    "https://accounts.google.com/signin/oauth",
  ];

  const wixAuthUrls = [
    "https://www.modularworld.tv", // Your Wix domain, modify as needed
    "https://www.wix.com/_services/googleauth", // Example Wix auth endpoint
  ];

  // If it's a Google login URL, open it externally
  if (googleAuthUrls.some((url) => event.url.startsWith(url))) {
    Linking.openURL(event.url); // Open Google auth in an external browser
    return false; // Prevent WebView from navigating to Google
  }

  // Allow Wix-related URLs to load within the WebView
  if (wixAuthUrls.some((url) => event.url.startsWith(url))) {
    return true; // Allow WebView to handle Wix login redirection
  }

  // Otherwise, allow the WebView to handle the navigation
  return true;
};

You may have to test with different URLs for the wixAuthUrls. I doesn't look lik you can change the redirect URI's in the WIX system for this. So this will have to be trial and error.

ahsanhanif99 commented 1 month ago

Hi sandroidmusic,

I hope you’re doing well! I’m reaching out because I’ve been working on the Google login feature for our app, and I’ve encountered some issues that I could really use your help with.

It seems that the white screen and repeated redirects are caused by how our callback URL is configured in the Google Cloud Console. The logs show that the app reaches the callback URL, but it might not be set up correctly.

Here’s the link to the issue for reference: Modular World Issue #1.

I've implemented the following code to handle URL loading in the WebView:

const handleShouldStartLoadWithRequest = (event) => {
  const googleAuthUrls = [
    "https://accounts.google.com",
    "https://accounts.google.com/signin/oauth",
  ];

  const redirectUrl = "https://www.modularworld.tv"; // Your expected redirect URL
  const callbackUrl = "https://www.modularworld.tv/_api/iam/authentication/v1/sso/callback/";

  console.log("Redirecting to:", event.url); // Log all URLs

  // Allow WebView to navigate to Google login
  if (googleAuthUrls.some((url) => event.url.startsWith(url))) {
    return true;
  }

  // Check for callback URL after login
  if (event.url.startsWith(callbackUrl)) {
    console.log("Callback URL reached:", event.url);

    // Fetch response from the callback URL if necessary
    // This could be done by calling a function to make an HTTP request if needed
    // e.g., fetchDataFromUrl(event.url);

    return true; // Allow WebView to load the callback URL
  }

  // Allow all other URLs to load within the WebView
  return true;
};

Would you mind checking the following?

  1. Google Cloud Console:

    • Could you log in to the Google Cloud Console and navigate to API & Services > Credentials?
    • I believe we need to ensure that this callback URL is listed as an authorized redirect URI:
      https://www.modularworld.tv/_api/iam/authentication/v1/sso/callback/
  2. Server-Side Logic:

    • If you have any insights on how we can ensure that the server handles requests to this callback URL properly, that would be really helpful.

I really appreciate any guidance you can provide on this. Thank you so much for your help!

sandroidmusic commented 1 month ago

Hey Ahsan,

Regarding Point 1 The thing is, there is no place to define the callback URL. Johno did not have to associate a Cloud Console Project to this.

It seem that WIX handles this all internally, without a way for the user to change any settings or define any URLs. I've made sure to check the options with Johno yesterday in WIX and we didn't find any place to change any Google SignIn related settings.

So it would appear that whatever logic is happening, is in full control of WIX.

Regarding Point 2 Same problem. This is entirely blackbloxed as any server side logic is kept away from the user and WIX just does it themselfs.

Here's what i think our next steps should be:

Let's see what answer we're going to get. 🤞

sandroidmusic commented 1 month ago

For completeness here is what i want Johno to send to WIX Supoort

Hi,

we are using WIX Groups on our Website and have enabled Google as a login method.

We are currently in the process of creating mobile apps for Android and iOS, using Expo (https://expo.dev).
Essentially it's a webview that loads our website.

We have run into an issue with the Google Login on iOS and are hoping you could be of assistance.

Based on some iOS restrictions, it is necessary that the Google Login happens outside of the webview.
If we don't do this, we run into the error that you see in the following link (403 disallowed_useragent):

https://support.google.com/accounts/answer/12917337?hl=en#zippy=%2Cdisallowed-useragent

We have attempted to do the login outside of the webview as requested by iOS through the default browser. This leads to the issue than when the callback is fired (after successful authentication), that we can't redirect back to the app. It get's stuck at the following URL:

https://www.modularworld.tv/_api/iam/authentication/v1/sso/callback ...

As it stand right now, we have no way of telling what the actual issue is since we have no way of changing or knowing what the Google sign-in configuration is. Which means we couldn't even attempt to do any form of deep-linking as we can't change or add redirect URL's.

We have not seen any way of checking those settings in the WIX Administrator or Developer Panel.

Could you assist us?

Best Regards
sandroidmusic commented 1 month ago

In the meantime, @ahsanhanif99 do you think you could add a conditional logic to make a small difference between the Android and iOS version?

I would like to test the following:

For Android:

For iOS:

ahsanhanif99 commented 1 month ago

Yes, I can definitely implement conditional logic to differentiate between the Android and iOS versions.

sandroidmusic commented 1 month ago

That would be awesome thank you! Let me know when you have a .apk that i can test 💪

sandroidmusic commented 1 month ago

UPDATE:

we've talked with WIX support. There is no way we get any control over what is happening there. So we have to find a way around it.

I've just created a Pull Request with some changes for you: #2

What it does is to change the webviews useragent depending on the platform. This will hopefully get us around the iOS limitation.

Below are the changes that i made to App.js:

Updated the react-native import on Line 4 to include Platform:

import {
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
  BackHandler,
  ActivityIndicator,
  Image,
  Linking,
  Platform,
} from "react-native";

Added a new constant after all the imports:

const userAgent =
  Platform.OS === "ios"
    ? "Mozilla/5.0 (iPhone; CPU iPhone OS 17_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Mobile/15E148 Safari/604.1"
    : "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.6723.58 Mobile Safari/537.36";

Remove the entire handleShouldStartLoadWithRequest function on Line 42.

Changed the Webview to look like this:

<WebView
        style={styles.webview}
        ref={webViewRef}
        source={{ uri: "https://www.modularworld.tv/" }}
        onLoadStart={() => setIsPageLoading(true)} // Show loading when page starts
        onLoadEnd={() => setIsPageLoading(false)} // Hide loading when page ends
        onLoad={handleWebViewLoad}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        mixedContentMode="compatibility"
        userAgent={userAgent}
      />

Once you have a build for Android and iOS let us know, so we can test it.

ahsanhanif99 commented 1 month ago

Thank you for your help! I have already applied the suggested user agent for iOS:

userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1"

However, the issue persists where the screen turns white after pressing the Google Sign-In button. The Google OAuth flow does not seem to fully proceed within the WebView, and it halts on a white screen instead of completing the sign-in.

Do you have any additional suggestions or further configurations I should apply to resolve this issue on iOS?

sandroidmusic commented 1 month ago

However, the issue persists where the screen turns white after pressing the Google Sign-In button.

Does it still open in the default browser? Or does it stay within the webview?

Also - let's fix one problem at a time.

ahsanhanif99 commented 1 month ago

For iOS, the Google Sign-In button now opens within the app, but for Android, it still opens in the default browser. I've tried multiple approaches to get the sign-in process to work within the WebView on Android, but unfortunately, none have worked so far.

Also, I'm currently unable to generate a new .apk due to an issue with Expo eas-cli—it seems there's an internal server error on their end that's failing the app build.

I’ll keep trying once the Expo service issue is resolved and will update with a new .apk once it's ready.

sandroidmusic commented 1 month ago

The one thing that confuses me, with an earlier version that you had (before you committed the code to github), the login on Android used to work. Do you remember what you changed since then?

ahsanhanif99 commented 1 month ago

Yes, I’m also confused by this. The Google login on Android did work once within the app, but after that, I wasn’t able to get it working again. I even tried reverting back to the same method, but now it consistently opens in the browser.

I still have that first APK, and I installed it to check, but now it’s also opening the Google login in the browser instead of within the app.

Do you think something might have changed on the website side that’s affecting this behavior?

sandroidmusic commented 1 month ago

Some users claim that using the following UserAgent String works: Chrome/124.0.0.0 Mobile (for either iOS or Android or both) (This was on April 28th this year, might be worth a try)

sandroidmusic commented 1 month ago

Do you think something might have changed on the website side that’s affecting this behavior?

From what i've seen on the website, there is no control or possibility to change any settings. So i don't know if WIX changed anything since then.

You can only activate/deactivate Google or Facebook Signin (there's no other options). Everything else is handled by WIX, without any possibility for us to change anything about it.

Are there any authentication options available on the Google Play Console (not the regular Cloud console) that i might not be aware of?

I've looked at other possible workarounds and have identified only one option and it is not clear if this even going to work:

We would have to integrate deeplinking into the app for the https://www.modularworld.tv/_api/iam/authentication/v1/sso/callback ... URL. This is the callback that is triggered after the signup is successful. And that is also where it currently stops (the white screen).

We would have to retrieve the entire URL and try opening that URL inside the webview.

With a bit of luck, this might work as all the necessary data for a proper login (tokens etc) should be in there.

I'm not even sure if this will work as i don't know if you could use this external URL as a deep-link target for the app.

ahsanhanif99 commented 1 month ago

Thank you for the detailed response!

I’ve also tried implementing deep linking to handle the callback at https://www.modularworld.tv/_api/iam/authentication/v1/sso/callback, but unfortunately, none of the methods seem to be working. Based on my research, there’s no way to resolve this issue via the Google Play Console. Any changes to fix this would have to be handled through Google Cloud.

In light of this, I would suggest temporarily deactivating both the Google and Facebook Sign-In buttons. The reason is that Apple won’t approve the app as long as these buttons are present without an Apple Sign-In option. By removing Google and Facebook sign-ins for now, we can avoid the Apple Sign-In requirement, and this should allow the app to go live on the App Store.

Once the app is live, and if we find a way to fix the Google issue, we can easily reactivate Google and Facebook Sign-In later.

Additionally, it’s worth noting that Apple also requires a "Delete Account" button to be added in the profile section of the app. This is mandatory for the app to be approved on the App Store.

Let me know what you think about this approach so we can proceed and get the app live on the App Store as soon as possible!

sandroidmusic commented 1 month ago

I’ve also tried implementing deep linking to handle the callback at https://www.modularworld.tv/_api/iam/authentication/v1/sso/callback, but unfortunately, none of the methods seem to be working. Based on my research, there’s no way to resolve this issue via the Google Play Console. Any changes to fix this would have to be handled through Google Cloud.

Sadly i have to agree. As long as WIX doesn't offer us any control, this is most likely impossible to fix.

In light of this, I would suggest temporarily deactivating both the Google and Facebook Sign-In buttons. The reason is that Apple won’t approve the app as long as these buttons are present without an Apple Sign-In option. By removing Google and Facebook sign-ins for now, we can avoid the Apple Sign-In requirement, and this should allow the app to go live on the App Store.

Ah, i knew there was something else. I forgot about that requirement. Since WIX doesn't offer that i think it's safe to say we need to remove those sign-in options anyway.

Additionally, it’s worth noting that Apple also requires a "Delete Account" button to be added in the profile section of the app. This is mandatory for the app to be approved on the App Store.

I will have to check with Johno if this is possible. Once again - this is under control of WIX, as the Groups-Feature is something they provide. We will check if it is possible.

Let me know what you think about this approach so we can proceed and get the app live on the App Store as soon as possible!

Thank you for your detailed report. We'll get back to you as soon as Johno has made a decision.

ahsanhanif99 commented 1 month ago

Since this feature is under Wix's control, I understand there may be limitations. However, as per Apple's guidelines, it's essential that we provide users with a way to delete their accounts.

Please see the attached screenshot for reference. You can create a "Delete Account" button under the "Edit Profile" section. When users press this button, there should be a confirmation message that says something like:

“By confirming, your account will be deleted permanently.”

If immediate data deletion isn’t possible through Wix, after the confirmation, you could show a message like:

"Your account will be deleted within 7 days. Please do not log in with the same credentials during this period, as it will terminate the deletion process."

This will ensure we meet Apple's requirements while also adhering to the limitations set by Wix. Let me know if this approach works, or if there’s another workaround we can explore.

image