DEV Community

Cover image for Angular Project Structure: Auth Module
Simi Lika
Simi Lika

Posted on • Updated on

Angular Project Structure: Auth Module

#webdev #productivity #angular #structure

This post provides an overview of the auth module in Angular and guides you on its integration into your project structure.
Building a web application involves many aspects, and one of the most crucial is user authentication. The auth module serves as the gatekeeper, ensuring only authorized users access privileged information and functions.

What is the auth module?

The auth module encapsulates functionalities related to user authentication, login, refresh tokens, session management, and user data handling. It offers several benefits:

  • Centralized logic: Simplifies maintenance and code organization.
  • Modular structure: Easier to test and reuse components.
  • Improved security: Reduces risk of unauthorized access.

What functionalities can it include?

The specific functionalities can vary, but common features include:

  • Login and logout mechanisms: Handle user credentials and session management.
  • Token handling: Store and use tokens for secure API access.
  • User role management: Define and enforce access levels for different users.
  • Authentication guards: Protect confidential routes for authorized users.
  • Error handling: Handle invalid credentials, expired tokens, and other issues.

Integrating the auth module into your Angular project structure:

Creating the module: 

    Generate a `new module` with `ng g m auth`.
    Generate a `new route module` with `ng g m auth-routing`.
    Define relevant components within the module folder.
Enter fullscreen mode Exit fullscreen mode 
> auth
Enter fullscreen mode Exit fullscreen mode

After generating the auth.module.ts and auth-routing.module.ts the structure will look like:

...
|--auth/
|  |--auth.module.ts
|  |--auth-routing.module.ts
...
Enter fullscreen mode Exit fullscreen mode

Components:

  • Develop a LoginComponent, ChangePasswordComponent, and ForgotPasswordComponent for user login, forgot password and change password.
  • Integrate UI elements like login forms, error messages, and user profile displays.
  • Create an index.ts file for a more smoothly access for the components. After generating the components and index file the auth module will look like: 
...
|--auth/
|  |--components/
|  |  |--login/
|  |  |  |--login.component.ts/spec.ts/html/scss
|  |  |--forgot-password/
|  |  |  |--forgot-password.component.ts/spec.ts/html/scss
|  |  |--change-password/
|  |  |  |--change-password.component.ts/spec.ts/html/scss
|  |  |--index.ts
|  |--auth.module.ts
|  |--auth-routing.module.ts
...
Enter fullscreen mode Exit fullscreen mode

Now let's get inside auth module

We have the file index.ts in auth/components directory which plays a crucial role in simplifying imports and exports within the component sub-module.

import {LoginComponent} from "./login/login.component";
import {ChangePasswordComponent} from "./change-password/change-password.component";
import {ForgotPasswordComponent} from "./forgot-password/forgot-password.component";

export const components: any[] = [
  LoginComponent,
  ChangePasswordComponent,
  ForgotPasswordComponent
]

export * from './change-password/change-password.component';
export * from './login/login.component';
export * from './forgot-password/forgot-password.component';
Enter fullscreen mode Exit fullscreen mode

And we can then import in into auth.module.ts as:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {AuthRoutingModule} from "./auth-routing.module";
import {SharedModule} from '@shared/shared.module';
import * as fromComponents from './components'; // the import of 'index.ts' file
import {ChangePasswordComponent} from './components';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {ForgotPasswordComponent} from '@auth/components';

@NgModule({
  entryComponents: [
    ChangePasswordComponent,
  ],
 declarations: [...fromComponents.components, // Implementing the components here
                ForgotPasswordComponent],
  imports: [
    CommonModule, HttpClientModule, AuthRoutingModule, SharedModule, MatCheckboxModule
  ]
})
export class AuthModule {
  constructor() {
  }
}
Enter fullscreen mode Exit fullscreen mode

For the auth-routing.module.ts we can update it like this:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {CommonModule} from '@angular/common';
import {LoginComponent} from './components';

const routes: Routes = [
  {path: '', component: LoginComponent, pathMatch: 'full'}
];

@NgModule({
  declarations: [],
  imports: [CommonModule, RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {
}
Enter fullscreen mode Exit fullscreen mode

For the services, intercepors, guards, etc.. that are part of
auth module we will implement them into core module:

...
|--auth/
> |--core/
...
Enter fullscreen mode Exit fullscreen mode

For this we will speak more in the next post.

Top comments (0)

Read next

himanshudevgupta profile image

What Are Standalone Components Angular 17 ?

Himanshu Gupta -

allyn profile image

LeetCode

allyn -

shaheryaryousaf profile image

Start with Python Dictionaries

Shaheryar -

emmabase profile image

How to Implement pagination on API Endpoint Using Nodejs and TypeScript

Emmanuel Eneche -