{"id":13529635,"url":"https://github.com/nikosanif/angular-authentication","last_synced_at":"2025-05-16T15:08:29.159Z","repository":{"id":45026122,"uuid":"395551239","full_name":"nikosanif/angular-authentication","owner":"nikosanif","description":"An Angular application that demonstrates best practices for user authentication \u0026 authorization flows.","archived":false,"fork":false,"pushed_at":"2025-04-27T04:39:31.000Z","size":3971,"stargazers_count":266,"open_issues_count":2,"forks_count":63,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-27T05:27:37.601Z","etag":null,"topics":["angular","authentication","authorization","material-ui","ngrx","ngxs","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://angular-authentication.netlify.app","language":"TypeScript","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/nikosanif.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-13T07:02:34.000Z","updated_at":"2025-04-27T04:50:56.000Z","dependencies_parsed_at":"2024-10-31T09:22:21.527Z","dependency_job_id":"cb26e693-5195-4304-9670-d4652cd6995a","html_url":"https://github.com/nikosanif/angular-authentication","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikosanif%2Fangular-authentication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikosanif%2Fangular-authentication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikosanif%2Fangular-authentication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikosanif%2Fangular-authentication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikosanif","download_url":"https://codeload.github.com/nikosanif/angular-authentication/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553958,"owners_count":22090417,"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","authentication","authorization","material-ui","ngrx","ngxs","tailwindcss","typescript"],"created_at":"2024-08-01T07:00:38.106Z","updated_at":"2025-05-16T15:08:24.133Z","avatar_url":"https://github.com/nikosanif.png","language":"TypeScript","readme":"# Angular Authentication\n\nAn Angular application that demonstrates best practices for user authentication \u0026 authorization flows.\n\nBy [@nikosanif](https://x.com/nikosanif)\n\n[![license](https://img.shields.io/github/license/nikosanif/angular-authentication.svg)](https://github.com/nikosanif/angular-authentication/blob/main/LICENSE)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/4c9d2c63-d481-486a-996c-8451443ac9d6/deploy-status)](https://angular-authentication.netlify.app)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![X Follow](https://img.shields.io/twitter/follow/nikosanif.svg?style=social\u0026label=Follow)](https://x.com/nikosanif)\n\n## Table of Contents\n\n- [Live Demo](#live-demo)\n- [Getting Started](#getting-started)\n- [Features](#features)\n- [Tech Stack](#tech-stack)\n- [High-level Design](#high-level-design)\n- [Contributing](#contributing)\n- [Support](#support)\n- [License](#license)\n\n## Live Demo\n\nLive application: [angular-authentication.netlify.app](https://angular-authentication.netlify.app/)\n\n![Angular Authentication Demo](https://raw.githubusercontent.com/nikosanif/angular-authentication/main/meta/app-demo.gif)\n\n## Getting Started\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/en/)\n- [Angular CLI](https://angular.io/cli)\n\n### Setup \u0026 Local Development\n\n- Clone this repository: `git clone git@github.com:nikosanif/angular-authentication.git`\n- `cd angular-authentication`\n- Install dependencies: `npm install`\n- Serve the Angular app: `npm start`\n- Open your browser at: `http://localhost:4200`\n\n### Use it as a Template\n\nThe main purpose of this repository is to provide a simple Angular application that demonstrates best practices for user authentication and authorization flows. The application is configured to use a fake API server (interceptor) that simulates the backend server. Also, it includes two state management libraries, NgRx and NGXS, so you can choose which one to use.\n\nIf you want to use this repository as a template for your project, you can follow these steps:\n\n- Clone this repository\n- Remove fake API:\n  - Delete `src/app/core/fake-api` folder\n  - Remove all references from the `fake-api` folder\n  - Remove the `fakeApiInterceptor` from `app.config.ts`\n- Choose the state management library you want to use:\n  - NgRx: Remove `src/app/auth/store/ngxs` folder and the `index.ngxs.ts` file\n  - NGXS: Remove `src/app/auth/store/ngrx` folder and the `index.ngrx.ts` file\n  - Rename the `index.XXX.ts` file to `index.ts` in the `src/app/auth/store` folder\n  - Update the `app.store.ts` file to import the correct store module\n  - Remove all unused packages from `package.json`\n- Update the Google Analytics tracking ID by replacing `UA-XXXXX-Y` in the `index.html` file and in the `src/app/core/services/google-analytics.service.ts` file. Or remove the Google Analytics service if you don't want to use it.\n\n### Useful Commands\n\n- `npm start` - starts a dev server of Angular app\n- `npm run build:prod` - builds full prod build\n- `npm run lint` - linting source code of this project\n- `npm run format:check` - runs prettier to check for formatting errors\n- `npm run format:write` - runs prettier to format whole code base\n- `npm run release` - runs `release-it` to create new release\n\n## Features\n\n### Authentication Flows\n\n![Angular Authentication Demo](https://raw.githubusercontent.com/nikosanif/angular-authentication/main/meta/auth-init-flow.png)\n![Angular Authentication Demo](https://raw.githubusercontent.com/nikosanif/angular-authentication/main/meta/auth-login-flow.png)\n\n### Other Features\n\n- Zoneless Angular application\n- Standalone Angular components\n- Angular Material UI components\n- Lazy loading of Angular components\n- API requests with `@ngrx/effects` or `@ngxs/store` (you can choose at `src/app/app.config.ts`)\n- Responsive design\n- Custom In-memory Web API using interceptors\n\n## Tech Stack\n\n- [Angular](https://angular.io/)\n- State Management. This repos demonstrates **two** state management libraries, you can choose which one to use by following the instructions in the [Use it as a Template](#use-it-as-a-template) section.\n  - [NgRX](https://ngrx.io/) - @ngrx/{store,effects,component}\n  - [NGXS](https://www.ngxs.io/) - @ngxs/store\n- [Angular Material UI](https://material.angular.io/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- Other dev tools\n  - ESLint\n  - Prettier\n  - Husky\n  - release-it\n\n## High-level Design\n\nBelow is the high-level structure of the application.\n\n```sh\n./src\n├── app\n│   ├── app.component.scss\n│   ├── app.component.ts\n│   ├── app.config.ts\n│   ├── app.routes.ts\n│   ├── app.store.ts # configure store based on NgRx or NGXS\n│   │\n│   ├── auth # includes authentication logic\n│   │   ├── auth.routes.ts\n│   │   ├── auth.service.ts\n│   │   ├── index.ts\n│   │   ├── guards\n│   │   ├── interceptors\n│   │   ├── login\n│   │   ├── models\n│   │   ├── tokens\n│   │   └── store     # Choose one of the following\n│   │       ├── ngrx  # store based on NgRx\n│   │       └── ngxs  # store based on NGXS\n│   │\n│   ├── core # includes core utilities\n│   │   ├── fake-api\n│   │   └── services\n│   │\n│   ├── features # all features of application\n│   │   ├── about\n│   │   ├── home\n│   │   └── secured-feat\n│   │\n│   └── shared\n│       ├── ui # UI components\n│       │   ├── avatar\n│       │   ├── footer\n│       │   ├── header\n│       │   └── icon\n│       │\n│       └── util # utility functions\n│\n├── environments # environment configurations\n│\n├── index.html\n├── main.ts\n├── styles.scss\n│\n└── theme # global theme styles\n    ├── _components.scss\n    ├── _material.scss\n    └── index.scss\n```\n\n## Contributing\n\nWho is for this? I would love for you to contribute to Angular Authentication! Before you start, please read the [Contributor Guide](https://github.com/nikosanif/angular-authentication/blob/main/CONTRIBUTING.md).\n\nIf you have found any bug in the source code or want to _request_ a new feature, you can help by [submitting an issue](https://github.com/nikosanif/angular-authentication/issues/new/choose) at GitHub. Even better, you can fork this repository and [submit a PR](https://github.com/nikosanif/angular-authentication/compare) with the fix or the new feature description.\n\n## Support\n\n- Star this repository 👆⭐️\n- Help it spread to a wider audience: [![X](https://img.shields.io/twitter/url/https/x.com/nikosanif.svg?style=social\u0026label=Tweet)](https://x.com/intent/tweet?text=An%20Angular%20application%20that%20demonstrates%20best%20practices%20for%20user%20authentication%20and%20authorization%20flows.%0A%0A%40nikosanif%20%0A%F0%9F%94%97%20https%3A%2F%2Fgithub.com%2Fnikosanif%2Fangular-authentication%0A%0A\u0026hashtags=Angular,NgRx,NGXS,MDX,tailwindcss,ngAuth)\n\n### Author: Nikos Anifantis ✍️\n\n- Fullstack Software Engineer - I’m currently working on Angular \u0026 Node.js application development.\n- I write stuff at [dev.to/nikosanif](https://dev.to/nikosanif) and [nikosanif.medium.com](https://nikosanif.medium.com/)\n- How to reach me: [![X](https://img.shields.io/twitter/url/https/x.com/nikosanif.svg?style=social\u0026label=Follow%20nikosanif)](https://x.com/nikosanif) or [![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?style=social\u0026style=flat\u0026logo=linkedin\u0026labelColor=blue\u0026label=Connect%20Nikos%20Anifantis)](https://www.linkedin.com/in/nikosanifantis/)\n\n## License\n\nFeel free to use this repository, but **please star and put a reference to this repository.** :pray: :heart:\n\n[MIT](https://opensource.org/licenses/MIT)\n","funding_links":[],"categories":["Recently Updated","Security and Authentication"],"sub_categories":["[Jul 15, 2024](/content/2024/07/15/README.md)","Authentication"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikosanif%2Fangular-authentication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikosanif%2Fangular-authentication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikosanif%2Fangular-authentication/lists"}