DEV Community

Cover image for Angular Authentication: Best Practices πŸ†
Nikos Anifantis
Nikos Anifantis

Posted on

Angular Authentication: Best Practices πŸ†

An Angular application that demonstrates best practices for user authentication flow.

By @nikosanif

GitHub logo 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

Open in Visual Studio Code license code style: prettier Twitter Follow

Table of Contents

Live Demo

Live application: angular-authentication.netlify.app

Angular Authentication Demo

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

Angular Authentication Demo Angular Authentication Demo

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

Angular Authentication Demo

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

Angular Authentication Demo
Angular Authentication Demo

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

  • 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: Twitter LinkedIn

License

Feel free to use this repository, but please star and put a reference to this repository. πŸ™ ❀️

MIT

Discussion (2)

Collapse
chiragshivam profile image
Chivi

That's very helpful, will definitely implement it

Thanks for sharing!

Collapse
nikosanif profile image
Nikos Anifantis Author

Thanks for your feedback! I am very happy to hear that! 🀩