Top shelf web developer training.

Guided Paths

Follow our crafted routes to reach your goals.

Video Courses

Premium videos to build real apps.

Written Tutorials

Code to follow and learn from.

Find Your
Opportunity HIRED
Dismiss
Up

​Build an Angular App with User Authentication in 10 Minutes

Stormpath makes authenticating Angular easy.

Related Course

Getting Started with Angular 2

Angular 2 is the shiny new framework that comes with a lot of new concepts. Learn all the great new features.

Angular is one of the hottest JavaScript MVC frameworks today. If you look at the number of jobs on LinkedIn, you’ll see that many companies are looking for developers that know Angular.

If you look on Google Trends, you can see that a lot of folks are searching for the term “angular".

This proves that Angular is a hot skill to have! In this article, I’ll show you a quick way to get started with Angular, and add user authentication with Stormpath.

TIP: If you’re just getting started with Angular, you might want to watch a video of my recent Getting Started with Angular webinar:

Why User Authentication with 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.

Recently, we launched our Client API which allows you to authenticate directly against Stormpath without installing a server component. This means frontend and mobile developers can enjoy the same first-class developer experience our server-side developers do. All our client SDKs (Angular, React, iOS, and Android) have been updated to support Client API.

This article shows how you can use our Angular SDK to create login, registration, and forgot password forms in an Angular application. The forms will interact with Stormpath’s Client API without the need for any server-side code.

Create an Angular Application

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

yarn add global angular-cli

NOTE: You can also use npm install -g angular-cli, but Yarn is faster.

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

ng new angular-stormpath-example

This will create a new angular-stormpath-example directory and run npm install to install all the necessary dependencies. To verify everything works, run ng serve in one terminal window and ng e2e in another. All tests should pass and you should see results like the following.

Integrate Stormpath’s Angular Support

Install the Angular components for Stormpath using yarn.

yarn add angular-stormpath

Modify app.module.ts to import StormpathModule and configure your app to use Stormpath's Client API.

import { StormpathModule, StormpathConfiguration } from 'angular-stormpath';
...

export function stormpathConfig(): StormpathConfiguration {
 let spConfig: StormpathConfiguration = new StormpathConfiguration();
 spConfig.endpointPrefix = 'https://{DNS-LABEL}.apps.stormpath.io';
 return spConfig;
}

@NgModule({
 ...
 imports: [
   ...
   StormpathModule
 ],
 providers: [{
   provide: StormpathConfiguration, useFactory: stormpathConfig
 }],
 bootstrap: [AppComponent]
})
export class AppModule {}

Change app.component.ts to extend AuthPortComponent.

import { AuthPortComponent } from 'angular-stormpath';

...
export class AppComponent extends AuthPortComponent {
...

Update app.component.html to use the <sp-authport> component and hide views if the user is not authenticated.

<h1>{{title}}</h1>
<sp-authport></sp-authport>

<div *ngIf="(user$ | async)">
 <h2>
   Welcome, {{ ( user$ | async ).fullName }}

  <a href="#" (click)="logout(); false">Logout</a>
</div>
<div [hidden]="!(user$ | async)">
<!-- secure components or <router-outlet></router-outlet> -->
</div>

The Stormpath components use Bootstrap CSS classes by default. Add a reference to Bootstrap's CSS in the <head> of index.html.

<head>
 ...
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

After making these changes, if you run ng serve, you’ll likely see something similar to the following error in your browser’s console.

XMLHttpRequest cannot load https://raible.apps.stormpath.io/me. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200 is therefore not allowed access. The response had HTTP status code 403.

To fix this, you’ll need to login and navigate to Applications > My Application and modify the Authorized Origin URIs to include http://localhost:4200.

After making this change, you should be able to login with one of your user's that's configured in Stormpath.

After logging in, you'll be able to search and see the user's information.

If it works - congrats! If it doesn't, let us know in our Talk Stormpath Slack channel, or hit me up on Twitter.

Fix Tests

If you try to run npm test or ng test, tests will fail with the same error you saw before:

'sp-authport' is not a known element:
1. If 'sp-authport' is an Angular component, then verify that it is part of this module.

The first step to fixing this is to import StormpathModule into src/app/app.component.spec.ts.

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [
      AppComponent
    ],
    imports: [StormpathModule]
  });
});

This will get you a bit further, but there will be an error about the /me endpoint not being found.

Chrome 55.0.2883 (Mac OS X 10.12.2) ERROR
  Uncaught Error: /me endpoint not found, please check server configuration.

To workaround this, you can override the Angular’s Http dependency and mock out its backend.

import { StormpathModule, Stormpath } from 'angular-stormpath';
import { BaseRequestOptions, Http, ConnectionBackend } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
...
beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [AppComponent],
    imports: [StormpathModule],
    providers: [
      {
        provide: Http, useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
        return new Http(backend, defaultOptions);
      },
        deps: [MockBackend, BaseRequestOptions]
      },
      {provide: Stormpath, useClass: Stormpath},
      {provide: MockBackend, useClass: MockBackend},
      {provide: BaseRequestOptions, useClass: BaseRequestOptions}
    ]
  });
});

After making these changes, you should see the sweet smell of success.

Chrome 55.0.2883 (Mac OS X 10.12.2): Executed 3 of 3 SUCCESS (1.031 secs / 1.026 secs)

Protractor tests should still work as well. You can prove this by running npm start in one terminal and npm run e2e in another.

Angular + Stormpath

You can find a completed version of the application created in this blog post on GitHub.

If you’re interested in learning more about why you should let us build auth for you, check out our Build Versus Buy whitepaper. TL;DR? Building authentication in an application is hard. It’s even less fun to build it over and over again in each application you build. Stormpath does the hard part for you and makes it a lot more fun to be a developer! Sign up for a forever-free developer account and try Stormpath today!

I hope you’ve enjoyed this quick tour of our Angular support. If you have questions about Stormpath’s features, or what we’re building next, please hit me up on Twitter, leave a comment below, or open an issue on GitHub.

This content is sponsored via Syndicate Ads