Create a Login and Sign Up Page with Auth0 + Ionic Tutorial

auth0-login-sign-up

We are going to create a login/signup page with Auth0. This will build off of the last blog post which  was Create a Login and Sign Up Page with Auth0 + Ionic Tutorial. I’m not going to cover setting up your Auth0 account in this blog post. I’ll post how to set that up on a post of its own where we will experiment with auth0 rules and set the stage for using it to provision a Cloudant database. If you already know how to setup Auth0 then you’ll be able to see all this working by the time you’re done here.

Here are a couple of relevant tutorials that I referenced:

  1. Experimenting with auth0 passwordless email authentication in angular 2.4.1
  2. Ionic Blog – Ionic with Auth0
  3. Auth0 Authentication API

Ben’s blog post is for serverless passwordless authentication. This means that the user can login by inputting their email address. The user will get a unique and time sensitive code to authenticate through the application. The route that I wanted to go was the traditional username/password login / signup process. If you read the Authentication API, you could also use social login with providers such as Google, Facebook, Twitter, etc.

Auth0 does provide Auth Lock which makes it easy to plug into your application. In fact, Auth0 has a great start app that has it working already. The only issue is that it did not work in the iOS emulator. So, I decided to use the Auh0 Authentication API instead and develop my own version of the Auth0 Lock.

If you are building a desktop application, I am sure Auth0 Lock will work for you instead of building a custom version of it. I will more than likely stick to my customized version whenever I build a desktop app. I enjoy being able to apply my own styles even though Auth0 Lock allows you to create your own.

Let’s start laying in the ground work. Start by installing Angular2-jwt.

 npm install angular2-jwt 

Put this script in the src/index.html file below the Title tags.

 <!-- Auth0.js script -->
<script src="https://cdn.auth0.com/w2/auth0-7.6.1.min.js"></script>

Generate the authentication provider:

 ionic g provider AuthenticationService 

Lets go ahead and update our app.module.ts page by importing the AuthenticationService we just created. We are going to create the LoginSignUpPage and AuthloadingPage shortly but let’s go ahead and take care of importing it now as well.

Your app.module.ts page should reflect this:

import { HomePage } from '../pages/home/home';
import { AuthloadingPage } from '../pages/authloading/authloading';
import { LoginSignUpPage } from '../pages/login-sign-up/login-sign-up';

import { PouchDBService } from '../providers/pouch-db-service';
import { FriendService } from '../providers/friend-service';
import { AuthenticationService } from '../providers/authentication-service';

Also update the providers array:

 providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, PouchDBService, FriendService, AuthenticationService] 

Here is the code for the Authentication Service:

I’m going to dedicate a separate blog post on setting up your Auth0 account and getting your Client ID and Domain. For now you can use these placeholders below.

Its up to you but I stored my authentication information in src/auth0-variables.ts. Here is the code to put in that file.

export class Auth0Vars {
static AUTH0_CLIENT_ID = “YOUR_CLIENT_ID”;
static AUTH0_DOMAIN = “YOUR_AUTH0_DOMAIN”';
static AUTH0_CALLBACK_URL = location.href;
}

That’s all the code for most of getting Auth0 setup on your client. Now we need to actually use it. Next we are going to:

Create the Login/Sign Up Page
Route the app through the login/sign up page and prevent access to the Home.ts page where we manage our friends. After all, we need to protect our list of friends, right??

 ionic g page LoginSignUp 

Here is the code for the page. See comments inside. We are going to create some simple starter form validation checks just to prevent users from submitting null or empty values to the form. Remember to add your own custom styles to give the user feedback of form errors.

TypeScript is probably throwing you an error if you didn’t notice:

 import { ValidatorsCustom } from '../../validators/validators'; 

This is a simple validator to check email formatting and matching passwords. Put this file in:

 src/validators/validators.ts 

Here is the validation code:

Here is the HTML for the view. We are going to setup a simple Ionic Segment which is a lot like the Auth0 Lock where you can swap between a Login view and Sign Up view. The app will default to Login. You can change that in the component by setting the loginSignUp variable to “signUp” instead of “login”

public loginSignUp: string = "signUp";

Up to this point we have a few things going for us. We have a functional PouchDB and we have our Home page which allows us to manage friends. We also have our Authentication provider setup that will work with the Login and Sign Up page.

We can’t just route the user to the Login / Sign Up page when the app starts up. You would think, lets just go to the app.component.ts and set the root page to the Login / Sign Up page. However, once the user is using the app, we will be saving a refresh token and we can allow those to expire and kick the user out.

If the user is logged, we don’t want to flash them the Login / Sign Up page. We don’t want them to think for even a second that they have to log back in. Everyone hates doing that and we only make exceptions to banks or other sensitive information.

A common solution I have found is to create a blank view. In the component of the blank view, you’ll run your authentication validation code. In the view you could create a little spinner or something that says “hey, we are authenticating you real quick.”

Let’s set this up.

 ionic g page authloading 

Here is the code for the authloading.ts page.

The view is blank and super simple. Here it is.

One more step, lets go back and update the Home.ts file where manage the Friend list. We need to update it to handle logging out.

If you worked through Setting Up Ionic with PouchDB then you need to make these updates. This involves importing then AuthenticationService and LoginSignUp pages. We also need to use the Navigation Controller to push the user back to the Login/SignUp page when the user logs out.

Here is the code for the Home.ts component:

Here is the code for the Home.html view. You’ll notice that we test if the user is authenticated. Some parts of this view will not work your Auth0 account is setup and all your client information is provided in the steps above.

Alright! We have all the pieces of the puzzle. Let’s make the final connection in the app/app.component.ts file. These changes are simple. We need to import the AuthloadingPage and the AuthenticationService.

Next, make the following changes in the app.component.ts file. We are just setting the rootPage to the Authloading page to determine Authentication status. We are also going to kick off a startupTokenRefresh.

This is more on the startupTokenRefresh in the Ionic Auth0 blog post I referenced above.

Finally! That was a lot to take in. Now we have Auth0 setup. This post has gotten super long. In the next blog post I’ll go through setting up your Auth0 account and creating rules so that you can see that everything is working. In the next post we will go over Setting Up Your Auth0 and IBM Bluemix Cloudant Account.