Setting Up Your Auth0 and IBM Bluemix Cloudant Account Tutorial

IBM Bluemix Create App

In this tutorial we are going to set up your Auth0 and IBM Bluemix Cloudant accounts. In the previous tutorial we Created a Login and Sign Up Page with Auth0 + Ionic Tutorial. The good news is they both have a free tier which is perfect for MVP’s or just experimenting. If you don’t know already, Cloudant is a NoSQL database that has the same replication protocol as PouchDB and CouchDB. We are setting up a “database per user” architecture. This means that each user has their own database with their own information.

In the previous tutorials we worked on getting the client side setup with a local database that allows us to add and delete friends. We also prepared an authentication service that will work with Auth0 once we have it all setup. Once we are done with this tutorial you will have an app that has Authentication and a remote database.

Let’s start with setting up Cloudant because we will need your account credentials to complete the Auth0 part of this tutorial.

Go to IBM Bluemix to setup your account. Here is a link:

IBM Bluemix Registration

Follow the sign up steps. Once you’re signed up, click on “Create App” then click on “Data & Analytics.”

bluemix create app

You’ll see a lot of overwhelming information if you’re new to IBM Bluemix. Just search for “Cloudant NoSQL DB.” Once you click on that, you’ll be presented with this screen.

cloudant lite plan

Create an account with the “Lite” tier which charges you based on storage rather than per API calls. This is great because the continuous replication between PouchDB and Cloudant can add up quickly as Ben mentions in his blog post.

After you click create, you’ll be taken to your new database. Click on the “Service Credentials” tab. On the right side, you’ll see a table and a drop down button that says “View Credentials.” Take note of the credentials JSON. Keep this safe and private. We will need this when we go to Auth0 and give Auth0 the access credentials to provision to set up the cloudant database.

cloudant credentials

That’s all there is to setting up the Cloudant Database! We will actually go into later to see it working.

Let’s move on to setting up our Auth0 account.
Go to this link to setup your Auth0 account. Once you login, you’ll be prompted with what type of app you want to create. If not, go to “Client” and create a “New Client.” We will be setting up a “Regular Web App.” You can ignore selecting the type of app. This just takes you to a quick start guide.

auth0 select app type

If you haven’t read the introduction to this series you may be wondering why we didn’t choose “Native.” We aren’t trying to use Auth0 Lock or follow the guidance in the quick start for Ionic. You can if you like but I had a hard time getting Auth0 Lock to work with the iOS simulator and I didn’t want that to be a problem down the road. Besides, it’s more fun to use the Authentication API… right??

Anyway, go to “Settings.” We have a few things we need to change and a few things to take note of.

auth0 settings

Take note of your Domain and Client ID. These are the 2 key/value pairs we need to plug into the auth0-variables.ts page we created in the previous tutorial. Here is a screenshot of the settings which really is just our Callback URL’s and Allowed Origins (CORS). We are testing this locally so you’re probably on “http://localhost:8100/. If not, change these as needed.

When you signed up you were automatically set up a Auth0 database. You can find this under the “Connections” page. This database is used to manage users. There’s a lot of possibilities here including creating your own custom database for users but we don’t have to change anything for this simple starter tutorial.

auth0 database connections

Let’s move on to creating our rules. Auth0 rules are a Function-as-a-Service (FaaS). This means that you can trigger custom functions as a user does something. In Bens blog post we experimented with tracking how often a user logs in and a few other features. You can also access the user objects and methods provided by Auth0.

auth0 rules

In our case we are going to use these Auth0 FaaS rules to make an API call to Cloudant to create a database for each user. This information will be stored in their app_metadata which is critical information specific to each user. This way when the user logs in, the app knows their access credentials to their cloudant database.

Let’s start. Go the Rules page and click on “Create Your First Rule.” We will be creating an “Empty Rule.” I called the rule “addCloudantInfo” which is the name of the function. This code is about 95% the same as Ben’s code in his post about provisioning a Cloudant Database with Auth0. The main difference is in the “getDatabaseName()” function where I’m setting the database name to be the first part of the user’s email address and adding a random hash at the end.

Type in this code then click “Save.”

Once it saves, click on the “Rules” page again. Now you will be able to create variables that the Rules engine can use. This is where we will input our Cloudant credentials and store them securely.

Go ahead and create your variables as shown in the image below. If you’re interested in the 1st 2 rules, go check out Ben’s post where we experimented with the Auth0 rules engine.

There is a few updates we have to make to the authentication-service.ts. In each of the HTTP calls we have to modify the credentials object. There is key called “connection” and that must match your Auth0 Database name. By default, its “Username-Password-Authentication.” If you didn’t edit that name then you may not have to do anything.


let credentials = {
client_id: Auth0Vars.AUTH0_CLIENT_ID,
username: username,
password: password,
connection: "Username-Password-Authentication",
scope: 'openid offline_access',
device: 'Mobile device' //stats recorded on dash where user logged in
}

Next make sure that the domain is correct in the HTTP calls. Replace where I said DOMAIN with your domain name in each of these “https://DOMAIN.auth0.com”.

Now you can rebuild your app and you should be able to login and sign up! After you sign up and login check out the console and you should see a CouchDB object which is your users Cloudant credentials. Check out this screenshot:

auth0 response credentials

That’s all for setting up our Auth0 and Cloudant accounts! However, there’s a few outstanding issues. The PouchDB being set up is still fixed to “tutorial” and it’s not specific to each user yet. We will fix that in the next tutorial where we will explore the database-per-user setup in more detail and put the final touches on this app.