{"id":14973189,"url":"https://github.com/mrin9/angular-springboot-rest-jwt","last_synced_at":"2025-04-08T16:07:45.649Z","repository":{"id":40414583,"uuid":"73326084","full_name":"mrin9/Angular-SpringBoot-REST-JWT","owner":"mrin9","description":"Springboot, Angular and JWT security - Example Project based on Northwind Order Processing","archived":false,"fork":false,"pushed_at":"2024-01-04T11:31:31.000Z","size":13759,"stargazers_count":791,"open_issues_count":6,"forks_count":501,"subscribers_count":90,"default_branch":"master","last_synced_at":"2025-04-08T16:07:36.781Z","etag":null,"topics":["angular","angular2","frontend","java","jwt","northwind","openapi","spring-security","springboot","swagger"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrin9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-09T22:23:27.000Z","updated_at":"2025-03-30T10:33:54.000Z","dependencies_parsed_at":"2024-01-13T01:36:15.952Z","dependency_job_id":"46116f6f-f3d8-4b91-9d6c-e451fc9fdb13","html_url":"https://github.com/mrin9/Angular-SpringBoot-REST-JWT","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrin9%2FAngular-SpringBoot-REST-JWT","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrin9%2FAngular-SpringBoot-REST-JWT/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrin9%2FAngular-SpringBoot-REST-JWT/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrin9%2FAngular-SpringBoot-REST-JWT/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrin9","download_url":"https://codeload.github.com/mrin9/Angular-SpringBoot-REST-JWT/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247878022,"owners_count":21011158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","frontend","java","jwt","northwind","openapi","spring-security","springboot","swagger"],"created_at":"2024-09-24T13:48:18.917Z","updated_at":"2025-04-08T16:07:45.603Z","avatar_url":"https://github.com/mrin9.png","language":"JavaScript","readme":"\n[![Backers on Open Collective](https://opencollective.com/angular-springboot-rest-jwt/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/angular-springboot-rest-jwt/sponsors/badge.svg)](#sponsors)\n[![Build Status](https://travis-ci.org/mrin9/Angular-SpringBoot-REST-JWT.svg?branch=master)](https://travis-ci.org/mrin9/Angular-SpringBoot-REST-JWT)\n\n\u003e Angular and SpringBoot both have way too much of magic, if you are one who like to be in controll of their code, then check \u003e out my project on pure Java 11 (With Modules), Jersey and Vue.JS for UI\n\u003e [WebApp with Java 11, Jersey and VueJS](https://github.com/mrin9/Modular-Java-Jersey-Vue)\n\n## Angular 5+ Frontent with SpringBoot (Java) Backend\nApplication to demonstrate various parts of a service oriented RESTfull application. \n\n#### Heroku Hosted\nAllow couple of minutes to let the instance start\n- [WebApp](https://infomud.herokuapp.com/)\n- [Api Doc (swagger)](https://infomud.herokuapp.com/swagger/index.html)\n\n\n### Technology Stack\nComponent         | Technology\n---               | ---\nFrontend          | [Angular 5](https://github.com/angular/angular)\nBackend (REST)    | [SpringBoot](https://projects.spring.io/spring-boot) (Java)\nSecurity          | Token Based (Spring Security and [JWT](https://github.com/auth0/java-jwt) )\nREST Documentation| [Swagger UI / Springfox](https://github.com/springfox/springfox) and [ReDoc](https://github.com/Rebilly/ReDoc)\nREST Spec         | [Open API Standard](https://www.openapis.org/) \nIn Memory DB      | H2 \nPersistence       | JPA (Using Spring Data)\nClient Build Tools| [angular-cli](https://github.com/angular/angular-cli), Webpack, npm\nServer Build Tools| Maven(Java) or Gradle\n\n## Folder Structure\n```bash\nPROJECT_FOLDER\n│  README.md\n│  pom.xml           \n│  build.gradle\n└──[src]      \n│  └──[main]      \n│     └──[java]      \n│     └──[resources]\n│        │  application.properties #contains springboot cofigurations\n│        │  schema.sql  # Contains DB Script to create tables that executes during the App Startup          \n│        │  data.sql    # Contains DB Script to Insert data that executes during the App Startup (after schema.sql)\n│        └──[public]    # keep all html,css etc, resources that needs to be exposed to user without security\n│\n└──[target]              #Java build files, auto-created after running java build: mvn install\n│  └──[classes]\n│     └──[public]\n│     └──[webui]         #webui folder is created by (maven/gradle) which copies webui/dist folder \n│                        #the application.properties file list webui as a resource folder that means files can be accesses http://localhost/\u003cfiles_inside_webui\u003e \n│\n└──[webui]\n   │  package.json     \n   │  angular-cli.json   #ng build configurations)\n   └──[node_modules]\n   └──[src]              #frontend source files\n   └──[dist]             #frontend build files, auto-created after running angular build: ng -build\n```\n\n## Prerequisites\nEnsure you have this installed before proceeding further\n- Java 8\n- Maven 3.3.9+ or Gradle 3.3+\n- Node 6.0 or above,  \n- npm 5 or above,   \n- Angular-cli 1.6.3\n\n## About\nThis is an RESTfull implementation of an order processing app based on Northwind database schema from Microsoft.\nThe goal of the project is to \n- Highlight techniques of making and securing a REST full app using [SpringBoot](https://projects.spring.io/spring-boot)\n- How to consume an RESTfull service and make an HTML5 based Single Page App using [Angular 4+](https://github.com/angular/angular)\n\n### Features of the Project\n* Backend\n  * Token Based Security (using Spring security)\n  * API documentation and Live Try-out links with Swagger \n  * In Memory DB with H2 \n  * Using JPA and JDBC template to talk to relational database\n  * How to request and respond for paginated data \n\n* Frontend\n  * Organizing Components, Services, Directives, Pages etc in an Angular App\n  * How to chain RxJS Observables (by making sequntial AJAX request- its different that how you do with promises)\n  * Techniques to Lazy load Data (Infinite Scroll)\n  * Techniques to load large data set in a data-table but still keeping DOM footprint less\n  * Routing and guarding pages that needs authentication\n  * Basic visulaization\n\n* Build\n  * How to build all in one app that includes (database, sample data, RESTfull API, Auto generated API Docs, frontend and security)\n  * Portable app, Ideal for dockers, cloud hosting.\n\n## In Memory DB (H2)\nI have included an in-memory database for the application. Database schema and sample data for the app is created everytime the app starts, and gets destroyed after the app stops, so the changes made to to the database are persistent only as long as the app is running\n\u003cbr/\u003e\nCreation of database schema and data are done using sql scripts that Springs runs automatically. \nTo modify the database schema or the data you can modify [schema.sql](./src/main/resources/schema.sql) and [data.sql](./src/main/resources/data.sql) which can be found at `/src/main/resources`\n\n## Spring security\nSecurity is **enabled** by default, to disable, you must comment [this line](./src/main/java/com/app/config/SecurityConfig.java#L15) in `src/main/java/com/config/SecurityConfig.java`\u003cbr/\u003e\nWhen security is enabled, none of the REST API will be accessesble directly.\n\nTo test security access `http://localhost:9119/version` API and you should get a forbidden/Access denied error. \nIn order to access these secured API you must first obtain a token. Tokens can be obtained by passing a valid userid/password\n\nuserid and password are stored in H2 database. To add/remove users, modify the [data.sql](./src/main/resources/data.sql#L3)\ncouple of valid users and their passwords are `demo\\demo` and `admin\\admin`\n\u003cbr/\u003e\n\nTo get a token call `POST /session` API with a valid userid and password.\nfor example you may you can use the folliwing curl command to get a token \n```\ncurl -X POST --header 'Content-Type: application/json' -d '{ \"username\":\"demo\", \"password\":\"demo\" }' 'http://localhost:9119/session'\n```\nthe above curl command will return you a token, which should be in the format of `xxx.xxx.xxx`. This is a JSON web token format. \nYou can decode and validate this token at [jwt.io wesite](https://jwt.io/). Just paste the token there and decode the information.\nto validate the token you should provide the secret key which is `mrin` that i am using in this app.\n\u003cbr/\u003e\nafter receiving this token you must provide the token in the request-header of every API request. For instance try the `GET /version` api using the below \ncurl command (replace xxx.xxx.xxx with the token that you received in above command) and you should be able to access the API.\n```\ncurl -X GET --header 'Accept: application/json' --header 'Authorization: xxx.xxx.xxx' 'http://localhost:9119/version'\n``` \n\n### Build Frontend (optional step)\nCode for frontend is allready compiled and saved under the ```webui/dist``` \nwhen building the backend app (using maven) it will pickup the code from ```webui/dist```. However if you modified the frontend code and want your changes to get reflected then you must build the frontend \n```bash\n# Navigate to PROJECT_FOLDER/webui (should contain package.json )\nnpm install\n# build the project (this will put the files under dist folder)\nng build --prod --aot=true\n```\n\n### Build Backend (SpringBoot Java)\n```bash\n# Maven Build : Navigate to the root folder where pom.xml is present \nmvn clean install\n\n#OR\n\n# Gradle Build : Navigate to the root folder where build.gradle is present \ngradle build\n```\n\n### Start the API and WebUI server\n```bash\n# Start the server (9119)\n# port and other configurations for API servere is in [./src/main/resources/application.properties](/src/main/resources/application.properties) file\n\n# If you build with maven jar location will be \njava -jar ./target/app-1.0.0.jar\n\n# If you build with gradle jar location will be \njava -jar ./build/libs/app-1.0.0.jar\n```\n\n### Accessing Application\nCpmponent         | URL                                      | Credentials\n---               | ---                                      | ---\nFrontend          |  http://localhost:9119                   | `demo/demo`\nH2 Database       |  http://localhost:9119/h2-console        |  Driver:`org.h2.Driver` \u003cbr/\u003e JDBC URL:`jdbc:h2:mem:demo` \u003cbr/\u003e User Name:`sa`\nSwagger (API Ref) |  http://localhost:9119/swagger-ui.html   | \nRedoc (API Ref)   |  http://localhost:9119/redoc/index.html  |\nSwagger Spec      |  http://localhost:9119/api-docs          |\n\n\n**To get an authentication token** \n```bash\ncurl -X POST --header 'Content-Type: application/json' --header 'Accept: application/json' -d '{\"username\": \"demo\", \"password\": \"demo\" }' 'http://localhost:9119/session'\n```\nor POST the username and password to http://localhost:9119/session\n\nafter you get the authentication token you must provide this in the header for all the protected urls \n\n```bash\ncurl -X GET --header 'Accept: application/json' --header 'Authorization: [replace this with token ]' 'http://localhost:9119/version'\n```\n\n\n**To get an authentication token** \n\n\n\n### Screenshots\n#### Login\n![Dashboard](/screenshots/login.png?raw=true)\n---\n#### Dashboard - Order Stats\n![Dashboard](/screenshots/order_stats.png?raw=true)\n---\n#### Dashboard - Product Stats\n![Dashboard](/screenshots/product_stats.png?raw=true)\n---\n#### Orders\n![Dashboard](/screenshots/orders.png?raw=true)\n---\n#### Orders Details\n![Dashboard](/screenshots/order_details.png?raw=true)\n---\n#### Customers\n![Dashboard](/screenshots/customers.png?raw=true)\n---\n#### API Docs - With Live Tryout\n![Dashboard](/screenshots/api_doc.png?raw=true)\n---\n#### API Docs - For redability\n![Dashboard](/screenshots/api_doc2.png?raw=true)\n---\n#### Database Schema\n![ER Diagram](/screenshots/db_schema.png?raw=true)\n\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/angular-springboot-rest-jwt#backer)]\n\n\u003ca href=\"https://opencollective.com/angular-springboot-rest-jwt#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/angular-springboot-rest-jwt/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/angular-springboot-rest-jwt#sponsor)]\n\n","funding_links":["https://opencollective.com/angular-springboot-rest-jwt"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrin9%2Fangular-springboot-rest-jwt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrin9%2Fangular-springboot-rest-jwt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrin9%2Fangular-springboot-rest-jwt/lists"}