This article is the follow up of [Angular 2+ and Ruby on Rails user authentication Part 1: Backend](https://medium.com/@avatsaev/angular-2-and-ruby-on-rails-user-authentication-fde230ddaed8#.tfr6zstyp)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

![](https://hackernoon.com/hn-images/1*EVCbusTvl_CBlfa96EhvYg.png)

### Intro

I will separate the frontend section into 3 different subsections:

1.  Conception & Bootstrapping/Configuring the project
2.  Building login/register
3.  Building Profile View and its Router Guard

So in this part we’ll do some conception, then bootstrap and configure our project with [Angular CLI](https://cli.angular.io), [Materialize](http://materializecss.com) for UI, and [Angular2Token](https://github.com/neroniaky/angular2-token) for user management on the frontend.

If you don’t want/need to do any of this, I prepared a bootstrapped and fully configured project for you ready to go, just pull this repo [https://github.com/avatsaev/angular-token-auth-seed](https://github.com/avatsaev/angular-token-auth-seed) and jump straight to [**part 3**](https://medium.com/@avatsaev/angular-2-and-ruby-on-rails-user-authentication-part-3-d938fcb7a334#.itibi1vqc).

![](https://hackernoon.com/hn-images/1*NMOpRPtOi4yOwLTSxL2i7g.png)

### **Layout/UI**

The UI of our application will be pretty simple, with a classic toolbar encapsulating the title & actions, and an area to display the current page’s content:

![](https://hackernoon.com/hn-images/1*TiyCo-WPydbGdShldK4mxA.png)

### **Application behaviour**

Initially, the application will display a welcome page in the content zone.

The **actions zone** will have two states, display **Login & Register** actions when user is not logged in, or display **Show profile & Logout** actions when the user is logged in, these states will switch in real time when the user logs in or out.

When the user clicks on **Login** or **Register** we’ll display a Modal Dialog with the appropriate form (Login or Register from).

When the user clicks on **Profile** action, we’ll display his profile data in the **content zone.**

![](https://hackernoon.com/hn-images/1*y5A6lIU6gNsNS64dsPKFIg.png)

When the user switches between Login and register modes, we’ll display the appropriate form in the same dialog.

When the user successfully logs in or registers, we’ll automatically close the dialog and redirect him to his profile page.

Pretty simple and straightforward stuff, so let’s dive right in.

### Bootstrapping and configuring the frontend

#### Installing Angular CLI

![](https://hackernoon.com/hn-images/1*yS2MA7tY-4a_l2j9ayheNQ.png)

Angular Team has created a very handy tool called [Angular CLI](https://cli.angular.io) that allows us to bootstrap and manage an Angular app easily from within terminal, install it globally via NPM:

$ npm install -g @angular/cli

#### Bootstrapping an Angular CLI project

$ ng new angular-token-auth --style=sass --skip-tests=true --routing=true

This command will generate a new Angular CLI project named **angular-devise-token-auth,** will use SASS as default styling format, for the purpose of this tutorial we’ll disable unit test files, and initialise the project with a routing module, because we’ll need at least 2 routes in our app, **Welcome Page** and **Profile Page**.

#### Using MaterializeCSS with Angular

![](https://hackernoon.com/hn-images/1*xfMmP4cfcooS0lr-p5SKYQ.png)

To build our UI, we’ll use [MaterializeCSS](http://materializecss.com), good news is, Materialize components are available for Angular with [angular2-materialize](https://github.com/InfomediaLtd/angular2-materialize) library, so let’s install it with its dependencies:

$ npm install `materialize-css angular2-materialize jquery@^2.2.4 hammerjs font-awesome --save`

Include dependencies and styles in **./.angular-cli.json** file:

![](https://hackernoon.com/hn-images/1*-ECg_pxStXi1QTKJ-P8nAA.png)

In **styles** array we’ll need the materialize stylesheet:

"styles": \[  
  "styles.sass",  
  **"../node\_modules/materialize-css/dist/css/materialize.css",  
  "../node\_modules/font-awesome/css/font-awesome.css"**  
\],

And in **scripts** array we’ll need jquery, hammerjs and materializejs:

"scripts": \[  
  **"../node\_modules/jquery/dist/jquery.js",  
  "../node\_modules/hammerjs/hammer.js",  
  "../node\_modules/materialize-css/dist/js/materialize.js"**  
\]

That way, Angular CLI will know what additional 3rd party libs to compile into our final bundle.

Next, we’ll need to **MaterializeModule** into our M**ain App Module** so we can use Materialize Components in our app**,** open **./src/app/app.module.ts** and import MaterializeModule

import { MaterializeModule } from 'angular2-materialize';

Then add it to **imports** array of our **AppModule**:

@NgModule({  
  declarations: \[  
    AppComponent  
  \],  
  imports: \[  
    BrowserModule,  
    FormsModule,  
    HttpModule,  
    AppRoutingModule,  
    **MaterializeModule**  
  \],  
  providers: \[\],  
  bootstrap: \[AppComponent\]  
})  
export class AppModule { }

### **Installing and Configuring Angular2 Token**

![](https://hackernoon.com/hn-images/1*gpqheFyLotOh4OLktbxVfg.png)

To make user management on the frontend easier, we’ll use [angular2-token](https://github.com/neroniaky/angular2-token) library, it was designed to work with [DeviseAuthToken](https://github.com/lynndylanhurley/devise_token_auth) gem that we used on our RoR backend for user management. Let’s install and configure it:

npm install angular2-token --save

Import and inject it into our **Main App Module (./src/app/app.module.ts):**

**import { Angular2TokenService } from 'angular2-token';**

@NgModule({  
  declarations: \[  
    AppComponent  
  \],  
  imports: \[  
    BrowserModule,  
    FormsModule,  
    HttpModule,  
    AppRoutingModule,  
    MaterializeModule,  
  \],  
  **providers: \[ Angular2TokenService \],**  
  bootstrap: \[AppComponent\]  
})  
export class AppModule { }

Next we’ll need to create a default configuration for it, considering configurations might be different in production and development environments, we’ll use Angular CLI’s env config files in **./src/environments** folder.

In this folder we have two files, **environment.ts** which will be used as default configuration store during development process and **environment.prod.ts** will be used for production when you build your app with Angular CLI’s **prod** flag (_ng build --prod_)

Angular2Token offers different configuration keys, you can check them out [here](https://github.com/neroniaky/angular2-token#configuration), but we will need only one, **apiBase,** which is the address of our backend server, considering Rails is running on port 3000 by default, the address will be **http://localhost:3000**.

Let’s create the config in **./src/app/environments/environment.ts**

export const environment = {  
  production: false,  
  **token\_auth\_config: {  
    apiBase: 'http://localhost:3000'  
  }**  
};

### **Initialize Angular2Token**

Now we need to initialize the Token Service with this configuration, open **./src/app/app.component.ts** and import Angular2TokenService:

import {Angular2TokenService} from "angular2-token";

then import the environement configuration:

import {environment} from "../environments/environment";

Inject the Token Service into our **ApplicationComponent** and initialize it with our config:

export class AppComponent {  
  title = 'app works!';  
  **constructor(private authToken: Angular2TokenService){  
    this.authToken.init(environment.token\_auth\_config);  
  }**  
}

Your **AppComponent** should look something like this:

### Testing the Token Service

Let’s now see if we can login with our default user, if you remember his email was **user@example.com** and password **monkey67.**

Let’s use **signIn** method of the **Token Service** which takes an object with **email** and **password** keys as parameter, and returns an Obesevable<Response>, to which we can subscribe and log out the result (don’t forget to start our RoR Backend if it’s not already running):

Start our Angular app by running:

$ ng serve

The server will start on [http://localhost:4200](http://localhost:4200)

If you look into the console, you will see the auth token in the response headers and user data in the the body:

![](https://hackernoon.com/hn-images/1*npEtG5wkXb1_gPejEzpWrw.png)

Before continuing don’t forget to remove this Sign In test and clean up your browser cache to remove the auth token from the local storage.

Now that we have our frontend up and running, we can start building our Angular application, [**let’s head out to part 3**](https://medium.com/@avatsaev/angular-2-and-ruby-on-rails-user-authentication-part-3-d938fcb7a334#.u9pzluw9j) for the fun stuff.

> [Part 3: Frontend, login/register](https://medium.com/@avatsaev/angular-2-and-ruby-on-rails-user-authentication-part-3-d938fcb7a334#.itibi1vqc)

Different

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

Angular 2+ and Ruby on Rails user authentication Part 2

Too Long; Didn't Read

Company Mentioned

@avatsaev

RELATED STORIES