The authomatic.js library is here to make your life even easier. It has a very tiny interface similar to it’s Python sibling. Yo can use it to:

  • Process the login procedure in a popup window.
  • Access protected resources in the most efficient way without any hassle.


The library is dependent on jQuery!


Sets up all the library’s options.

  • options (object) –

    An object of following options:


    bool If true the library will log a lot of information to the console.

    Popup options:


    int The width of the popup in pixels. Default is 800.


    int The height of the popup in pixels. Default is 600.


    string A jQuery selector specifying links that should be affected by authomatic.popupInit(). Default is 'a.authomatic'.


    string A jQuery selector specifying forms that should be affected by authomatic.popupInit(). Default is 'form.authomatic'.


    function A function which you can use to validate the form before the popup opens. It accepts the jQuery selected form. The popup gets opened only if it returns true.



    function Called when the popup form doesn’t pass validation. Accepts the form selected with jQuery as the only argument.


    function Called when the popup gets open. Accepts the popup location URL as the only argument.


    function Called when the popup gets closed after the login procedure is complete. Accepts the loginResult object as the only argument.


If you call this function, all <a></a> and <form></form> elements with class="authomatic" will open a popup on click/submit. By links the location of the popup will be the value of href attribute, by forms the value of action attribute with query string extracted from the form inputs.

<!DOCTYPE html>
      <title>Login Popup Example<title>
      <!-- authomatic.js is dependent on jQuery -->
      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src="authomatic.js"></script>

      <!-- Opens a popup with location = "login/facebook" -->
      <a class="authomatic" href="login/facebook">Login with Facebook</a>

      <!-- Opens a popup with location = "login/openid?" -->
      <form class="authomatic" action="login/openid" method="GET">
         <input type="text" name="id" value="" />
         <input type="submit" value="Login with OpenID" />

      <script type="text/javascript">

authomatic.access(credentials, url[, options])

Makes an asynchronous request to protected resource of a user.

Under the hood it tries to make the request as efficiently as possible with the aim to save your backend’s resources:

  • By OAuth 2.0 providers:
    1. First a cross-domain XHR request is attempted.
    2. If that fails it continues either with:
      • A JSONP XHR request but only if the provider supports it and the request method is 'GET'
      • Otherwise it will fetch the provider through backend.
  • By OAuth 1.0a providers the request must be signed using the consumer secret which cannot be exposed in the client, so every request goes first to the backend. Depending on provider the backend either:
    • Fetches the provider and returns the result of the fetch.
    • Returns signed request elements with which a JSONP XHR request is made.
  • credentials (string) – Serialized Credentials of the user.
  • url (string) – URL of the protected resource. Can include querystring and template tags in the form of{}/profile.
  • options (object) –

    An object of following options.


    You can also specify all of these options in the authomatic.setup(). Values specified here will override the values specified in authomatic.setup() with the exception of callbacks.


    string URL of your login handler, or the handler where you call the Authomatic.backend() function.


    This parameter is required by all OAuth 1.0a providers and also by some OAuth 2.0 providers.


    bool If true requests will be fetched through backend by all providers.


    object An object which will be used to replace template tags inside the URL. e.g. URL{}/profile by substitute {user: {id: '123'}} will be rendered as


    object The query parameters of the request.


    object The HTTP headers of the request.


    string The body of the request.


    string Some providers don’t support cross-domain requests. In such case the function tries a JSONP request and will generate a temporary callback in the global namespace with the name 'authomaticJsonpCallback#' where # is an integer unique for every callback. You can change the default 'authomaticJsonpCallback' to whatever you want by specifying it in this option.



    Callbacks specified in authomatic.setup() will not be overridden by those specified here, but both will be called, whereas those specified in authomatic.setup() will be called first.


    function Called when authomatic.access() contacts backend. Accepts a object of parameters which will be sent to the backend as the only argument.


    function Called when response returns from backend. Accepts data, textStatus and jqXHR as arguments in the specified order.


    function Called when a successful response returns from provider. Accepts data, textStatus and jqXHR as arguments in the specified order.


    function Called when any response returns from provider. Accepts textStatus and jqXHR as arguments in the specified order.

Fork me on GitHub