Angular Authentication: Best Practices π Nikos Anifantis - Nov 11 '21 - - Dev Community An Angular application that demonstrates best practices for user authentication flow.
By @nikosanif
An Angular application that demonstrates best practices for user authentication.
Angular Authentication
An Angular application that demonstrates best practices for user authentication flow.
By @nikosanif
Table of Contents
Live Demo
Live application: angular-authentication.netlify.app
Getting Started
Prerequisites
Setup & Usage
Clone this repository: git clone git@github.com:nikosanif/angular-authentication.git
cd angular-authentication
Install dependencies: npm install
Serve the Angular app: npm start
Open your browser at: http://localhost:4200
Useful Commands
npm start
- starts a dev server of Angular app
npm run build
- builds full prod build
npm run lint
- linting source code of this project
npm run format:check
- runs prettier to check for formatting errors
npm run format:write
- runs prettier to format whole code base
npm run release
- runs standard-version to create new release
Features
Authentication Flows
Other Features
Lazy loading of Angular modules
API requests with @ngrx/effects
Responsive design
In-memory Web API
Tech Stack
Live Demo
Live application: angular-authentication.netlify.app
Getting Started
Prerequisites
Setup & Usage
Clone this repository: git clone git@github.com:nikosanif/angular-authentication.git
cd angular-authentication
Install dependencies: npm install
Serve the Angular app: npm start
Open your browser at: http://localhost:4200
Useful Commands
npm start
- starts a dev server of Angular app
npm run build
- builds full prod build
npm run lint
- linting source code of this project
npm run format:check
- runs prettier to check for formatting errors
npm run format:write
- runs prettier to format whole code base
npm run release
- runs standard-version to create new release
Features
Authentication Flows
Other Features
Lazy loading of Angular modules
API requests with @ngrx/effects
Responsive design
In-memory Web API
Tech Stack
High-level Design
Below is the high-level structure of the application.
./src
βββ app
β βββ app # root app component
β β βββ app.component.html
β β βββ app.component.scss
β β βββ app.component.ts
β β
β βββ app-routing.module.ts
β βββ app.module.ts
β β
β βββ auth # includes authentication logic
β β βββ auth.module.ts
β β βββ auth.service.ts
β β βββ guards
β β βββ interceptors
β β βββ login
β β βββ store
β β
β βββ core # includes core utilities
β β βββ core.module.ts
β β βββ fake-api
β β βββ services
β β
β βββ features # all features of application
β β βββ about
β β βββ home
β β βββ secured-feat
β β
β βββ shared # shared UI modules and utilities
β βββ ui
β βββ util
β
βββ assets
β βββ ...
β
βββ environments
β βββ environment.prod.ts
β βββ environment.ts
β
βββ ...
β
βββ theme # global theme styles
βββ _components.scss
βββ _typography.scss
βββ index.scss
Enter fullscreen mode
Exit fullscreen mode
Contributing
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.
Support
Author: Nikos Anifantis βοΈ
License
Feel free to use this repository, but please star and put a reference to this repository. π β€οΈ
MIT