Build an Angular 2 Application with User Authentication in 10 Minutes

Heads up… this post is old!

For an updated version of this post, see Angular Authentication with OpenID Connect and Okta in 20 Minutes on the Okta developer blog.

Today I’m happy to announce the first (beta) release of Stormpath’s Angular 2 support! The npm module is called angular-stormpath and you can easily installing it using npm install --save angular-stormpath. If you’d like to try Angular 2 with Stormpath without writing any code, you can checkout the project from GitHub and run its demo. You will need to have your Stormpath API key setup for this to work.

git clone https://github.com/stormpath/stormpath-sdk-angular.git
cd stormpath-sdk-angular
npm install
npm start

git clone https://github.com/stormpath/stormpath-sdk-angular.git

cd stormpath-sdk-angular

npm install

npm start

If you’d like to learn how to integrate our Angular 2 components into your own application, continue reading!

What Is Stormpath?

Stormpath is an API service that allows developers to create, edit, and securely store user accounts and user account data, and connect them with one or multiple applications. We make user account management a lot easier, more secure, and infinitely scalable. To get started register for a free account.

Create an Angular 2 Application with Express

To see how you might use this in a simple Angular 2 application, create a new application with Angular CLI. First, you’ll need to install Angular CLI.

npm install -g angular-cli

1	npm install -g angular-cli

After this command completes, you can create a new application.

ng new angular2-express-stormpath-example

1	ng new angular2-express-stormpath-example

The reason I included “express” in the project name is because Stormpath currently requires one of our backend integrations to communicate with Stormpath’s API. For this example, you’ll use express-stormpath.

From the command line, cd into angular2-express-stormpath-example and run ng serve. In another terminal window, run ng e2e to run Protractor tests. All tests should pass and you should see results like the following.

Integrate Stormpath’s Angular 2 Support

Add angular-stormpath to the project:

npm install angular-stormpath --save

1	npm install angular-stormpath --save

In src/app/app.component.html, add HTML that shows a welcome message to the user when they’re logged in. When they’re not logged in, the <sp-authport></sp-authport> component will render forms to register, login, and retrieve forgotten passwords.

<h1>{{title}}</h1>
<div *ngIf="(user$ | async)" class="row text-center">
  <h2 class="">
    Welcome, ({{ ( user$ | async ).fullName }}).
  </h2>
  <hr/>
  <h4>What would you like to do?</h4>

  <ul class="nav nav-pills nav-stacked text-centered">
    <li role="presentation" (click)="logout()"><a href="#">Logout</a></li>
  </ul>
</div>

<sp-authport></sp-authport>

<h1>{{title}}</h1>

Welcome, ({{ ( user$ | async ).fullName }}).

</h2>

<hr/>

<h4>What would you like to do?</h4>

<li role="presentation" (click)="logout()"><a href="#">Logout</a></li>

</ul>

</div>

<sp-authport></sp-authport>

In src/app/app.component.ts, add the following variables, constructor, and methods to the body of AppComponent:

import { Stormpath, Account } from 'angular-stormpath';
import { Observable } from 'rxjs';
...
export class AppComponent {
  title = 'app works!';
  private user$: Observable<Account | boolean>;
  private loggedIn$: Observable<boolean>;
  private login: boolean;
  private register: boolean;

  constructor(public stormpath: Stormpath) {
  }

  ngOnInit() {
    this.login = true;
    this.register = false;
    this.user$ = this.stormpath.user$;
    this.loggedIn$ = this.user$.map(user => !!user);
  }

  showLogin() {
    this.login = !(this.register = false);
  }

  showRegister() {
    this.register = !(this.login = false);
  }

  logout() {
    this.stormpath.logout();
  }
}

import { Stormpath, Account } from 'angular-stormpath';

import { Observable } from 'rxjs';

...

export class AppComponent {

title = 'app works!';

private user$: Observable<Account | boolean>;

private loggedIn$: Observable<boolean>;

private login: boolean;

private register: boolean;

constructor(public stormpath: Stormpath) {

}

ngOnInit() {

this.login = true;

this.register = false;

this.user$ = this.stormpath.user$;

this.loggedIn$ = this.user$.map(user => !!user);

}

showLogin() {

this.login = !(this.register = false);

}

showRegister() {

this.register = !(this.login = false);

}

logout() {

this.stormpath.logout();

}

If you run npm start and view http://localhost:4200 in your browser, you’ll see “Loading…”, but nothing renders. A quick check of the console will show you errors about sp-authport not being a known element.

This happens because Stormpath’s Angular 2 components haven’t been imported into the application’s module. Open src/app/app.module.ts and import StormpathModule.

import { AppComponent } from './app.component';
import { StormpathModule } from 'angular-stormpath';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    StormpathModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

import { AppComponent } from './app.component';

import { StormpathModule } from 'angular-stormpath';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

HttpModule,

StormpathModule

providers: [],

bootstrap: [AppComponent]

})

