---
title: "Get Realtime Authentication Events with Auth0 and Pusher"
description: "Learn how to leverage Pusher to get realtime authentication events from Auth0."
authors:
  - name: "Esteban Herrera"
    url: "https://auth0.com/blog/authors/esteban-herrera/"
date: "May 18, 2017"
category: "Developers,Tutorial,Pusher"
tags: ["pusher", "auth0", "auth0-rules"]
url: "https://auth0.com/blog/get-realtime-auth-events-with-auth0-and-pusher/"
---

# Get Realtime Authentication Events with Auth0 and Pusher



[Auth0](https://auth0.com) is a service that allows you to easily authenticate the users of your application using methods like social network logins and [passwordless systems](https://auth0.com/passwordless).

[Pusher](https://pusher.com) is a platform that allows you to build scalable realtime apps via WebSockets with a simple Publish/Subscribe model and other features.

Together, they make a powerful combination. For example, imagine if you could notify other systems when a login happens in realtime and with just a few lines of code. This is possible when you use Auth0 and Pusher together.

In this tutorial, we'll set up a [Auth0 rule](https://auth0.com/docs/rules) that will send login/signup events to Pusher so they can be shown in a feed in realtime. This is what we'll be building:

![Auth0 Pusher App](https://images.ctfassets.net/23aumh6u8s0i/HEeFqSaPj9boLjY4t89XB/d4fb518b0440562e5a33249ec6c07261/getting-authentication-events-in-realtime-with-auth0-and-pusher-final-app)

First, there's a login app that sends log in/signup requests to Auth0. If the user authenticates successfully, a rule is executed. This rule is a JavaScript function that sends the user information to a Pusher channel so another app can show it in a feed in realtime. We'll use [Create React App](https://github.com/facebookincubator/create-react-app) to create this feed application.

For reference, you can find the source code of the Auth0 rule in this [gist](https://gist.github.com/eh3rrera/00ee1aeb462777736f4e441694662c5d) and the source code of the feed in this [GitHub repo](https://github.com/eh3rrera/auth0-pusher-feed).

Let's get started.

## Setting up your Pusher application

Create a free account at [https://pusher.com/signup](https://pusher.com/signup).

When you create an app, you'll be asked to enter some configuration options:

![Pusher Account](https://images.ctfassets.net/23aumh6u8s0i/4gY7QTuougYeyPPjId2Mfr/e42e448dd5cc83bc40af1e3812bd5950/getting-authentication-events-in-realtime-with-auth0-and-pusher-create-pusher-app)

Enter a name for your app and choose *React* as your front-end tech. There's no need to choose a back-end tech for now. This will give you some sample code to get you started:

![Getting Started with Pusher](https://images.ctfassets.net/23aumh6u8s0i/3BatB7qibkanZRqL3oPeg8/28b9b54b4f263a04051feb61df525f57/getting-authentication-events-in-realtime-with-auth0-and-pusher-getting-started)

But don't worry, this won't lock you into this specific set of technologies as you can always change them. With Pusher, you can use any combination of libraries.

Next, copy your cluster ID (next to the app title, in this example `mt1`), App ID, Key, and Secret information as we'll need them later. You can also find them in the *App Keys* tab.

## Setting up an Auth0 rule

Create a free account at [https://auth0.com/signup](https://auth0.com/signup).

> [Auth0 offers a generous **free tier**](https://auth0.com/pricing) to get started with modern authentication.

Next, create a client. Give it a name and choose the Single Page Web Application type.

![Setting up Auth0 Client](https://images.ctfassets.net/23aumh6u8s0i/6qFuzdUapqebxBxcjKTuqq/618c73cc99d798275096c6ca3bec8d4e/getting-authentication-events-in-realtime-with-auth0-and-pusher-create-auth0-client)

For the tech, choose React.

![Setting up Auth0 Quickstart](https://images.ctfassets.net/23aumh6u8s0i/2MsPsaGP8j7KIzcM5ZXYHy/9cc5b398aeabdac1a906fb557a774535/getting-authentication-events-in-realtime-with-auth0-and-pusher-auth0-choose-tech)

This will give a sample project and some instructions to get you started. Download the project.

![Downloading Auth0 Quickstart](https://images.ctfassets.net/23aumh6u8s0i/1dUU7kJ5KypGPyDQiF27hI/eb728a3d47e4a3fd854174b2eb31ba63/getting-authentication-events-in-realtime-with-auth0-and-pusher-auth0-sample-proj)

Next, go to the *Settings* tab and in the *Allowed Callback URLs* text field, enter *http://localhost:3000/login* (or whatever host and port you're planning to use to host your login app). This is required so Auth0 can authenticate users in your app and send a callback with the success or error.

![Auth0 Client Configuration](https://images.ctfassets.net/23aumh6u8s0i/5lLP8EjEmzeT8jwchQvwpP/6e2a43b95260c6797fe6a33be1f6c8ee/getting-authentication-events-in-realtime-with-auth0-and-pusher-set-allowed-callback)

A database to store your users is enabled by default. You see it in the *Connections->Database* section.

![Auth0 Database Connection](https://images.ctfassets.net/23aumh6u8s0i/1FoyWo83TrP0feqxHBJbdQ/d6b3dd267d0d796892d2f44f202cf773/getting-authentication-events-in-realtime-with-auth0-and-pusher-connections-db)

Also, for social logins, only Google is enabled by default with some sample development keys. You can see it in the *Connections->Social* section.

![Auth0 Social Connections](https://images.ctfassets.net/23aumh6u8s0i/3jYxZmVSCP1sUxhbezpkWs/537b6c19a2f7d9455cddd86cf035f832/getting-authentication-events-in-realtime-with-auth0-and-pusher-connections-social)

Now go to the *Rules* section.

![Auth0 Rules](https://images.ctfassets.net/23aumh6u8s0i/4B3dtmy6UvsQFbHlmPwT7f/8bb54eb4a820fca359f3c0c23742d6cd/getting-authentication-events-in-realtime-with-auth0-and-pusher-rules-first-time)

Rules are JavaScript functions that are executed in Auth0 every time a user authenticates to your application to extend Auth0's capabilities. You can learn more about them in the intro of this section or in the [rules documentation](https://auth0.com/docs/rules).

When creating a rule, you can choose one of many pre-defined templates depending on what you want to do.

![Auth0 Rules Templates](https://images.ctfassets.net/23aumh6u8s0i/61a49YXQ4v5KxZ5MqHz8dr/437013ad071604c2cde507de6e060d80/getting-authentication-events-in-realtime-with-auth0-and-pusher-pick-rule-template)

You can click on as many templates as you like to see their code; the rule won't be saved until you explicitly save it. For our purposes, we're going to choose the *empty rule* template.

![Auth0 Creating a rule](https://images.ctfassets.net/23aumh6u8s0i/72EM6NqdGLEGrStkHAuX1Q/7577f550910425e9616c320882c1f6ea/getting-authentication-events-in-realtime-with-auth0-and-pusher-create-rule)

The function has the following arguments:

- `user`. The object with the user information. This will vary depending on the identity provider the user used to authenticate, but you can see the general structure of this object [here](https://auth0.com/docs/user-profile/user-profile-structure).
- `context`: An object containing information of the authentication. You can find a complete list of context properties [here](https://auth0.com/docs/rules/context).
- `callback`. A function to send the result of the function and the (potentially modified) user and context objects back to the login app. It's important to always call this function, or else the script will timeout.

So let's start by requiring the Pusher module:

``` javascript
function (user, context, callback) {
  var Pusher = require('pusher@1.2.1');

  callback(null, user, context);
}
```
The code of this function runs in a JavaScript sandbox on [webtask.io](https://webtask.io/) where you can use ECMAScript 5 and some supported sandbox modules (see the modules supported [here](https://tehsis.github.io/webtaskio-canirequire)). Luckily, Pusher is of them.

Now, remember your Pusher app info? We'll need it here to create the Pusher instance:

``` javascript
function (user, context, callback) {
  ...

  var pusher = new Pusher({
    appId: '<INSERT_YOUR_PUSHER_APP_ID>',
    key: '<INSERT_YOUR_PUSHER_APP_KEY>',
    secret: '<INSERT_YOUR_PUSHER_APP_SECRET>',
    cluster: '<INSERT_YOUR_PUSHER_APP_CLUSTER>',
    encrypted: true
  });

  callback(null, user, context);
}
```
The next line introduces the concept of user metadata:

``` javascript
function (user, context, callback) {
  ...

  user.app_metadata = user.app_metadata || {};

  callback(null, user, context);
}
```
If we want to store additional information about a user, Auth0 recommends to do it in a property of the user object called `app_metadata`.

We'll want to make a distinction between a sign up and a log in, however, since Auth0 doesn't have a way to tell us this. We'll have to set a flag manually, so this line creates an empty object if `app_metadata` is empty (which will be the case at sign up).

Moving on, let's define the channel where we will be publishing and the default event (when the user signs up). Events are the primary method of packaging messages in Pusher. Learn more about them [here](https://pusher.com/docs/client_api_guide/client_events).

``` javascript
function (user, context, callback) {
  ...

  var channel = 'auth0';
  var event = 'user-signedUp';

  callback(null, user, context);
}
```
We're going to send the user object to Pusher, so let's create a [deep copy](https://blog.imaginea.com/deep-copy-in-javascript/) of this object (so neither this or the original object can be affected by later modifications) and add the name of the country where the user is logging in from the context object:

``` javascript
function (user, context, callback) {
  ...

  var userClonedObj = JSON.parse(JSON.stringify(user));
  userClonedObj.country = context.request.geoip.country_name;

  callback(null, user, context);
}
```
Next, we check if there's a `signedUp` flag because this would mean that the event is a log in and we'd have to change the event name. If it doesn't exist, the event is a sign up so we set it and update the user object with the function `auth0.users.updateAppMetadata`.

``` javascript
function (user, context, callback) {
  ...

  if (user.app_metadata.signedUp) {
    event = 'user-loggedIn';
  } else {
    user.app_metadata.signedUp = true;
    auth0.users.updateAppMetadata(user.user_id, user.app_metadata);
  }

  callback(null, user, context);
}
```
Finally, we send the object to Pusher.

``` javascript
function (user, context, callback) {
  ...

  pusher.trigger(channel, event, userClonedObj);

  callback(null, user, context);
}
```

You can check the full code of the function in this [gist](https://gist.github.com/eh3rrera/00ee1aeb462777736f4e441694662c5d).

Now, let's test the integration with Pusher. Open the debug console of your app on the [Pusher dashboard](https://dashboard.pusher.com) in another window/tab. Then, back to your rule, click the *Try this rule* button with some dummy data.

![Testing Auth0 Rule](https://images.ctfassets.net/23aumh6u8s0i/6aqJQKSeLqby54ApYvETO4/0d2720da2fe9d2a77a005c6ae6be0c71/getting-authentication-events-in-realtime-with-auth0-and-pusher-try-rule)

In the [Pusher dashboard](https://dashboard.pusher.com), you'll see the event when it's sent to Pusher:

![Pusher debug](https://images.ctfassets.net/23aumh6u8s0i/6OKD5mDi4m5JaPh1DkftFv/95c1b1ddee81752c66185ee035976ba3/getting-authentication-events-in-realtime-with-auth0-and-pusher-debug-pusher)

Now let's set up a sample login page with Auth0.

## Setting up a login page with Auth0

For this tutorial, we're just going to use the demo project you downloaded when the Auth0 client was created (if you don't have it, return to the *Clients* section and go to the *Quick start* tab).

Unzip it, `cd` into it, and execute `npm install` to download the dependencies. Then, execute `npm start` and open in a browser `http://localhost:3000`. Something like this should be shown:

![Auth0 Lock](https://images.ctfassets.net/23aumh6u8s0i/3gpaPPcUB46Nz7uHm33Dsz/a654eb53c98b54d5c4ffd9ccefb8835f/getting-authentication-events-in-realtime-with-auth0-and-pusher-login-01)

Leave it open, we'll return to it in a few moments.

## Creating a realtime feed with Pusher and React

We'll use [Create React App](https://github.com/facebookincubator/create-react-app) to create this feed application. You can install (or update) it with:

``` bash
npm install -g create-react-app
```
And create the project with:

``` bash
create-react-app auth0-pusher-feed
```
Next, `cd` into your app's directory and install the Pusher module with either NPM or Yarn:

``` bash
yarn add pusher-js
or
npm install --save pusher-js
```
Let's modify the file `src/App.css` to give a custom style to our application:

``` css
.App {
  text-align: center;
}

.App-header {
  background-color: #222;
  padding: 20px;
  color: white;
}

.evts {
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
  padding: 1.5em 2em;
}

.evts .evt {
  margin-bottom: 1.1em;
  padding-top: 1.5em;
  line-height: 1.5em;
}

.evts .evt + .evt {
  border-top: 1px solid #000;
}

.evts .evt-name {
  color: #172935;
  font-weight: bold;
  margin-bottom: 1em;
}

.evts .evt-email {
  font-weight: bold;
}

.evts .evt-date {
  margin-top: 0.5em;
  font-style: italic;
}

.evts .evt-from {
  font-style: italic;
}
```
Now go to `src/App.js` and change the `render` method to:

``` javascript
render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Realtime Feed with Auth0 + Pusher</h2>
        </div>
        <Events events={this.state.events} />
      </div>
    );
}
```
Our React app will have an `Events` component that will be the container of `Event` components:

![React app structure](https://images.ctfassets.net/23aumh6u8s0i/4cFXmLtg1yIL7KcjBG67iz/7c14530a3403a9da8b8cfac1bdb38f18/getting-authentication-events-in-realtime-with-auth0-and-pusher-react-structure)

So let's import the modules we'll use:

``` javascript
...
import Events from './Events';
import Pusher from 'pusher-js';

class App extends Component {
  ...
}
```
In the component's constructor, define an array to hold the authentication events as the state and bind the function that will update this array:

``` javascript
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      events: [],
    };
    this.updateEvents = this.updateEvents.bind(this);
  }
  ...
}
```
In [componentDidMount()](https://facebook.github.io/react/docs/react-component.html#componentdidmount), let's set up Pusher, subscribe to the `auth0` channel and bind the events `user-signedUp` and `user-loggedIn` (these identifiers were defined in the Auth0 rule):

``` javascript
class App extends Component {
  ...
  componentDidMount() {
    this.pusher = new Pusher('<INSERT_YOUR_PUSHER_APP_KEY>', {
      cluster: '<INSERT_YOUR_PUSHER_APP_CLUSTER>',
      encrypted: true,
    });

    this.channel = this.pusher.subscribe('auth0');
    this.channel.bind('user-signedUp', this.updateEvents);
    this.channel.bind('user-loggedIn', this.updateEvents);
  }
  ...
}
```
For this simple example, we're going to show the messages of the sign up and log in events in the same feed. This way, the `updateEvents` function just has to insert the object we're receiving at the beginning of the `events` array:

``` javascript
class App extends Component {
  ...
  updateEvents(data) {
    this.setState({
      events: [ data, ...this.state.events ],
    });
  }
  ...
}
```
The events are passed as a property of the `Events` component, which translates it to`Event` components:

``` javascript
import React, { Component } from 'react';
import Event from './Event';

export default class Events extends Component {

  render() {
    const eventsMapped = this.props.events.map((result, index) => {
      const key = this.props.events.length - index;
      return <Event event={result} key={key} />
    });

    return <div className={'evts'}>
             {eventsMapped}
           </div>;
  }
}
```
Finally, this `Event` component just extracts the properties we want to show and renders them:

``` javascript
import React, { Component } from 'react';

export default class Event extends Component {

  render() {
    const {email, updated_at, country} = this.props.event;
    const event = this.props.event.app_metadata.signedUp ? 'Log In:' : 'Sign Up:';
    return (
        <li className={'evt'}>
          <div className={'evt-name'}>{event}</div>
          <div className={'evt-email'}>{email}</div>
          <div className={'evt-date'}>{updated_at}</div>
          <div className={'evt-from'}>From {country}</div>
        </li>
    );
  }
}
```
At this point, if we want to run it, we'll have a problem because the login app is already listening on the port 3000. We can solve this by creating a `.env` file to specify another port, let's say 5000:

``` bash
PORT=5000
```
And that's it, let's test it.

## Testing the application

Make sure the login and the feed apps are running by executing `npm start` on both.

Click on the *Login* button and sign up with either your Google account or by entering an email/password:

![React quickstart login](https://images.ctfassets.net/23aumh6u8s0i/1KzSx1Ps8E3q0qqQJ1GkKm/76d68dbd55c9bee3509d82866fc1f8bd/getting-authentication-events-in-realtime-with-auth0-and-pusher-login-popup)

When you log in or sign up in one app, the event will be shown in the other one.

![React app final](https://images.ctfassets.net/23aumh6u8s0i/HEeFqSaPj9boLjY4t89XB/d4fb518b0440562e5a33249ec6c07261/getting-authentication-events-in-realtime-with-auth0-and-pusher-final-app)

> Auth0 provides the simplest and easiest to use [user interface tools to help administrators manage user identities](https://auth0.com/user-management) including password resets, creating and provisioning, blocking and deleting users. [A generous **free tier**](https://auth0.com/pricing) is offered so you can get started with modern authentication.

## Conclusion

In this tutorial, we have seen how to integrate two services to implement complex functionality that would have been difficult to implement manually.

We learned how to implement a basic authorization mechanism with Auth0 and extend it with rules. We also learned how to create realtime applications with Pusher's publish/subscribe model.

Of course, you can extend these applications by adding more login options, publishing more information, chaining other rules, or by using charts, for example, to present the information in other ways.

Remember that you can find the code of the feed in this [repo](https://github.com/eh3rrera/auth0-pusher-feed) and you can learn more about [Auth0](https://auth0.com/docs) or [Pusher](https://pusher.com/docs/) in their documentation and by creating free accounts for both services.