An Angular application that demonstrates best practices for user authentication.
Nikos Anifantis
An Angular application that demonstrates best practices for user authentication & authorization flows.
By @nikosanif
Live application: angular-authentication.netlify.app
git clone git@github.com:nikosanif/angular-authentication.git
cd angular-authentication
npm install
npm start
http://localhost:4200
The 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.
If you want to use this repository as a template for your project, you can follow these steps:
src/app/core/fake-api
folderfake-api
folderfakeApiInterceptor
from app.config.ts
src/app/auth/store/ngxs
folder and the index.ngxs.ts
filesrc/app/auth/store/ngrx
folder and the index.ngrx.ts
fileindex.XXX.ts
file to index.ts
in the src/app/auth/store
folderapp.store.ts
file to import the correct store modulepackage.json
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.npm start
- starts a dev server of Angular appnpm run build:prod
- builds full prod buildnpm run lint
- linting source code of this projectnpm run format:check
- runs prettier to check for formatting errorsnpm run format:write
- runs prettier to format whole code basenpm run release
- runs release-it
to create new release
@ngrx/effects
or @ngxs/store
(you can choose at src/app/app.config.ts
)Below is the high-level structure of the application.
./src
├── app
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.config.ts
│ ├── app.routes.ts
│ ├── app.store.ts # configure store based on NgRx or NGXS
│ │
│ ├── auth # includes authentication logic
│ │ ├── auth.routes.ts
│ │ ├── auth.service.ts
│ │ ├── index.ts
│ │ ├── guards
│ │ ├── interceptors
│ │ ├── login
│ │ ├── models
│ │ ├── tokens
│ │ └── store # Choose one of the following
│ │ ├── ngrx # store based on NgRx
│ │ └── ngxs # store based on NGXS
│ │
│ ├── core # includes core utilities
│ │ ├── fake-api
│ │ └── services
│ │
│ ├── features # all features of application
│ │ ├── about
│ │ ├── home
│ │ └── secured-feat
│ │
│ └── shared
│ ├── ui # UI components
│ │ ├── avatar
│ │ ├── footer
│ │ ├── header
│ │ └── icon
│ │
│ └── util # utility functions
│
├── environments # environment configurations
│
├── index.html
├── main.ts
├── styles.scss
│
└── theme # global theme styles
├── _components.scss
├── _material.scss
└── index.scss
Who is for this? I would love for you to contribute to Angular Authentication! Before you start, please read the Contributor Guide.
If you have found any bug in the source code or want to request a new feature, you can help by submitting an issue at GitHub. Even better, you can fork this repository and submit a PR with the fix or the new feature description.
Feel free to use this repository, but please star and put a reference to this repository. 🙏 ❤
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.