Angular Authentication

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

By @nikosanif

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

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

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.