4 Steps: Auth0 Authentication with Cloudant/PouchDB and Ionic

BenNadel Articles

BenNadel Articles

This is an introduction to a series of blog posts on getting Auth0 Authentication with Cloudant/PouchDB and Ionic. We will be setting up a “database per user” architecture. This means that each user has their own database with their own information. This works nicely in some use cases. Each user will have their own local/client PouchDB which will directly sync with their own remote Cloudant database.

I’ve been digging around trying to figure out this setup for a while. As you can see in the picture above, I printed out all the relevant tutorials and took notes!  I rarely print out anything by the way. I’m super excited to be sharing this series with the JavaScript community! I’ve spent long enough on the side lines consuming help rather than giving back.

This is the final project on GitHub.

  1. Setting up Ionic with PouchDB
  2. Create a Login and Sign Up Page with Auth0 + Ionic Tutorial
  3. Setting Up Your Auth0 and IBM Bluemix Cloudant Account 
  4. Syncing the Local PouchDB with the Remote Cloudant Database

My motivation

When I started to learn to code, I wanted focus on building value-added features for the user. I wanted to work on features that would prove that someone would want to use my product. That’s where all the fun and motivation is! When you’re building apps after work as your “side-hustle” you need to be able to leverage your time. Being able to use open source libraries or “free-tier” developer services are perfect. You can use them to leverage building out standard features like authentication. You can worry about scale and costs when your minimal viable product (MVP) takes off. At that point, you’ll have a different and good problem on your hands. Once you get to that point, you may want to build a custom authentication service for your app to save on costs.

I was using SuperLogin and SuperLogin Client for my application. I was hosting a NodeJS server which served the SuperLogin library. I teamed up with Josh Morony to experiment and get it working. He wrote a blog post about how to set it up here. I spent a lot of time learning those libraries they work and making it work for my application. At one point, Ionic swapped out Webpack for Rollup as the module builder. That broke my apps dependencies for SuperLogin Client. It provided a lot of helper functions to communicate with SuperLogin. When that happened, I spent time re-creating those from scratch.

Swapping Authentication Providers

It wasn’t until I ran across Ben Nadel’s blog that I understood how you could use Auth0 with Cloudant. This was a set series of posts I’ve been waiting to read for a long time. He put up a series on how to use serverless and passwordless authentication with Auth0. Passwordless authentication works by entering your email address and having the provider email you a code to login. In this series of blog posts, I’ll go over exactly how I combined his knowledge with some blog posts by Auth0.

Its up to you but definitely check out Ben Nadel’s series of blog posts before or after this series. I’m going to stick with his example on creating an app that allows you to save a list of friends. I think that’ll help with continuity between my post and his. I did ask for his permission to use his example code.

Read Ben Nadel’s Blog Related Auth0 Blog Posts

  1. Configuring PouchDB After Login For A Database-Per-User Architecture In Angular 2.4.1
  2. Experimenting With Auth0 Passwordless Email Authentication In Angular 2.4.1
  3. Provisioning Cloudant / CouchDB Databases From Auth0 For A Database-Per-User Architecture In Angular 2.4.1
  4. Associating Auth0 Rules With Specific Auth0 Clients In Angular 2.4.1
  5. Posting Additional Parameters During Authentication With Auth0 In Angular 2.4.1
  6. Syncing Local PouchDB Data With Remote IBM Cloudant Database In Angular 2.4.1