Angular Security with OAuth2 and Custom JWT

• Module Based implementation (auth, core, features, shared), Angular 11 with Bootstrap 5
• Custom register/login, password-reset included
• Public & Authenticated Pages, param based routing and form validations

Link:

• Backend: https://github.com/ashrawan/Spring-Security-OAuth-Example
• Viewing Frontend: https://github.com/ashrawan/Angular-Security-OAuthJWT-Example

Basic Setup - Main Structure:

• Auth Module : Login, Signup and authentication related services

• Core Module : Global Constants/Utils/Models, All Services, URL Constant etc. (anything global/abstract/core, and reusable tools/constant)

• Feature Module : App specific components.
  This App (Angular Sample Starter) :

  • Public Pages (publicy accessible related components)
  • Dashboard (user dasboard, can be general or user specific. e.g Admin/Normal-User)

• Shared Module : Generic Components that can be used anywhere (Buttons, Inputs, Loading, Icons, card-component etc. )

• Additional Notes:

  • If App Code-Base Scales ? : Create or Modify feature/components/view under their own baseline module; i.e create modules to group them.
    • Import modules only when required and use lazy loading.
  • Need to add or test a new functionality ? : Create a seperate modules in root directory "/app", and use as required.
  • Need custom css with component/section seperation ? : Create main folder "Styles" and other structure as required. Use SCSS file and import them into main styles.scss file.

# Initialized

This project was generated with Angular CLI version 11.0.5.

# Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

ng serve

# Project Structure and Overview

• Folder Structure

app
    -> auth
        services
        guards
        login-page
        signup-page
        verify-request
        _auth.model.ts_
    -> core
        model (users, ....)
        services
        [app-url.constant, core.constant, core.util ...]
    -> features
        ->dashboard
            components (general components - sidebar, nav etc.)
            dash-main (main dashboard page)
            ...other pages
        -> public-pages
            components (general - top-navigation, footer etc.)
            home-page
            contact-page
            ...other pages
    -> shared
        loading
        custom-card-component
        buttons,
        etc...
    _app.module.ts_

    => assets
    => environments
    _main.ts_ (entry point)
    
    index.html  (<app-root> renders-entry-point </app-root>)
    styles.scss
    => OPTIONAL: [styles] - folder containing styles files

    angular.json
    package.json
    tsconfig.app.json
    tslint.json

---

# API endpoints

• core -> app-url.constant.ts API endpoint

    // e.g. Authentication endpoints
    static readonly AUTH = {
        CUSTOM_USER_REGISTRATION: API_ENDPOINT + '/auth/register',
        CUSTOM_USER_LOGIN: API_ENDPOINT + '/auth/login',

        CHECK_VERIFICATION_CODE: API_ENDPOINT + '/auth/check-verification-code',
        RESEND_VERIFICATION_EMAIL: API_ENDPOINT + '/auth/resend-verification-email',
        FORGOT_PASSWORD: API_ENDPOINT + '/auth/send-forgot-password',
        PASSWORD_RESET_SET_NEW_PASS: API_ENDPOINT + '/auth/process-password-reset',


        // '/oauth2/authorize/google?redirect_uri=' + API_ENDPOINT
        GOOGLE_AUTH: API_ENDPOINT + '/oauth2/authorize/google?' + OAUTH2_UI_REDIRECT_URI,
        FACEBOOK_AUTH: API_ENDPOINT + '/oauth2/authorize/facebook?' + OAUTH2_UI_REDIRECT_URI,
        GITHUB_AUTH: API_ENDPOINT + '/oauth2/authorize/github?' + OAUTH2_UI_REDIRECT_URI,

        LOGOUT: API_ENDPOINT + '/logout',

    };

# Front App Routes

• core ->

export const APP_ROUTES = {
  HOME: '/',
  LOGIN: '/login',
  REGISTER: '/register',
  VERIFY: '/verify',

  CONTACT: '/contact',
  SOLUTIONS: '/solutions',


  DASHBOARD: '/dashboard',
};

# Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.