> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/mantis-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/mantis-angular/how-to/remove-role-base-authentication.md).

# Remove Role Base Authentication

## **Temporary Disable Role-Based Authentication**

To temporarily disable authentication, modify the role-based access in the following files.

#### **Step 1: Update `app-routing.module.ts` and `navigation.ts`**

**Before:** 

```typescript
data: { roles: [Role.Admin, Role.User] }
```

**After:** 

```typescript
data: { roles: [Role.Admin] }
This ensures that all users are treated as Admin, bypassing role-based restrictions.
```

{% hint style="warning" %}
This ensures that all users are treated as `Admin`, bypassing role-based restrictions.
{% endhint %}

***

## Remove Role Base Authentication Permanent

To remove authentication permanently, follow these steps.

#### **Step 1: Remove Role Import**

Open `src/app/app-routing.module.ts` and `src/app/theme/layout/admin-layout/navigation/navigation.ts` and remove the following import:

```typescript
import { Role } from './theme/shared/components/_helpers/role';
```

#### **Step 2: Remove Role-Based Data Restrictions**

Find and remove:

```typescript
data: { roles: [Role.Admin, Role.User] }

data: { roles: [Role.Admin] }
```

#### **Step 3: Modify `auth.guard.ts` to Remove Authorization Check**

Open `src/app/theme/shared/components/_helpers/auth.guard.ts` and **delete** this block:

```typescript
const { roles } = route.data;
if (roles && !roles.includes(currentUser.user.role)) {
    // User not authorized, redirect to unauthorized page
    this.router.navigate(['/unauthorized']);
    return false;
}
```

#### **Step 4: Modify `nav-content.component.ts` to Remove Role Filtering**

Open `src/app/theme/layout/admin-layout/navigation/nav-content/nav-content.component.ts`

**Before:**

```typescript
// Life cycle events
ngOnInit() {
    this.layout = MantisConfig.layout;
    const currentUser = this.authenticationService.currentUserValue;
    const userRoles = currentUser?.user.role ? [currentUser.user.role] : [Role.Admin];
    this.navigations = this.filterMenu(NavigationItems, userRoles);
}

```

After:

```typescript
constructor() {
    this.navigations = NavigationItems;
}

// Life cycle events
ngOnInit() {
     this.layout = MantisConfig.layout;
}

```

#### **Step 5: Remove Role-Based UI Restrictions**

**Modify `nav-collapse.component.html`**

Remove the following attributes:

```html
[ngClass]="{ disabled: !isEnabled }"
ngbTooltip="{{ !isEnabled ? 'You do not have permission to access this page ' : '' }}"
[parentRole]="item().role && item().role.length > 0 ? item().role : parentRole()"
```

**Modify `nav-group.component.html`**

Delete the below content at **lines 7 and 9**:

```html
[parentRole]="item().role"
```

**Modify `nav-item.component.html`**

**Before:**

```html
<li
    [ngClass]="item().classes!"
    [routerLinkActive]="['active']"
    ngbTooltip="{{ !isEnabled ? 'You do not have permission to access this page ' : '' }}"
>
    <a
        class="nav-link"
        [target]="item().target ? '_blank' : '_self'"
        [ngClass]="{ disabled: !isEnabled }"
        [routerLink]="[item().url]"
        (click)="closeOtherMenu($event)"
    >
        @if (!isEnabled) {
            <span class="coded-micon" [ngClass]="{ disabled: !isEnabled }">
                <i class="ti ti-lock"></i>
            </span>
        } @else {
            <ng-container *ngTemplateOutlet="itemIcon"></ng-container>
        }
        @if (item().icon) {
            <span class="coded-mtext">{{ item().title | translate }}</span>
        } @else {
            @if (!isEnabled) {
                <span class="coded-micon" [ngClass]="{ disabled: !isEnabled }">
                    <i class="ti ti-lock"></i>
                </span>
            }
            {{ item().title | translate }}
        }
    </a>
</li>

```

**After:**

```html
<li
    [ngClass]="item().classes!"
    [routerLinkActive]="['active']"
>
    <a
        class="nav-link"
        [target]="item().target ? '_blank' : '_self'"
        [routerLink]="[item().url]"
        (click)="closeOtherMenu($event)"
    >
        <ng-container *ngTemplateOutlet="itemIcon"></ng-container>
        @if (item().icon) {
            <span class="coded-mtext">{{ item().title | translate }}</span>
        } @else {
            {{ item().title | translate }}
        }
    </a>
</li>

```

{% hint style="warning" %}
This removes tooltips and disables restrictions on menu items.
{% endhint %}

### **Step 6: Modify Login Page UI**

Open `src/app/demo/pages/authentication/authentication/auth-login/auth-login.component.html` and **remove**:

```typescript
<ul class="nav nav-tabs admin-role d-block">
   <div class="row g-2">
        @if (!this.authenticationService.isLoggedIn()) {
            @for (role of roles; track role.role) {
                <div class="col-sm-6">
                    <li class="nav-item">
                        <a href="javascript:void(0)" class="nav-link" [class.active]="selectedRole === role" (click)="onSelectRole(role)">
                            {{ role.name }}
                        </a>
                    </li>
                </div>
            }
        }
    </div>
</ul>

```

📌 This removes the role selection UI.