Social Logins in WebView Mobile App Development? 📲

top view of coffee with laptop and smartphone with facebook app on screen on concrete surface with

What is the Point of a Social Login?

With social login, you can register your app with Facebook, Google, Apple, or Twitter to authenticate the user.

Social login is a way of authenticating users with their social media account. It is an easy and fast way for users to sign in without having to enter their email addresses and password.

The advantages of using social login are that it’s easier for the user because they don’t have to remember any new credentials, and it’s also easier for you as a developer because you don’t have to create your own registration process.

Why should I enable Social Login to my app?

Social login is a process of authenticating a user by using their social media account. This is a very easy and common way of completing the registration process on any website or mobile app.

The benefits of social login are:

– you don’t need to remember your username and password

– you don’t need to create an account

– the process is faster as it doesn’t require entering information like email, phone number, date of birth, etc.

What about WebView-based apps?

A WebView can be used to display content from other websites or from your own website inside an app window on phones and tablets. WebViews can be added to your app project by adding a WKWebView element (iOS) or a WebView element (Android). 

WebViews are often used when handling login information, also social media logins.

One of the benefits of using (social) logins with WebView is that it saves developers time and resources because they don’t need to create their own login page for their app if their web app already provides one. WebViews also allow users to log in with their social media accounts, which can be convenient for some people who do not want to create another account just for this one app. BUT here comes the exception: 

We often see errors when we try to access the URL of social login providers that are blocked by their User-Agent checks. For example, Google has announced that they will no longer support the WebView in Android & iOS apps. This will have a significant impact on many apps that rely on WebView and social logins.

Google now outputs Error: disallowed_useragent (403) when giving it a try.

Also, Facebook login in WebView not working is a common problem that many people face. 

How about WebView-based apps?

The solution for WebView and Social login? Tools like WebViewGold also provide an API for developers to customize the user agent string.

WebViewGold offers an API for developers to customize the user agent string, which is used by WebView to identify itself. Developers can use this API to create a custom user agent that will be used by the WebView instead of the default one. The user agent is not just a string that identifies the browser to the server. It also provides information about the device and operating system. Therefore, the Google and Facebook login will work again once you set the custom user agent in WebViewGold to do so:

Mozilla/5.0 (iPhone; CPU iPhone OS like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Mobile/14F89 Safari/602.1

This User-Agent one also works on Android.

  • You can also use the Social Media Login Helper tool of WebViewGold:
  • Variables in the Config file:
      • iOS:
        • google_login_helper_triggers
        • facebook_login_helper_triggers
      • Android:
        • GOOGLE_LOGIN_HELPER_TRIGGERS
        • FACEBOOK_LOGIN_HELPER_TRIGGERS
  • To trigger the helper, you need to list the URL prefixes that load during the login.
    • Examples of common URL prefixes loaded during login:
      • Google: “https://accounts.google.com/”, “https://accounts.google.com/o/oauth2/”
      • Facebook: “https://m.facebook.com”, “https://www.facebook.com”

We hope that this article has been insightful and helped you to understand the use cases of social logins in apps, especially in WebView apps. Have a great day!

–––––––––––

Mentioned products: WebViewGold