MedianSocialMedia

Native Google, Facebook, and Apple social login for Median mobile apps.

median_social_media ships a JavaScript plugin that intercepts existing social-login buttons on your website and routes them to Median's native median.socialLogin.* APIs. No duplicate buttons or website rewrites required.

Requirements

Elixir ~> 1.14
A Median app with the Social Login native plugin enabled
Provider credentials configured in App Studio (Google, Facebook, Apple)

Installation

The package can be installed by adding median_social_media to your list of dependencies in mix.exs:

def deps do
  [
    {:median_social_media, "~> 0.1.0"}
  ]
end

Then run mix deps.get.

Usage

App Studio

Retrieve the bundled script and paste it into App Studio → Website Overrides → Custom JavaScript:

iex> MedianSocialMedia.script_content() |> IO.puts()

The plugin auto-starts inside the Median app and is inactive in regular browsers.

Phoenix

Serve the script from your application:

# router.ex

scope "/median", MyAppWeb do
  get "/social-media-plugin.js", MedianPluginController, :script
end

defmodule MyAppWeb.MedianPluginController do
  use MyAppWeb, :controller

  def script(conn, _params) do
    conn
    |> put_resp_content_type("application/javascript")
    |> send_resp(200, MedianSocialMedia.script_content())
  end
end

Load it from Median App Studio Custom JavaScript:

(function () {
  if (navigator.userAgent.toLowerCase().indexOf("median") < 0) return;
  var s = document.createElement("script");
  s.src = "https://your-app.com/median/social-media-plugin.js";
  s.async = true;
  document.head.appendChild(s);
})();

Backend authentication

Listen for the login event and verify the token on your server:

window.addEventListener("SocialMediaLoginSuccess", function (event) {
  fetch("/api/auth/social", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(event.detail)
  });
});

def social(conn, %{"provider" => provider, "token" => token} = params) do
  case MyApp.Auth.verify_social(provider, token, params) do
    {:ok, user} ->
      conn
      |> put_session(:user_id, user.id)
      |> json(%{ok: true})

    {:error, reason} ->
      conn
      |> put_status(:unauthorized)
      |> json(%{error: reason})
  end
end

Configuration

Optional JavaScript configuration via Custom JS:

medianSocialMedia.init({
  providers: { google: true, facebook: true, apple: true },
  fallbackToWeb: true,
  debug: false
});

Default Elixir config map:

MedianSocialMedia.default_config()
#=> %{

#     providers: %{google: true, facebook: true, apple: true},

#     automaticDetection: true,

#     fallbackToWeb: true,

#     debug: false

#   }

API

MedianSocialMedia
- static_path/0 — path to the bundled JavaScript file
- script_content/0 — plugin source as a string
- default_config/0 — default JavaScript configuration map
MedianSocialMedia.Phoenix — response header helpers for Phoenix

JavaScript events

Event	Description
`SocialMediaLoginSuccess`	Native login succeeded; `event.detail` contains `provider`, `token`, `tokenType`, `email`, and `userId`
`SocialMediaLoginError`	Login failed or was cancelled

Documentation

Documentation is available on HexDocs.

You can also generate docs locally:

mix docs

Development

After changing the TypeScript source, rebuild and sync the static asset:

npm install
npm run build
mix median.copy_static
mix test

License

Released under the MIT License. See LICENSE for details.