Using the new auth component for Angular 2

I’ve been working on DreamFactory's Angular SDK, sample app, and documentation. It's now available in Github with some good examples and details. There are some important things to consider when using Dreamfactory authentication with a custom Angular 2 component.

Background

Angular2-auth-component handles login, register and logged in user profile management. This component can be installed in any Angular 2 project using npm and with some additional lines of code, you can have a running dreamfactory auth system in your dreamfactory app. Typescript has been chosen to write angular2-auth-component. This should not affect any project written in ES6. Angular2-auth-component can still be included and used in any other project.

To get started with Angular 2, check out the getting started guide from angular.io. It has simple and useful examples for organizing code and creating components in Angular 2.

Using the component

In order to communicate with dreamfactory console you need to embed following configuration values in your index.html in a script tag.

window.instanceUrl = '';

window.appKey = ''

These config values will be used by angular2-auth-component to communicate with dreamfactory console. Then a simple npm install should download the module inside your node_modules folder after which you can include and use all the components inside angular2-auth-component.

npm install angular2-auth-component --save

Services and components available for use:

LoginCmp - Dreamfactory login widget
RegisterCmp - Dreamfactory register widget
ProfileCmp - Dreamfactory logged in user profile widget
ProfileService - HTTP serivce with methods to get and set profile
BaseHttpService - A wrapper around Angular 2 http service. This service should be used by the application to make any api call.

Lets say for example you want to use Login component. First thing to do is to import the Login component and necessary services. Lets call your root component as AppCmp.

import {LoginCmp, BaseHttpService} from 'angular2-auth-component/index';

Then, in your main component, inject services and use the component on `/login` route.

@Component({

  selector: 'app',

  templateUrl: './components/app/app.html',

  styleUrls: ['./components/app/app.css'],

  encapsulation: ViewEncapsulation.None,

  directives: [ROUTER_DIRECTIVES],

  providers: [BaseHttpService]

})
@RouteConfig([

  { path: '/login', component: LoginCmp, as: 'Login' },

])

Alternatively, you can also have your own login route and use the widget in your html.

 <df-login></df-login>

Make sure you mention LoginCmp in directives list like this:

@Component({

  selector: 'app',

  templateUrl: './components/app/app.html',

  styleUrls: ['./components/app/app.css'],

  encapsulation: ViewEncapsulation.None,

  directives: [ROUTER_DIRECTIVES, LoginCmp],

  providers: [BaseHttpService]

})

Similar way you can also use RegisterCmp, ProfileCmp etc.

There is a separate service called ProfileService which handles all the http operations for current logged in user profile with following methods:

get: Get profile. Returns object of Profile class.
save: Save profile. Requires object of Profile class.
resetPassword: Reset password.

You can either have you own profile widget and use ProfileService methods or you can use ProfileCmp either in a route or html widget as shown in above `LoginCmp` example.

There is also a sample repository which uses these components using npm install.

Related reading: Building An AngularJS Application Using DreamFactory