This article is the follow up of Angular 2+ and Ruby on Rails user authentication Part 1: Backend Intro I will separate the frontend section into 3 different subsections: Conception & Bootstrapping/Configuring the project Building login/register Building Profile View and its Router Guard So in this part we’ll do some conception, then bootstrap and configure our project with , for UI, and for user management on the frontend. Angular CLI Materialize Angular2Token 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 and jump straight to . https://github.com/avatsaev/angular-token-auth-seed part 3 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: Application behaviour Initially, the application will display a welcome page in the content zone. The will have two states, display actions when user is not logged in, or display actions when the user is logged in, these states will switch in real time when the user logs in or out. actions zone Login & Register Show profile & Logout When the user clicks on or we’ll display a Modal Dialog with the appropriate form (Login or Register from). Login Register When the user clicks on action, we’ll display his profile data in the Profile content zone. 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 Angular Team has created a very handy tool called that allows us to bootstrap and manage an Angular app easily from within terminal, install it globally via NPM: Angular CLI $ 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 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, and . angular-devise-token-auth, Welcome Page Profile Page Using MaterializeCSS with Angular To build our UI, we’ll use , good news is, Materialize components are available for Angular with library, so let’s install it with its dependencies: MaterializeCSS angular2-materialize $ npm install materialize-css angular2-materialize jquery@^2.2.4 hammerjs font-awesome --save Include dependencies and styles in file: ./.angular-cli.json In array we’ll need the materialize stylesheet: styles "styles": ["styles.sass", ], "../node_modules/materialize-css/dist/css/materialize.css","../node_modules/font-awesome/css/font-awesome.css" And in array we’ll need jquery, hammerjs and materializejs: scripts "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 into our M so we can use Materialize Components in our app**,** open and import MaterializeModule MaterializeModule ain App Module ./src/app/app.module.ts import { MaterializeModule } from 'angular2-materialize'; Then add it to array of our : imports AppModule @NgModule({declarations: [AppComponent],imports: [BrowserModule,FormsModule,HttpModule,AppRoutingModule, ],providers: [],bootstrap: [AppComponent]})export class AppModule { } MaterializeModule Installing and Configuring Angular2 Token To make user management on the frontend easier, we’ll use library, it was designed to work with gem that we used on our RoR backend for user management. Let’s install and configure it: angular2-token DeviseAuthToken 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,], bootstrap: [AppComponent]})export class AppModule { } providers: [ Angular2TokenService ], 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 folder. ./src/environments In this folder we have two files, which will be used as default configuration store during development process and will be used for production when you build your app with Angular CLI’s flag ( ) environment.ts environment.prod.ts prod ng build --prod Angular2Token offers different configuration keys, you can check them out , but we will need only one, which is the address of our backend server, considering Rails is running on port 3000 by default, the address will be . here apiBase, 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 and import Angular2TokenService: ./src/app/app.component.ts import {Angular2TokenService} from "angular2-token"; then import the environement configuration: import {environment} from "../environments/environment"; Inject the Token Service into our and initialize it with our config: ApplicationComponent export class AppComponent {title = 'app works!'; } constructor(private authToken: Angular2TokenService){this.authToken.init(environment.token_auth_config);} Your should look something like this: AppComponent Testing the Token Service Let’s now see if we can login with our default user, if you remember his email was and password user@example.com monkey67. Let’s use method of the which takes an object with and 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): signIn Token Service email password Start our Angular app by running: $ ng serve The server will start on 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: 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, for the fun stuff. let’s head out to part 3 Part 3: Frontend, login/register
