I’ve been working on DreamFactory's Angular SDK, sample app, and documentation. It's now available on 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 the 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 service 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.

Let's say for example you want to use Login component. First thing to do is to import the Login component and necessary services. Let's call your root component 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]
})

In a similar way, you can also use RegisterCmp, ProfileCmp, etc.

There is a separate service called ProfileService which handles all the HTTP operations for currently logged in user profiles with the 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.