All Projects → domfarolino → Angular2 Login Seed

domfarolino / Angular2 Login Seed

Licence: mit
(deprecated) Seed app w/ Angular2, Node, Express, and OAuth login

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Angular2 Login Seed

Nextjs Starter
A starter project for Next.js with authentication
Stars: ✭ 1,313 (+625.41%)
Mutual labels:  oauth, passportjs
angular2-node-fb-login
Demo application that shows how to enable Facebook login with Angular 2 on frontend and Node.js/Express on backend
Stars: ✭ 55 (-69.61%)
Mutual labels:  angular2, passportjs
Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (-6.63%)
Mutual labels:  angular2
Ngx Wig
Angular(...Angular 7, Angular 8, Angular 9, Angular 10, Angular 11) WYSIWYG HTML Rich Text Editor (from ngWig - https://github.com/stevermeister/ngWig)
Stars: ✭ 178 (-1.66%)
Mutual labels:  angular2
Angular Google Gapi
An AngularJS module for using all Google Apis and your Google Cloud Endpoints (Google App Engine) with OAuth. This module uses Google APIs Client Library for JavaScript, available for all GApis.
Stars: ✭ 176 (-2.76%)
Mutual labels:  oauth
Ngx Inline Editor
Native UI Inline-editor Angular (4.0+) component
Stars: ✭ 172 (-4.97%)
Mutual labels:  angular2
Perk
A well documented set of tools for building node web applications.
Stars: ✭ 177 (-2.21%)
Mutual labels:  passportjs
Pac4j
Security engine for Java (authentication, authorization, multi frameworks): OAuth, CAS, SAML, OpenID Connect, LDAP, JWT...
Stars: ✭ 2,097 (+1058.56%)
Mutual labels:  oauth
Hwioauthbundle
OAuth client integration for Symfony. Supports both OAuth1.0a and OAuth2.
Stars: ✭ 2,150 (+1087.85%)
Mutual labels:  oauth
Augury
Angular Debugging and Visualization Tools
Stars: ✭ 2,050 (+1032.6%)
Mutual labels:  angular2
Socialloginmanager
DEPRECATED
Stars: ✭ 178 (-1.66%)
Mutual labels:  oauth
Supertokens Core
Open source alternative to Auth0 / Firebase Auth / AWS Cognito
Stars: ✭ 2,907 (+1506.08%)
Mutual labels:  passportjs
Spring Boot Cloud
基于 Spring Boot、Spring Cloud、Spring Oauth2 和 Spring Cloud Netflix 等框架构建的微服务项目
Stars: ✭ 2,044 (+1029.28%)
Mutual labels:  oauth
Home
Welcome to Janssen: the world's fastest cloud native identity and access management platform
Stars: ✭ 176 (-2.76%)
Mutual labels:  oauth
Indieauth.com
This service is being discontinued in favor of indielogin.com
Stars: ✭ 172 (-4.97%)
Mutual labels:  oauth
Ngx Socket Io
Socket.IO module for Angular
Stars: ✭ 178 (-1.66%)
Mutual labels:  angular2
1backend
Run your web apps easily with a complete platform that you can install on any server. Build composable microservices and lambdas.
Stars: ✭ 2,024 (+1018.23%)
Mutual labels:  angular2
Angular Notifier
A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular application.
Stars: ✭ 175 (-3.31%)
Mutual labels:  angular2
Ionic2 Rating
⭐️ Angular star rating bar. Built for Ionic 2+.
Stars: ✭ 177 (-2.21%)
Mutual labels:  angular2
Ng2 Nouislider
Angular2 noUiSlider directive
Stars: ✭ 181 (+0%)
Mutual labels:  angular2

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 [email protected].

# 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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].