How can I prevent Google Auth 403 errors by detecting social media in-app browsers, and ensure the terms checkbox, reCAPTCHA are validated before allowing Google Auth signup in MS? Answered

• 

  Duncan from Memberstack

  • January 04, 2024 21:11

  Oh interesting!! I checked with ChatGPT and received this answer. Curious to hear if this is along the lines of what you are thinking. 

  To hide the Google Auth component on mobile when your site is accessed through in-app browsers like Instagram or TikTok, you need to implement a detection mechanism for these browsers and then conditionally render the Google Auth component based on that detection. Here's a general approach:

  1. Detect In-App Browsers: You can detect if your site is being accessed through an in-app browser using JavaScript. This is often done by checking the user agent string. However, user agent strings vary and can be unreliable for pinpointing specific browsers like Instagram's. A more reliable approach might involve specific behaviors of these in-app browsers. For instance, certain functionalities (like `window.open`) might behave differently or be absent in these environments.

  2. Conditionally Render the Google Auth Component: Once you've detected an in-app browser, you can use this information to conditionally render your Google Auth component. If an in-app browser is detected, you hide or don't render the Google Auth option, otherwise, you display it as usual.

  Here's a basic example in JavaScript:

  function isInAppBrowser() {
      // Basic check for in-app browsers. Adjust as needed.
      const userAgent = window.navigator.userAgent.toLowerCase();
      return userAgent.includes("instagram") || userAgent.includes("tiktok");
  }
  
  window.onload = function() {
      if (isInAppBrowser()) {
          // Select and hide all elements with data-ms-auth-provider="google"
          const googleAuthElements = document.querySelectorAll('[data-ms-auth-provider="google"]');
          googleAuthElements.forEach(element => {
              element.style.display = 'none';
          });
      }
  };

  Note that this is a simplified example. Depending on how your site is built and the specific behaviors of the in-app browsers you want to target, you might need a more complex detection method.

  Also, consider the user experience. Ensure that users have clear instructions or alternatives for signing up or logging in when the Google Auth option is not available.

  Remember, browser detection is not foolproof and can be affected by changes in how browsers identify themselves. Regular testing and updates might be necessary.

  0
• 

  Abel Haddis

  • November 17, 2024 23:34

  Hi guys, I have Google Auth set up for my sign-up form, but I also have a checkbox for the terms and conditions and another one to opt in for marketing emails. I noticed that when I signed up using Oauth, those fields were false in Memberstack. Is there a way to get around this?

  0
• 

  Duncan from Memberstack

  • November 17, 2024 23:37

  Hmm great question, I am surprised this has not come up before.

  1. You could have the checkbox enabled by default (I don't think GDPR requirements like this)
  2. You could update your signup form copy to say "by signing up with a social auth provider you agree to our terms..." etc. etc. - not sure if this is better or not from a GDPR stand point...
  3. You could prevent people from clicking on the social auth button until they have checked the consent form. But this is going to negatively effect your conversion rate
  0
• 

  Michel Schade

  • November 17, 2024 23:41

  I would advise the third option from a GDPR standpoint.

  0
• 

  Abel Haddis

  • November 17, 2024 23:41

  Thanks for the solutions. How can I go about the third option?

  0
• 

  Duncan from Memberstack

  • November 17, 2024 23:42
  1. You'll need to use Webflow interactions or some custom code for that.
  2. hCaptcha isn't usually needed in conjunction with social auth accounts. Are you having issues with spam accounts?
  0
• 

  Abel Haddis

  • November 17, 2024 23:43

  If I remove the reCaptcha, will the login and signup form still be submitted?

  I basically made it so that when someone clicks the auth button, the terms checkbox automatically gets checked via js eventListeners but for some reason, it still shows up as false in Memberstack? When I use auth, is it different than submitting the actual form, resulting in inputs not being considered?

  0
• 

  Duncan from Memberstack

  • November 17, 2024 23:45

  Yup! Just make sure it's disabled in Memberstack too. https://docs.memberstack.com/hc/en-us/articles/11398218093595-Prevent-Spam-with-hCaptcha

  You may need to add a short delay so that Memberstack has time to send/save the inputs. If a member enters their name and checks a box before clicking google auth it should save to Memberstack. Can you do a test by manually clicking the checkbox before signing up with google? That should save it and confirm the need for a short delay in your automation

  0
• 

  Abel Haddis

  • November 17, 2024 23:51

  Delay fixed it, thanks Duncan!

  0

Please sign in to leave a comment.