Simple Login & Registration with Angular and Nativescript

I discovered Nativescript about a month ago. This is the first time in years I have truly been excited about a framework! I have been curious about mobile development for years, but Nativescript is the first mobile development framework I have found where I said to myself “OK, I can actually see writing and maintaining code for a mobile app”.

I huge part of my learning has been a result of the excellent work by Nic Raboy. You can find his work at https://www.thepolyglotdeveloper.com. Check out his blog for a number of excellent posts on Nativescript. This tutorial will be an extension of this blog post Nic did on Login and Registration. Before going any further, complete Nic’s tutorial or clone this repo and git checkout intial_commit .

We will make two enhancements to Nic’s tutorial. First, we will display the user’s name after logging in. Second, we will add the ability to create more than one user.

Multi-User Login

Let’s tackle the 2nd part first. Currently, each time we register a user, we are setting a local storage variable equal to ‘account’. You can see that in register.component.ts, line 3 below:

src/app/components/register/register.component.ts

Instead we will set this string equal to the email address the user enters:

src/app/components/register/register.component.ts

The next thing we need to do is change the login component so we are retrieving the user based on the email address they enter:

src/app/components/login/login.component.ts

Here in line 3 we are finding (getString) the user based on their email.

Now if you create multiple users, you should be able to login as each users. Previously, the previous user who registered was destroyed when a new user was created.

Display CurrentUser

Now let’s display the users name when they login. Doing this will allow us to sanity check the work we just did, by seeing the respective users name on the screen when we login.

As Nic points out in this Youtube Video there are a couple of ways to do this. The solution I will implement here is the second solution Nic shares in is video which is using shared provider to allow access to the logged in user.

First, we’ll want to create the file shared-data.ts in the app folder (though you can put it anywhere you like). The contents of the file should look like this:

src/app/shared-data.ts

Next let’s go to app/app.module.ts and add the following code:

src/app/app.module.ts

This file is probably pretty busy, but you only need to add an import statement for your shared-data.ts file and also add Data to your providers. This now allows us to inject data across our application.

Now go to login.components.ts and make it look like this:

src/app/components/login/login.component.ts

Note in line 1 above we need to add private data: Data as an argument to our constructor and also we have added is this.data.storage = account.email; (line 12). Now go to secure.components.ts and add an import statement for the shared-data file as well as a currentUser variable. Here is the entire file:

src/app/components/secure/secure.component.ts

The key here is lines 12 and 20. In line 12 we create the current user variable and in line 20 we set that variable equal to this.data.storage. along with an else statement; we only set currentUser if the user is authenticated. Also, don’t forget to import the shared-data file at the top and add the data constructor argument.

Now in secure.component.html we only need to display the currentUser variable (line 5 below):

src/app/components/secure/secure.component.html

You can clone a repo of this project here and note that init and final commits in the repo. Please leave me a comment if something is not right in the code, or my language regarding either Nativescript or Angular off a bit.

Good luck and happy coding!