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.
> auth
After generating the auth.module.ts and auth-routing.module.ts the structure will look like:
...
|--auth/
| |--auth.module.ts
| |--auth-routing.module.ts
...
Components:
- Develop a
LoginComponent,ChangePasswordComponent, andForgotPasswordComponentfor user login, forgot password and change password. - Integrate UI elements like login forms, error messages, and user profile displays.
- Create an
index.tsfile for a more smoothly access for the components. After generating the components and index file theauth modulewill 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
...
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';
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() {
}
}
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 {
}
For the services, intercepors, guards, etc.. that are part of
auth module we will implement them into core module:
...
|--auth/
> |--core/
...
For this we will speak more in the next post.
Top comments (1)
i guess you should to update this article if you talking about angular 18, on this project we don't need to use modules.