> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/berry-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/berry-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/navigation/navigation.ts` and remove the following import:

```typescript
import { Role } from './theme/shared/_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/_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/navigation/nav-content/nav-content.component.ts`

**Before:**

```typescript
private configService = inject(ConfigService);
layout = this.configService.layout;

// Life cycle events
ngOnInit() {
     if (this.windowWidth() < 1025) {
      setTimeout(() => {
        const el = document.querySelector('.coded-navbar');
        if (el) el.classList.add('menupos-static');
      }, 500);
    }
    const currentUser = this.authenticationService.currentUserValue;
    const userRoles = currentUser?.user.role ? [currentUser.user.role] : [Role.Admin];
    this.navigations = this.filterMenu(NavigationItems, userRoles);
}

```

After:

```typescript
private configService = inject(ConfigService);
layout = this.configService.layout;

// Life cycle events
ngOnInit() {
    if (this.windowWidth < 1025) {
        setTimeout(() => {
            (document.querySelector('.coded-navbar') as HTMLDivElement).classList.add('menupos-static');
        }, 500);
    }
}

```

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

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

Remove the following attributes:

```typescript
[parentRole]="item().role && item().role.length > 0 ? item().role : parentRole()"
```

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

```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-v1/v1-login/v1-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.