Angular Project Structure: Auth Module
Tags: webdev, productivity, angular, structure
Published: 2024-01-26 15:27:50

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.
``` bash
> auth
```
After generating the `auth.module.ts` and `auth-routing.module.ts` the structure will look like:
``` bash 
...
|--auth/
|  |--auth.module.ts
|  |--auth-routing.module.ts
...
```
#### **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:
``` bash
...
|--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
...
```
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.
``` typescript
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';
```
And we can then import in into `auth.module.ts` as:
``` typescript
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() {
  }
}
```
For the `auth-routing.module.ts` we can update it like this:
``` typescript
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 {
}
```
For the `services`, `intercepors`, `guards`, etc.. that are part of 
`auth module` we will implement them into `core module`:
``` bash
...
|--auth/
> |--core/
...
```
For this we will speak more in the next post.