angular2-login-seed (deprecated)

A seed application for developers to get started building applications with Angular 2. The application's backend is in Node.js featuring user login via PassportJS and OAuth.

Table of Contents

1. Demo
2. Technologies
3. Overview
4. TL;DR Get started now
5. Customizing Express server
6. Angular Component Tree
7. Directory Structure
8. Contributing
9. Todo

Demo

Check this site out live here

Technologies

Some of the open source technologies used in this application are listed below

1. Angular 2
2. Angular CLI
3. Angular Material2
4. Node.js
5. Express
6. PassportJS

Overview

This repository contains code for two applications:

• The Angular app which gets served by the angular-cli via ng serve on localhost:4200
• The Express server on which the Angular app depends which is served via npm run express-dev or npm run express-prod on localhost:5000

It is only necessary to run the Angular app locally to get up and running. This is because by default the Angular app depends on the remote Express server which has been deployed on Heroku. There is no need for you worry about setting up OAuth accounts, SQL Databases, or remote servers. This stuff is only necessary if you wish to change the API to be your own. Steps for this can be found in the Customizing Express server section.

TL;DR Get started now

Make sure you have angular-cli installed globally npm install -g angular-cli@latest.

# Fork or clone this repo
git clone [email protected]:domfarolino/angular2-login-seed.git
npm install
npm start

Navigate to localhost:4200 and you should see the following application served:

Once you login you will see the following screen:

Customizing Express server

I've tried to make it easy to customize your the Express server to make it your own. Only the following steps need completed:

• Create OAuth applications with Google and Twitter. You can follow my guide here
• Input the application credentials in the config/default.json configuration file
• Create a local or production database in which the application will store the users.
• Execute the contents of angular2-login-seed.sql on the database to create a users table with proper fields
• Fill out config/default.json, config/production.json, or both with db credentials to that Sequelize knows how to connect when you're in development or production mode
• Change the production OAuth callbacks found in config/production.json
• Change the api url to your new server

To learn about how the npm package config works with Node environment variables click here

npm run express-dev # runs express server in development mode with development specified credentials
npm run express-prod # runs express server in production mode using credentials overwritten in production.json

I've also tried to make it as easy as possible to add more OAuth providers to this app to keep it flexible. If you think it can be done better please submit a PR to improve the maintainability of the app. To add support for another OAuth provider 4 things need to be done:

1. Add authorization and callback routes for the provider (edit /routes/index.js)

/**
 * Authorization route for <provider> provider
 */
router.get('/authorize/provider',
  passport.authenticate('provider'));

/**
 * Define our provider callback endpoint and success/failure methods
 */
router.get('/callback/provider',
	passport.authenticate('provider', {
		successRedirect: '/',
		failureRedirect: '/provider'
}));

2. Add your OAuth credentials to the /config/default.json file. You'll use these in /config/passport.js which you'll edit next

3. Setup/use PassportJS strategy in /config/passport.js

passport.use(new ProviderStrategy({....

4. Update the attribute utility functions at the end of /config/passport.js to support your provider

This entails basically examining the JSON payload you get back from your provider and seeing under what keys, the information you need to insert into the database exists under. If any database/model changes need made modify the database appropriately and update the User model /models.js

5. Update the apiBase to use your own server

The current api endpoint is listed as a provided value in the /src/app/app.module.ts file. You must change the api url (currently 'https://angular2-login-seed.herokuapp.com') to the url of your own api server.

Angular Component Tree

Directory Structure

The goal is to keep as flat of a directory structure as possible for all of the Angular components. Reasons for this, as well as grouping files by bounded context can be found here.

.
login-screenshot.png
angular-cli.json
logo.png
96.png
192.png
Procfile
144.png
.editorconfig
package.json
protractor.conf.js
tslint.json
e2e
   app.e2e-spec.ts
   e2e
      app.po.ts
      tsconfig.json
      typings.d.ts
      app.e2e.ts
   app.po.ts
   tsconfig.json
.gitignore
angular2-login-seed.sql
karma.conf.js
README.ng.md
src
   favicon.ico
   polyfills.ts
   styles.css
   app
      app.component.css
      register
         register.component.css
         register.component.ts
         register.component.js
         register.component.js.map
         register.component.html
         index.ts
      shared
         components
            quick-card
               quick-card.component.css
               quick-card.component.html
               quick-card.component.js
               quick-card.component.js.map
               quick-card.component.ts
         services
            user
               user.service.js.map
               user-status-codes.js.map
               user.service.js
               username-email-validator.ts
               user.js.map
               user.service.ts
               username-email-validator.js
               user.ts
               user-status-codes.ts
               user-status-codes.js
               username-email-validator.js.map
               user.js
            hero
               hero.js.map
               hero.service.js
               hero.ts
               hero.service.js.map
               hero.service.ts
               hero.js
      home-root
         home-root.component.html
         home-root.component.js
         home-root.routes.ts
         home-root.guard.ts
         index.ts
         home-root.component.js.map
         home-root.component.ts
         home-root.component.css
      users
         user-badge.component.css
         users.component.ts
         user-badge.component.js.map
         users.component.js
         user-badge.component.js
         user-badge.component.ts
         users.component.css
         users.component.js.map
         user-badge.component.html
         users.component.html
         index.ts
      app.component.html
      dashboard
         dashboard.component.ts
         dashboard.component.js.map
         dashboard.component.js
         dashboard.component.html
      app.component.ts
      app-routing.module.ts
      app.module.ts
      login
         login.component.css
         login.component.ts
         login.component.html
         login.component.js
         login.component.js.map
         index.ts
      app.component.spec.ts
      hero-detail
         hero-detail.component.js
         hero-detail.component.css
         hero-detail.component.html
         hero-detail.component.js.map
         hero-detail.component.ts
      heroes
         heroes.component.html
         heroes.component.js
         heroes.component.js.map
         heroes.component.css
         heroes.component.ts
      unauthenticated.guard.ts
      index.ts
   main.ts
   index.html
   tsconfig.json
   typings.d.ts
   test.ts
   environments
      environment.prod.ts
      environment.ts
   assets
      favicon.ico
      img
         space_bg.jpg
         background.jpg
         menu_bg_small.jpg
         bg.png
         menu_bg.jpg
README.md
logo_post_polymer.png
manifest.json
users-screenshot.png
directoryStructure.txt
LICENSE

Contributing

Please feel free to contribute to this project to help build more defined practices we can use in larger Angular 2 web applications. PRs are welcome!

Todo

1. User 'profile' page
2. Progressive Web App - Service Worker Caching
3. Progressive Web App - Push Notification support with encrypted payload
4. RxJS websocket integration for realtime user status
5. More extensive tests