Website Configuration

See our Demo Website for a working example

This guide assumes you have already implemented the Social Login identity providers on your website and are now implementing the Median Social Login Native Plugin to improve the login experience for your app users.

You will call Median JavaScript Bridge methods to initiate the native login flow for each Social Login identity provider. These methods should only be called while your website is being displayed within your app. Thus you should show the standard buttons you currently use when your site is being displayed in a browser and modified buttons that call the JavaScript Bridge methods with the site are displayed in your app.

As an example, this could be implemented via JavaScript.

<button class="facebook-login browser-only" onclick="facebookLogin()">
	Log In With Facebook
</button>

<button class="facebook-login native-only" 
  onclick="median.socialLogin.facebook.login({ 'redirectUri' : 'https://median-social-logins-demo.web.app/auth/facebook/redirect', 'scope' : 'public_profile, email' });">
	Log in With Facebook
</button>

<script>
const isMedian = navigator.userAgent.indexOf("median") >= 0;

if (isMedian) {
    	// Remove browser-only buttons.
    	const elements = document.getElementsByClassName("browser-only");
    	while (elements.length > 0) {
        	elements[0].parentNode.removeChild(elements[0]);
    	}
} else {
    	// Remove native-only buttons.
    	const elements = document.getElementsByClassName("native-only");
    	while (elements.length > 0) {
        	elements[0].parentNode.removeChild(elements[0]);
    	}
}
</script>

When originally implementing, you or your web developer would have either

• deployed API endpoints on your server to receive the identity provider authentication tokens and facilitate login to your site via server-side redirects, or
• defined JavaScript callback functions on your website to receive the authentication tokens and facilitate the login in the client browser

The Median Social Login Native Plugin utilizes these same API endpoints or JavaScript callback functions to transition the login between the native app and your webview.