Angular Authentication: Best Practices ๐
source link: https://dev.to/nikosanif/angular-authentication-best-practices-3h8h
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
An Angular application that demonstrates best practices for user authentication flow.
By @nikosanif
nikosanif / angular-authentication
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 [email protected]: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 [email protected]: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
- Angular
- NgRX - @ ngrx/{store,effects,component}
- Taiga UI
- Tailwind CSS
Other dev tools
- ESLint
- Prettier
- Husky
- standard-vesrion
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
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
- Star this repository โญ๏ธ
- Help it spread to a wider audience: Tweet
Author: Nikos Anifantis โ๏ธ
- Fullstack Software Engineer - Iโm currently working on Angular & Node.js application development.
- I write stuff at dev.to/nikosanif and nikosanif.medium.com
How to reach me:
License
Feel free to use this repository, but please star and put a reference to this repository. ๐ โค๏ธ
Discussion (2)
That's very helpful, will definitely implement it
Thanks for sharing!
Thanks for your feedback! I am very happy to hear that! ๐คฉ
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK