{"id":21307773,"url":"https://github.com/jdegand/angular-register-tut","last_synced_at":"2026-01-01T21:59:22.850Z","repository":{"id":184305819,"uuid":"645038982","full_name":"jdegand/angular-register-tut","owner":"jdegand","description":"Angular conversion of my react-register-tut repo","archived":false,"fork":false,"pushed_at":"2023-07-27T20:44:46.000Z","size":168,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T20:13:17.833Z","etag":null,"topics":["angular","jwt"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdegand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-05-24T19:37:54.000Z","updated_at":"2023-05-24T19:45:15.000Z","dependencies_parsed_at":"2023-07-27T21:51:49.934Z","dependency_job_id":null,"html_url":"https://github.com/jdegand/angular-register-tut","commit_stats":null,"previous_names":["jdegand/angular-register-tut"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdegand/angular-register-tut","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-register-tut","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-register-tut/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-register-tut/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-register-tut/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/angular-register-tut/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-register-tut/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28164138,"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","status":"online","status_checked_at":"2026-01-01T02:00:06.694Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","jwt"],"created_at":"2024-11-21T16:34:07.364Z","updated_at":"2026-01-01T21:59:22.835Z","avatar_url":"https://github.com/jdegand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Register Tut\n\nAngular conversion of this [repo](https://github.com/jdegand/react-register-tut).\n\n## Screenshots\n\n![](screenshots/angular-register-tut-1.png)\n\n***\n\n![](screenshots/angular-register-tut-2.png)\n\n***\n\n![](screenshots/angular-register-tut-3.png)\n\n***\n\n![](screenshots/angular-register-tut-4.png \"Have to add admin role 5150 manually in db\")\n\n***\n\n![](screenshots/angular-register-tut-5.png)\n\n***\n\n![](screenshots/angular-register-tut-6.png \"Login \u0026 Register guarded against when accessing linkpage logged in\")\n\n***\n\n![](screenshots/angular-register-tut-7.png \"Clicking on the ok and redirected back to login page\")\n\n***\n\n![](screenshots/angular-register-tut-8.png)\n\n***\n\n![](screenshots/angular-register-tut-9.png \"Tough to get a good color contrast with red here\")\n\n***\n\n![](screenshots/angular-register-tut-10.png)\n\n***\n\n![](screenshots/angular-register-tut-11.png)\n\n***\n\n![](screenshots/angular-register-tut-12.png \"New user doesn't have an admin role so unauthorized page is shown\")\n\n***\n\n## Built With\n\n- [Angular](https://angular.io)\n- [Angular CLI](https://github.com/angular/angular-cli) version 15.2.5.\n\n## How to Use\n\nThe Express application runs by default on `http://localhost:4000` and has the following endpoints:\n\n - `http://localhost:4000/register`\n - `http://localhost:4000/auth` \n - `http://localhost:4000/users`\n - `http://localhost:4000/logout`\n - `http://localhost:4000/refresh`\n\n### Running the Express Backend Application\n\nYou can clone the [repo](https://github.com/jdegand/mongo-async-crud)'s angular branch with the command below.  \n\n```bash \n\ngit clone https://github.com/jdegand/mongo-async-crud.git -b angular --single-branch\n\n# cd into the directory\nnpm install\n\n# Add .env with Mongo_URI Connection String, Token Secrets, \u0026 PORT\n\nnpm start\n```\n### Running the Angular Application\n\nRun the express application first.  Use two terminals.  \n\n```bash\n\ngit clone https://github.com/jdegand/angular-register-tut.git\n\n# cd into the directory\nnpm install \n\nnpm start\n```\n\n## Thoughts \n\n- Forget about using an async validator for username as users route is behind jwt verification\n- Have to make a separate route for usernames or convert backend to use JWT middleware per route path \n- The persist cookie allows the refresh token to be called  \n- If the persist cookie is not present, when the accessToken expires, there will be alert saying 'Session expired' and the user will be logged out \n- Refreshing the page still causes logouts\n- Potential problems with not unsubscribing on some service calls\n- Some CSS problems - the color scheme has poor contrast, the width of main div is variable and can look poor if content is minimal\n\n## Useful Resources\n\n- [Stack Overflow](https://stackoverflow.com/questions/42394999/why-should-i-use-validators-compose) - validators compose\n- [YouTube](https://www.youtube.com/watch?v=Gt9odQS9w80) - confirm password validation in angular reactive forms | validations in angular 13 reactive form #24\n- [YouTube](https://www.youtube.com/watch?v=NJfWx0OINhA) - PASSWORD CONFIRMATION IN ANGULAR | CUSTOM VALIDATION IN REACTIVE FORM\n- [TG Clickography](https://tgclickography.com/blogs/angular/validate-password-match) - validate password match\n- [Blog](https://www.joshmorony.com/username-availability-with-an-asynchronous-validator-in-angular/) - username availability with an asynchronous validator in angular\n- [Bez Koder](https://www.bezkoder.com/angular-14-refresh-token/) - angular 14 refresh token\n- [YouTube](https://www.youtube.com/watch?v=OG8vbzVuFoc) - Angular Login using Access \u0026 Refresh Tokens\n- [YouTube](https://www.youtube.com/watch?v=nI8PYZNFtac\u0026list=PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd\u0026index=4) - Dave Gray\n- [YouTube](https://www.youtube.com/watch?v=Yc93IvrouxY) - Angular Functional Guards - How to Use Functional Router Guards\n- [Blog](https://itnext.io/angular-functional-router-guard-and-testing-with-inject-337d52b68f9c) - router guard and testing with inject\n- [Stack Overflow](https://stackoverflow.com/questions/42719445/pass-parameter-into-route-guard) - pass parameter into route guard\n- [Stack Overflow](https://stackoverflow.com/questions/75484659/angular-15-empty-activatedroute-params-in-functional-route-guards) - angular 15 empty activated router params in functional route guards\n- [Danny Walls](https://www.danywalls.com/how-to-use-functional-router-guards-in-angular#heading-using-inject) - functional router guards\n- [YouTube](https://www.youtube.com/watch?v=3IDkzcflvaU) - Angular Authentication part - 2 (Handling refresh token + Http Interceptor + .NET Core API) #28\n- [Stack Overflow](https://stackoverflow.com/questions/9353630/check-if-httponly-cookie-exists-in-javascript) - check if http-only cookie exists\n- [Dutch Lab](https://thedutchlab.com/blog/using-axios-interceptors-for-refreshing-your-api-token) - axios interceptors for refreshing your api token\n- [Stack Overflow](https://stackoverflow.com/questions/60758154/how-to-check-if-jwt-token-is-expired-in-angular-8) - how to check if jwt token is expired \n- [Stack Overflow](https://stackoverflow.com/questions/68655492/throwerrorerror-is-now-deprecated-but-there-is-no-new-errorhttperrorresponse) - throwError deprecated\n- [Stack Overflow](https://stackoverflow.com/questions/54380886/how-we-can-access-cookies-in-angular-6-without-ngx-cookie-service) - how we can access cookies in angular \n- [Stack Overflow](https://stackoverflow.com/questions/16010827/html5-localstorage-checking-if-a-key-exists) - localStorage checking if a key exists\n- [Stack Overflow](https://stackoverflow.com/questions/16427636/check-if-localstorage-is-available) - check if localStorage is available\n- [YouTube](https://www.youtube.com/watch?v=ahFEatzThIg) - 'subscribe' is deprecated. Instead of passing separate callback arguments, use an observer argument.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fangular-register-tut","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Fangular-register-tut","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fangular-register-tut/lists"}