Angular Authentication

247

61

Nikos Anifantis

Added on December 21, 2024

An Angular application that demonstrates best practices for user authentication.

Angular Authentication

An Angular application that demonstrates best practices for user authentication.

Nikos Anifantis

README.md

An Angular application that demonstrates best practices for user authentication & authorization flows.

By @nikosanif

Netlify Status

Table of Contents

Live Demo

Live application: angular-authentication.netlify.app

Angular Authentication Demo

Getting Started

Prerequisites

Setup & Local Development

  • 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

Use it as a Template

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:

  • Clone this repository
  • Remove fake API:
    • Delete src/app/core/fake-api folder
    • Remove all references from the fake-api folder
    • Remove the fakeApiInterceptor from app.config.ts
  • Choose the state management library you want to use:
    • NgRx: Remove src/app/auth/store/ngxs folder and the index.ngxs.ts file
    • NGXS: Remove src/app/auth/store/ngrx folder and the index.ngrx.ts file
    • Rename the index.XXX.ts file to index.ts in the src/app/auth/store folder
    • Update the app.store.ts file to import the correct store module
    • Remove all unused packages from package.json
  • 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.

Useful Commands

  • npm start - starts a dev server of Angular app
  • npm run build:prod - 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 release-it to create new release

Features

Authentication Flows

Angular Authentication Demo Angular Authentication Demo

Other Features

  • Zoneless Angular application
  • Standalone Angular components
  • Angular Material UI components
  • Lazy loading of Angular components
  • API requests with @ngrx/effects or @ngxs/store (you can choose at src/app/app.config.ts)
  • Responsive design
  • Custom In-memory Web API using interceptors

Tech Stack

High-level Design

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

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:

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: or

License

Feel free to use this repository, but please star and put a reference to this repository. 🙏 ❤

MIT

Related Content

ng-mocks

An Angular testing library for creating mock services, components, directives, pipes and modules in unit tests. It provides shallow rendering, precise stubs to fake child dependencies. ng-mocks works with Angular 5 6 7 8 9 10 11 12 13 14 15 16, jasmine and jest.
GitHubUpdated 2 days ago

Angular JumpStart

The goal of this jumpstart app is to provide a simple way to get started with Angular while also showing several key Angular features and best practices.
GitHubUpdated 1 month ago

Angular Progressive Web Application (PWA)

Application example built with Angular 13 and adding the Progressive Web Application (PWA) using the @angular/pwa library.
GitHubUpdated 13 months ago

generator-ngx-rocket

N
ngx-rocket
Extensible Angular 12+ enterprise-grade project generator based on angular-cli with best practices from the community. Includes PWA, Cordova & Electron support, coding guides and more!
GitHubUpdated 18 months ago

Angular, NgRx & Angular Material Starter

Angular, NgRx and Angular Components (previously known as Material) Starter projects which shows you how to implement application with routing, custom themes, translations, state management and more
GitHubUpdated 27 months ago

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.