AngularAuthentication

              

(Angular + AngularMaterial + RxJS)

This repository contains a simple reusable login component for implementing both sign-in and sign-up functionality in an Angular application. The repository also includes a collection of useful features and utilities, including guards, directives, interceptors, Validators, and ErrorStateMatchers.

Overview

SignIn (Success)

SignIn (Failure)

SignUp

Structure

• service AuthService (providedIn: ‘root’) (mockup)

• service JwtService (providedIn: ‘root’) (mockup)

• module MaterialModule

• module AppModule

  • c: AppComponent
    • c: HelloComponent
  • m: MaterialModule (import)

• module LoginModule

  • c: LoginComponent
    • c: SignInComponent
    • c: SignUpComponent
    • c: StatusComponent
  • d: IsAuthenticatedDirective
  • m: MaterialModule (import)

• interceptor TokenInterceptor

• guard IsAuthenticatedGuard

• guard IsNotAuthenticatedGuard

Features

• Angular
• Angular Material
• Angular Material ErrorStateMatcher
• Reactive Forms
• Form Validators (built-in + custom)
• Guard
• Interceptor
• Custom Directive
• ChangeDetectionStrategy.OnPush for all components
• RxJS
• Login States
  • Mode = {‘signin’, ‘signup’}
  • Status = {‘initial’, ‘pending’, ‘success’, ‘error’}
• Toggle Password Visibility
• Lazy Loading (lazy-loaded route)

Getting Started

Prerequisite

• Node.js
• Angular CLI

Installation

• Clone the repository

 $ git clone https://github.com/stefanoandroni/angular-authentication  

• Install the project dependencies

 $ npm install 

• Start the development server

 $ ng serve 

• Open your browser and navigate to http://localhost:4200/

Usage

1. Import the LoginModule into your Angular application module (e.g., app.module.ts)
2. In your component template, use the <app-login> selector to include the login component
3. Implement authentication methods in AuthService and customize the component

TODO

• states managment with NgRx