Customize Your User Registration Event System

From the very beginning, we designed the Janrain Registration JavaScript API with event-driven websites in mind, in the name of enabling you to craft a responsive and intuitive experience for your users. Our registration solution enables you to specify a wide variety of hooks determining how your page behaves when certain registration-related events take place. In this tutorial, we’ll first provide a general overview of how to use event handlers and then provide a few JavaScript code examples. We won’t cover all events here. If you’re looking for a comprehensive list of events, see this page in our Reference section.

Where and How to Specify an Event Handler

The best place to specify your event handlers is in the head of your HTML document. Code related to event handlers should load after your janrain-init.js file but before anything else. You can insert that JavaScript either directly in the HTML head or via a .js file, depending on your needs.

All event handlers must also be specified within the bounds of a janrainCaptureWidgetOnLoad function. This dictates that event handlers will only be registered when the Registration script is fully loaded and ready to go. In addition, all event handlers are added by passing a callback function to the janrain.events object. All handlers are in the following form:

janrain.events.{eventName}.addHandler(function(result) {
  ... callback function logic here ...;
}

Here’s an example of an event handler that fires an alert in the browser console when the Registration modal window is ready:

function janrainCaptureWidgetOnLoad() {
  janrain.events.onCaptureModalReady.addHandler(function(result) {
    console.log('The user registration modal is now ready to go!');
  }
}

Note: Remember that at any given time you can retrieve a full list of events available in the JavaScript API by type in janrain.events in your browser’s console.

Example 1: Close the Registration Modal When a User Session is Found

// Inside a janrainCaptureWidgetOnLoad() function, as are all examples below

janrain.events.onCaptureSessionFound.addHandler(function(result) {
  janrain.capture.ui.modal.close();
  // To register in the console:
  // console.log('User session has been found');
}

Example 2: Close the Registration Modal Upon Successful Login

janrain.events.onCaptureRegistrationSuccess.addHandler(function(result) {
  janrain.capture.ui.modal.close();
  // To register in the console:
  // console.log('Registration has been successful');
}

Example 3: Display Errors in the Browser Console

janrain.events.onCaptureError.addHandler(function(error) {
  console.log(error);
}

Example 4: Display an accessToken in the Console (for Debugging)

janrain.events.onProviderLoginToken.addHandler(function(token) {
  console.log(token);
}

Example 5: Unhide a DOM Element After the Modal Has Been Fully Rendered

janrain.events.onCaptureRenderComplete.addHandler(function(res) {
  document.getElementById("myElement").style.display = "block";
}

Example 6: Store a Key/Value Pair in Local Storage When a Session is Created

janrain.events.onCaptureSessionCreated.addHandler(function(res) {
  window.localStorage["sessionKey"] = "sessionValue";
}

Example 7: Redirect When a User’s Session Has Ended

janrain.events.onCaptureSessionEnded.addHandler(function(res) {
  window.location = "http://other-url.com";
}

Naturally, this merely scratches the surface of the kinds of functionality that you can implement using the Janrain events API and only covers a small handful of supported event types. Check out this page in the reference section for a more comprehensive listing of event types.