Giter Club home page Giter Club logo

angular2-login-seed's Introduction

angular2-login-seed (deprecated)

MIT license Dependency Status devDependency Status Angular2 Style Guide

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.

angular2-login-seed

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:

login-screenshot

Once you login you will see the following screen:

users-screenshot

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

app-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

angular2-login-seed's People

Contributors

adamhpan avatar bryant1410 avatar caalvinz avatar domfarolino avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular2-login-seed's Issues

[Maintainer Wanted]

A number of people have opened issues on this repository asking why it has been deprecated (since there is not any information about this in the README etc) and why certain portions of the live app (backend) do not work anymore. Answer: I let the hosting for the database expire (though I have a dump of all the data) because I no longer have the time to maintain this project the way I wish I could.

However, this provides a good opportunity for the community, as I'm looking for a maintainer to step in! If I could give someone worthy, write-access to the repository so they can build it up again and update all the dependencies etc that would be a huge help. If anyone is interested in contributing please let me know via email ([email protected]) or comment on this issue and I'd be happy to talk to you. Submitting a PR to update the application's dependencies and make it work with all the new jazz would be a great first step :)

Host Parameter

How can I change the host address when running this ?
I try to add --host 192.168.2.3 here

"start": "ng serve --host 192.168.2.3",

but I cant login or register after this change.

After login, where do you store the session token?

Here is the login method. I can't find how and where the token is stored and how to send it to server. Could you give me some idea about this? Thanks.

login(user) {
    let body = JSON.stringify(user);
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http.post(this._loginApi, body, <RequestOptionsArgs> {headers: headers, withCredentials: true})
                    .map((res: Response) => res)
                    .catch(this.handleError);
  }

Access-Control-Allow-Origin

Hi,

I deployed, angular2-login-seed on heroku , and I don't understand why I get this when I try to registera new user :

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 503

I have kept this part of the code :
const allowedOrigins = ['http://127.0.0.1:4200','http://localhost:4200', 'https://xxxxxxxx.herokuapp.com'];

router.use(function(request, response, next) {
var origin = request.headers.origin;
if (allowedOrigins.indexOf(origin) > -1) {
response.setHeader('Access-Control-Allow-Origin', origin);
}
response.setHeader('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
response.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
response.setHeader('Access-Control-Allow-Credentials', true);
next();
});

It doesn't seem to be enough, do you have any idea ?
Regards,

Local authetication

Hi,

Nice job. Thanks.

Any plan to add in local authentication?

Regards
Ned

SQL Documentation

Hello,

I am not sure howTo do and if it is possible but The app is configured to work with MySql.
Should be good to write it maybe.

Thanks

Philippe

Local Express server tries to serve old version of front end on request of the root /

This is a simple fix I need to get in soon. The express server should solely be used for its API endpoints, and should serve no other files. However if you visit the root URL of the express app (localhost:5000) it tries to serve an old version of the Angular app's front-end. This needs to be resolved as zone catches a ton of errors. Its not a big problem right now primarily because the root URL express app should never be hit anyways but it needs to be done.

npm ERR! peerinvalid Peer

There is an error while running "npm install".

npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.2.1
npm ERR! npm  v2.14.7
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package @angular/[email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular2-material/[email protected] wants @angular/forms@^0.1.0

Update to Angular2 latest release

I won't be able to get to this update for another week or so but if someone wants to take a stab at updating this Angular2 app from rc.4 => 2.0.0 latest release that would be great!

Why deprecated

Hi,

why do you state it's deprecated?
I cannot find any information explaining why it has been declared as deprecated.

Thx in advance for your answer!
Regards
Stefan

Service base API variables need to be constant

Right now if you want to point the Angular app at a different API there are too many places where the same base api variable exists. There needs to be some service constant we can import acting as a one stop shop for external api information

Angular-CLI Addition Documentation

Documentation (README.MD) needs to be updated to reflect the latest changes merged in from the branch angular-cli. Now that the front end Angular app is divorced from the back end Express app, the application can be much more easily run by anyone locally without setting up a server and API. This needs to be added to the docs.

Heroku and EB deep links not routing

I can't get the deep links to work when I'm hosting the application on Heroku/EB.
I've tried to run an nginx server to route everything to the index.html in ./dist but the deep links are still not found.

Can you run through how you hosted the project on Heroku?

The angular2-login-seed.herokuapp.com page isn’t working

I'm getting such error when trying to sign in via Google:

Clearing cookies didn't help. I haven't faced this error when I opened the app last time a week ago. It occurs in both Chrome/Safari. If you think that the problem is on my side could you give some advice on how to fix it?

This is the console output:

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
main.ts:13Bootstrap success
https://angular2-login-seed.herokuapp.com/api/authenticated Failed to load resource: the server responded with a status of 401 (Unauthorized)
https://angular2-login-seed.herokuapp.com/api/users/register Failed to load resource: the server responded with a status of 400 (Bad Request)
2https://angular2-login-seed.herokuapp.com/api/authenticated Failed to load resource: the server responded with a status of 401 (Unauthorized)
error_handler.js:47EXCEPTION: Response with status: 401 Unauthorized for URL: https://angular2-login-seed.herokuapp.com/api/authenticated
ErrorHandler.handleError @ error_handler.js:47
Subscriber.js:227Uncaught Response
5https://angular2-login-seed.herokuapp.com/api/authenticated Failed to load resource: the server responded with a status of 401 (Unauthorized)
zone.js:1382 GET https://angular2-login-seed.herokuapp.com/api/authenticated 401 (Unauthorized)

What about facebook?

You have facebook in configs, but not in the actual demo. Did you manage to get it working with facebook?

Maintainer Wanted

A number of people have opened issues on this repository asking why it has been deprecated (since there is not any information about this in the README etc) and why certain portions of the live app (backend) do not work anymore. Answer: I let the hosting for the database expire (though I have a dump of all the data) because I no longer have the time to maintain this project the way I wish I could.

However, this provides a good opportunity for the community, as I'm looking for a maintainer to step in! If I could give someone worthy, write-access to the repository so they can build it up again and update all the dependencies etc that would be a huge help. If anyone is interested in contributing please let me know via email ([email protected]) or comment on this issue and I'd be happy to talk to you. Submitting a PR to update the application's dependencies and make it work with all the new jazz would be a great first step :)

Unable to register: "User already exists"

I can't sign up. It tells me that such user already exists regardless of what name/username/email I enter. If that's my problem please give an advice on how to fix that.

This is the console output:

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
main.bundle.js:50563 Bootstrap success
https://angular2-login-seed.herokuapp.com/api/authenticated Failed to load resource: the server responded with a status of 401 (Unauthorized)
https://angular2-login-seed.herokuapp.com/api/users/register Failed to load resource: the server responded with a status of 400 (Bad Request)

Most likely the problem here is the same as in another issue that I've opened. However, I don't know what can cause it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.