Avoid Tedious Signup Forms With Auth0 and Clearbit
A guest post by Diego Poza, Head of Content @ Auth0
TL;DR
Integrating Auth0 and Clearbit can make the signup process as smooth as possible. In this article, we will see how to combine these amazing solutions to automate signup forms, which can lead to improved conversion rates.
Introduction
Signup forms play a major role on conversion rates, for better or worse. We don't want to ask for too much information upfront, otherwise we will add friction and reduce the total number of signups. But, on the other hand, we can get a lot of value from knowing more than a user's email address. For example, if we have enough data about our customers, we can send highly personalized onboarding emails to increase adoption and ultimately conversion.
This tricky situation is what we are going to tackle throughout this article. Here, we will see that we can solve this issue by making the signup process smooth, with Auth0, and by automatically enriching users' profiles, with Clearbit.
What is Auth0
Auth0 is an enterprise-grade platform for modern identity. The company provides tools that eliminate the friction of authentication for applications and APIs. With it we can easily and quickly connect our apps, choose identity providers to rely on, set up sign in and sign up rules, and customize our login page. It really is identity made easy for developers.
What is Clearbit
Clearbit is a company that provides intelligence about customers and their workforce to help our business grow. By using Clearbit, we can get access to valuable information about our users without even asking for it. We can check their role on the company that they work for, get the company size, and use this data to help our marketers and salespeople to outperform the competition.
Signing Up for Auth0
The signup process to Auth0 is quite simple. Let’s head to Auth0’s website and click on the Sign Up button at the top. This link will bring up a beautiful component that will allow us to sign up, or log in if we already own an Auth0 account.
On the demo application that we are going to develop, we will use exactly the same component as Auth0 in the sign up/sign in process. This component is called Lock and is an open source project that Auth0 made available on GitHub. Lock is very easy to configure and to extend, as we will see soon.
For now, let’s just choose one of the available signup options to complete the account creation. After choosing it, Auth0 will ask some questions about how we intend to use its solutions and then we will be good to go.
Signing Up for Clearbit
Now that we have our Auth0 account, let’s go to Clearbit and create an account there as well.
Creating Our Project
Having both the Auth0 and the Clearbit accounts created, we can now focus on the demo application that we are going to build. We will go step by step, creating and configuring everything that we need. But, if you prefer, you can download the fully configured demo app from GitHub.
Node and npm are expected to be installed on the development computer so, if you don't have them, please follow the installation instructions on npm's website.
To start, let's go through the following commands:
mkdir auth0-clearbit
cd auth0-clearbit
npm init -y
npm install --save angular-jwt angular-lock auth0-js clearbit
npm install -g http-server
The first two commands issued are responsible for creating a directory for our application and for changing the current working directory to it. The third command, npm init -y, is responsible for making this directory the root folder of our demo app, by creating a package.json file that will hold the details about our project.
The last two commands are responsible for installing all the dependencies that our application have. The first one of them install runtime dependencies, and the later installs a npm module that runs a lightweight HTTP server that is perfect to test our application.
The next step that we will perform is to create the index.html file in the root directory of our application. This file will have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Next Big Thing</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body>
<div class="container" ng-app="myApp">
<div class="row">
<div class="col-xs-12" ng-controller="homeController as homeCtrl">
<h1>Next Big Thing</h1>
<div class="jumbotron" ng-show="!homeCtrl.isLoggedIn()">
<p>Welcome to my great, actually amazing, application.</p>
<p><a href="" ng-click="homeCtrl.login()">Sign up now</a>, it is ultra fast.</p>
</div>
<div class="jumbotron" ng-show="homeCtrl.isLoggedIn()" ng-cloak>
<h2>Completing Your Data</h2>
<p ng-show="homeCtrl.user == null">
Sit back and relax while we fetch your data.
<img style="width: 18px;" src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" />
</p>
<p ng-show="homeCtrl.user != null">
Please, confirm your data below.
</p>
<div class="form-group">
<label>Full Name</label>
<input class="form-control" ng-model="homeCtrl.user.enrichment.name.fullName">
</div>
<div class="form-group">
<label>Full Name</label>
<input class="form-control" ng-model="homeCtrl.user.enrichment.location">
</div>
<div class="form-group">
<label>Company</label>
<input class="form-control" ng-model="homeCtrl.user.enrichment.employment.name">
</div>
<div class="form-group">
<label>Position</label>
<input class="form-control" ng-model="homeCtrl.user.enrichment.employment.title">
</div>
<div class="form-group">
<label>Biography</label>
<textarea class="form-control" ng-model="homeCtrl.user.enrichment.bio"></textarea>
</div>
<button type="submit" class="btn btn-primary pull-right disabled" ng-show="homeCtrl.user == null">
Loading your data...
</button>
<button type="submit" class="btn btn-primary pull-right" ng-show="homeCtrl.user != null">
Go Ahead
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.auth0.com/js/lock/10.13/lock.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="node_modules/auth0-js/build/auth0.js"></script>
<script src="node_modules/angular-lock/dist/angular-lock.js"></script>
<script src="node_modules/angular-jwt/dist/angular-jwt.js"></script>
<script src="app.js"></script>
</body>
</html>
This is the only HTML file that we will create throughout this article and its contents are quite simple. The body section is divided into two parts. The first one is shown when the user is not logged in, and provides a link to sign up. The second one is shown after a successful sign up.
The magic for the user happens in the second part. Here they will face a form to complete the signup process. Usually the user would be responsible for filling this data but, with the help of Clearbit, the user does not have to fulfill these fields manually. The whole form is filled automatically by the data fetched by Clearbit.
To complete the demo application we still need to create the JavaScript file that will give life to our app. Let's now create this file, naming it app.js, and fill it with the following code:
(function () {
'use strict';
var myApp = angular.module('myApp', [
'auth0.lock',
'angular-jwt'
]);
myApp.config(function config(lockProvider) {
lockProvider.init({
clientID: 'ADD_YOUR_AUTH0_CLIENT_ID_HERE',
domain: 'ADD_YOUR_AUTH0_DOMAIN_HERE'
});
});
myApp.controller('homeController', function(lock) {
var ctrl = this;
ctrl.login = lock.show;
ctrl.loggedIn = false;
ctrl.isLoggedIn = function () {
return ctrl.loggedIn;
}
lock.on('authenticated', function (authResult) {
localStorage.setItem('id_token', authResult.idToken);
ctrl.loggedIn = true;
lock.getProfile(authResult.idToken, function (error, profile) {
if (error) {
return console.log(error);
}
profile.enrichment = profile.enrichment ? profile.enrichment : {};
ctrl.user = profile;
localStorage.setItem('profile', JSON.stringify(profile));
});
});
});
})();
This JavaScript file has three responsibilities:
- it creates an AngularJS module, called
myApp, that is used by ourindex.htmlfile - it configures the Lock component with our Auth0 Client ID and our Auth0 Domain
- it creates a
homeControllerthat controls our HTML page, defining what to show and when, and providing integration with Lock
Whenever a user signs up to our demo application, the Lock component gets an authenticated event with the authResult (authentication result) object. We then use the idToken property of this object to get the profile of the user that just signed up. As we can see in the code above, the Auth0 answer to the getProfile call will return to us a profile object that contains an enrichment property. This is the property that will hold all the employment data about our new user.
Attention! If you want to use Auth0 authentication to authorize requests to APIs, you'll need to use a different flow depending on your use case. Auth0 idToken should only be used on the client-side. Access tokens should be used to authorize APIs. You can read more about making API calls with Auth0 here.
It is important to note that this property is not part of the getProfile response by default. The data contained in this property will be fetched from Clearbit by an Auth0 rule that we are going to create soon.
Note that the source code above exposes two properties that must be changed: ADD_YOUR_AUTH0_CLIENT_ID_HERE and ADD_YOUR_AUTH0_DOMAIN_HERE. The values that we must add in the place of these two properties can be found in the Clients Page of our Auth0's Dashboard. In this page we will find all the clients created for our account–which will be just one if we haven't manually created any other–and choosing the Settings option of one of these clients will lead us to a page where we can find the properties.
From this page, we can copy the contents of the Domain field to replace ADD_YOUR_AUTH0_DOMAIN_HERE property in the JavaScript file, and then copy the contents of the Client ID field to replace the ADD_YOUR_AUTH0_CLIENT_ID_HERE property.
As the last step to properly configure our integration with Auth0, we will add http://localhost:8080 as the value of the Allowed Callback URLs field of this page. This configuration is important to allow our demo application to communicate with Auth0 when running it from our development machine. If we were to publish this demo application on a real server, responding on behalf of a real domain, we would need to add this domain to this field as well. Otherwise, Auth0 would deny, as a security measure, the integration.
Our demo application is now ready to run, and it is already working with Auth0 to allow users to sign up. But it still lacks the integration with Clearbit to automatically fill the personal data of the user signing up. Let's tackle this last task now.
Integrating Auth0 with Clearbit
Clearbit provides a RESTful API that is well structured, properly documented and easy to use. They also provide libraries for common development platforms–like Ruby, NodeJS, and Python–that make integration with their APIs even easier.
To complete our demo application we are going to use the NodeJS SDK, but we won't add it on our source code. We will perform this integration with Auth0 Rules.
Auth0 Rules are functions, written in JavaScript, that are executed in Auth0 as part of the sign in and sign up transactions every time a user authenticates to our application. These rules allow us to easily customize and extend Auth0's capabilities and, in our case, we will use them to make requests to Clearbit's APIs to fetch data from the user that is signing up.
To start this integration, let's head to the API Keys page on the Clearbit's Dashboard and copy the first key shown there, which Clearbit refers to as Secret API Key. This secret key will be used by our Auth0 rule to communicate with Clearbit's API, as we will see below.
Now that we have this key, let's head to the Rules page on Auth0's dashboard and click on the Create Rule button. After clicking on it we will see a page that allows us to start creating our rule based on a template. For now we will choose the first button, called Empty Rule, which will allow us to create a rule from scratch.
When we choose this option, we are redirected to the page where we will create the rule. On it, the first thing that we will do is to define the rule name to something like Clearbit Enrichment Rule. Below the rule name, there is a dark text area where we can add the code that will perform this enrichment. Let's add the following source code to the field:
function (user, context, callback) {
var clearbit = require('clearbit@1.2.3');
require('bluebird@3.4.6');
var clearbitClient = clearbit('YOUR_CLEARBIT_SECRET_KEY');
var Person = clearbitClient.Person;
// It is important to use `stream: true` because we need to
// wait for a response from Clearbit.
// `stream: false` can lead to Clearbit responding that the definitive response
// is queued and will be available in the future.
Person.find({email: user.email, stream: true}).nodeify(function (err, person) {
if (!err) {
user.enrichment = person;
}
callback(null, user, context);
});
}
Auth0 rules are expected to hold a single function, as shown above, that have access to three arguments:
user– that holds all the user's data, like email, name and etccontext– an object containing contextual information of the current authentication transaction, such as user's IP address, application, location and so oncallback– a function to send back the potentially modified user and context objects back to Auth0 (or an error)
In our rule, we change the user object by adding data that we fetch from Clearbit. This is done with the help of the clearbit-node npm module that we require on the second line of the code above, and by calling the Person.find function on this module. Note that before running our application, we must change the YOUR_CLEARBIT_SECRET_KEY property in the source code above with the Secret API Key that we copied from Clearbit's dashboard.
This was the last step that we needed to perform before being able to run our demo application. Therefore we can head to our app's directory and run http-server on it. After running this command we can open http://localhost:8080 on a web browser and test the signup process with automatic enrichment.
Conclusion
As you can see, integrating Auth0 to Clearbit to enrich our users' profiles is a piece of cake. We just need to create a single rule, on Auth0, that communicates with Cleabit's API and we are good to go.
Note that the demo application that we've just built is just a proof of concept and its workflow could be improved even more. We could, for example, avoid showing the form that asks for the employment data of our new users by relying on the data that Clearbit sends us.
Having a signup process that relies on Auth0 and Clearbit can give our users the best signup experience ever. With Auth0, users can signup by pressing a single button and with Clearbit they don't even need to fill tedious forms.