Now the app should launch correctly, but you’ll see a 404 in your console for the /me endpoint.

Install Stormpath’s Express Support

To fix this, install express-stormpath:

npm install express-stormpath --save-dev

1	npm install express-stormpath --save-dev

Create a server directory and a server.js file in it. In this file, create an Express application and protect it with Stormpath.

'use strict';

var express = require('express');
var path = require('path');
var stormpath = require('express-stormpath');

/**
 * Create the Express application.
 */
var app = express();

/**
 * The 'trust proxy' setting is required if you will be deploying your
 * application to Heroku, or any other environment where you will be behind an
 * HTTPS proxy.
 */
app.set('trust proxy', true);

/*
 We need to setup a static file server that can serve the assets for the
 angular application.  We don't need to authenticate those requests, so we
 setup this server before we initialize Stormpath.
 */

app.use('/', express.static(path.join(__dirname, '..'), {redirect: false}));

app.use(function (req, res, next) {
  console.log(new Date, req.method, req.url);
  next();
});

/**
 * Now we initialize Stormpath, any middleware that is registered after this
 * point will be protected by Stormpath.
 */
console.log('Initializing Stormpath');

app.use(stormpath.init(app, {
  web: {
    // produces: ['text/html'],
    spa: {
      enabled: true,
      view: path.join(__dirname, '..', 'index.html')
    },
    me: {
      // enabled: false,
      expand: {
        customData: true,
        groups: true
      }
    }
  }
}));

/**
 * Now that our static file server and Stormpath are configured, we let Express
 * know that any other route that hasn't been defined should load the Angular
 * application.  It then becomes the responsibility of the Angular application
 * to define all view routes, and redirect to the home page if the URL is not
 * defined.
 */
app.route('/*')
  .get(function (req, res) {
    res.sendFile(path.join(__dirname, '..', 'index.html'));
  });

/**
 * Start the web server.
 */
app.on('stormpath.ready', function () {
  console.log('Stormpath Ready');
});

var port = process.env.PORT || 3000;
app.listen(port, function () {
  console.log('Application running at http://localhost:' + port);
});

'use strict';

var express = require('express');

var path = require('path');

var stormpath = require('express-stormpath');

/**

* Create the Express application.

var app = express();

/**

* The 'trust proxy' setting is required if you will be deploying your

* application to Heroku, or any other environment where you will be behind an

* HTTPS proxy.

app.set('trust proxy', true);

We need to setup a static file server that can serve the assets for the

angular application. We don't need to authenticate those requests, so we

setup this server before we initialize Stormpath.

app.use('/', express.static(path.join(__dirname, '..'), {redirect: false}));

app.use(function (req, res, next) {

console.log(new Date, req.method, req.url);

next();

});

/**

* Now we initialize Stormpath, any middleware that is registered after this

* point will be protected by Stormpath.

console.log('Initializing Stormpath');

app.use(stormpath.init(app, {

web: {

// produces: ['text/html'],

spa: {

enabled: true,

view: path.join(__dirname, '..', 'index.html')

me: {

// enabled: false,

expand: {

customData: true,

groups: true

}

}));

/**

* Now that our static file server and Stormpath are configured, we let Express

* know that any other route that hasn't been defined should load the Angular

* application. It then becomes the responsibility of the Angular application

* to define all view routes, and redirect to the home page if the URL is not

* defined.

app.route('/*')

.get(function (req, res) {

res.sendFile(path.join(__dirname, '..', 'index.html'));

});

/**

* Start the web server.

app.on('stormpath.ready', function () {

console.log('Stormpath Ready');

});

var port = process.env.PORT || 3000;

app.listen(port, function () {

console.log('Application running at http://localhost:' + port);

});

This will now service the Stormpath endpoints (e.g. /login, /logout, /me) on port 3000 when it’s started. However, since Angular CLI runs on port 4200, you have to proxy these requests.

Proxy Requests to Express

Create a proxy.conf.json file in the root directory of the project to contain proxy definitions.

{
  "/forgot": {
    "target": "http://localhost:3000",
    "secure": false
  },
  "/login": {
    "target": "http://localhost:3000",
    "secure": false
  },
  "/logout": {
    "target": "http://localhost:3000",
    "secure": false
  },
  "/me": {
    "target": "http://localhost:3000",
    "secure": false
  },
  "/register": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

{

"/forgot": {