> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/materially-react-material-documentation/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/materially-react-material-documentation/how-to/remove-authentication.md).

# Remove Authentication

{% tabs %}
{% tab title="VITE(TS)" %}

## **Disable Authentication Temporary**

Disabling authentication temporarily is generally not recommended due to security risks. However, if you have a specific scenario where you need to disable authentication for a short period, here are some steps you can follow:

1. Comment out the `AuthGuard` wrapper for the routes within the `MainLayout` element:

{% code title="src/layouts/MainLayout/index.tsx" %}

```typescript
// import AuthGuard from 'utils/route-guard/AuthGuard';

...
...
return (
    // <AuthGuard>
      <Stack direction="row" width={1}>
        <Header />
        ...
      </Stack>
    // </AuthGuard>
  );
  
```

{% endcode %}

In the code snippet above, the `<AuthGuard>` a component is commented out, allowing the routes within the `MainLayout` component to be rendered without authentication protection. To enable the AuthGuard wrapper again, remove the comment markers (`//`) surrounding the `<AuthGuard>` component.

## Remove Authentication Permanent

If you want to permanently remove authentication from a system or application, here are the steps to follow:

1. **Remove the below authentication keys from `.env` the file.**

{% code title=".env" %}

```
## Firebase - Google Auth 

VITE_APP_FIREBASE_API_KEY=
VITE_APP_FIREBASE_AUTH_DOMAIN=
VITE_APP_FIREBASE_PROJECT_ID=
VITE_APP_FIREBASE_STORAGE_BUCKET=
VITE_APP_FIREBASE_MESSAGING_SENDER_ID=
VITE_APP_FIREBASE_APP_ID=
VITE_APP_FIREBASE_MEASUREMENT_ID=

## Auth0

VITE_APP_AUTH0_CLIENT_ID=
VITE_APP_AUTH0_DOMAIN=
```

{% endcode %}

2. **Removed below list of files and directories.**

```
materially-react-mui-ts
..
├── src
│   ├── context
│   │   ├── AuthContext.tsx
│   ├── hooks
│   │   ├── useAuth.ts
│   ├── layouts
│   │   ├── AuthLayout (remove directory with all subfiles)
│   ├── routes
│   │   ├── AuthRoutes.tsx
│   ├── sections
│   │   ├── auth (remove directory with all subfiles)
│   ├── utils
│   │   ├── api (remove directory with all subfiles)
│   │   ├── auth-client (remove directory with all subfiles)
│   │   ├── route-guard (remove directory with all subfiles)
│   ├── views
│   │   ├── auth (remove directory with all subfiles)

```

3. Remove `AuthGuard` - Open file src/layouts/MainLayout/index.tsx, and remove `AuthGuard`

{% code title="src/layouts/MainLayout/index.tsx" %}

```typescript
...
...
return (
      <Stack direction="row" width={1}>
        <Header />
        ...
      </Stack>
  );
  
```

{% endcode %}

4. **Remove `AuthRoutes`** - Open file ./src/routes/index.tsx, and remove `AuthRoutes` import.

{% code title="src/routes/index.tsx" %}

```
import { createBrowserRouter } from 'react-router-dom';

// routes
import MainRoutes from './MainRoutes';
import PagesRoutes from './PagesRoutes';

// ==============================|| ROUTING RENDER ||============================== //

const router = createBrowserRouter([MainRoutes, PagesRoutes], {
  basename: import.meta.env.VITE_APP_BASE_URL
});

export default router;
```

{% endcode %}

5. Remove `AuthProvider`  - Open file src/App.tsx, and remove AuthProvider import.

{% code title="src/App.tsx" %}

```
import { RouterProvider } from 'react-router-dom';

// project imports
import Locales from 'components/Locales';
import Snackbar from 'components/Snackbar';
import { ConfigProvider } from 'contexts/ConfigContext';

import ThemeCustomization from 'themes';

import router from 'routes';

function App() {
  return (
    <ConfigProvider>
      <ThemeCustomization>
        <Locales>
            <RouterProvider router={router} />
            <Snackbar />
        </Locales>
      </ThemeCustomization>
    </ConfigProvider>
  );
}

export default App; 
```

{% endcode %}

6. Remove Auth pages routes from `PageRoutes` - Open file  ./src/routes/PageRoutes.tsx and remove Auth pages import.

{% code title="src/routes/PageRoutes.tsx" %}

```
import { lazy } from 'react';

// project imports
import Loadable from 'components/Loadable';
import PagesLayout from 'layouts/PagesLayout';

// pages
const ErrorPages1 = Loadable(lazy(() => import('views/pages/error/Error1')));
const ErrorPages2 = Loadable(lazy(() => import('views/pages/error/Error2')));
const UnderMaintenancePage = Loadable(lazy(() => import('views/pages/UnderMaintenance')));

// ==============================|| PAGES ROUTES ||============================== //

const PagesRoutes = {
  path: 'pages',
  element: <PagesLayout />,
  children: [
    {
      path: 'error',
      children: [
        {
          path: 'error1',
          element: <ErrorPages1 />
        },
        {
          path: 'error2',
          element: <ErrorPages2 />
        }
      ]
    },
    {
      path: 'under-maintenance',
      element: <UnderMaintenancePage />
    }
  ]
};

export default PagesRoutes;

```

{% endcode %}

7. Remove logout - Open file src/layouts/MainLayout/Header/Profile.tsx and remove logout import.

{% code title="src/layouts/MainLayout/Header/Profile.tsx" %}

```
...
// project imports
import MainCard from 'components/cards/MainCard';
import { ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';

...
...
const menuItems: MenuItem[] = [
  { icon: <SettingsTwoToneIcon />, label: 'Settings' },
  { icon: <PersonTwoToneIcon />, label: 'Profile', path: '/apps/user/profile' },
  { icon: <DraftsTwoToneIcon />, label: 'My Messages' },
  { icon: <LockOpenTwoTone />, label: 'Lock Screen' },
  { icon: <MeetingRoomTwoToneIcon />, label: 'Logout' }
];
```

{% endcode %}

8. Remove Auth pages from menu items  - Open file src/menu-items/pages.ts remove below code

{% code title="src/menu-items/pages.ts" %}

```
 {
      id: 'auth',
      title: 'auth',
      type: 'collapse',
      icon: icons.SecurityOutlinedIcon,
      children: [
        {
          id: 'login-1',
          title: 'login',
          type: 'item',
          url: '/pages/auth/login',
          target: '_blank'
        },
        {
          id: 'register',
          title: 'register',
          type: 'item',
          url: '/pages/auth/register',
          target: '_blank'
        },
        {
          id: 'forget-1',
          title: 'forget',
          type: 'item',
          url: '/pages/auth/forgot-password',
          target: '_blank'
        },
        {
          id: 'password-recovery',
          title: 'password-recovery',
          type: 'item',
          url: '/pages/auth/password-recovery',
          target: '_blank'
        },
        {
          id: 'otp-verification',
          title: 'otp-verification',
          type: 'item',
          url: '/pages/auth/otp-verification?email=demo@materially.com',
          target: '_blank'
        }
      ]
    },
```

{% endcode %}
{% endtab %}

{% tab title="VITE(JS)" %}

## **Disable Authentication Temporary**

Disabling authentication temporarily is generally not recommended due to security risks. However, if you have a specific scenario where you need to disable authentication for a short period, here are some steps you can follow:

1. Comment out the `AuthGuard` wrapper for the routes within the `MainLayout` element:

{% code title="src/layouts/MainLayout/index.jsx" %}

```typescript
// import AuthGuard from 'utils/route-guard/AuthGuard';

...
...
return (
    // <AuthGuard>
      <Stack direction="row" width={1}>
        <Header />
        ...
      </Stack>
    // </AuthGuard>
  );
  
```

{% endcode %}

In the code snippet above, the `<AuthGuard>` a component is commented out, allowing the routes within the `MainLayout` component to be rendered without authentication protection. To enable the AuthGuard wrapper again, remove the comment markers (`//`) surrounding the `<AuthGuard>` component.

## Remove Authentication Permanent

If you want to permanently remove authentication from a system or application, here are the steps to follow:

1. **Remove below authentication keys from `.env` file.**

{% code title=".env" %}

```
## Firebase - Google Auth 

VITE_APP_FIREBASE_API_KEY=
VITE_APP_FIREBASE_AUTH_DOMAIN=
VITE_APP_FIREBASE_PROJECT_ID=
VITE_APP_FIREBASE_STORAGE_BUCKET=
VITE_APP_FIREBASE_MESSAGING_SENDER_ID=
VITE_APP_FIREBASE_APP_ID=
VITE_APP_FIREBASE_MEASUREMENT_ID=

## Auth0

VITE_APP_AUTH0_CLIENT_ID=
VITE_APP_AUTH0_DOMAIN=
```

{% endcode %}

2. **Removed below list of files and directory.**

```
materially-react-mui-js
..
├── src
│   ├── context
│   │   ├── AuthContext.jsx
│   ├── hooks
│   │   ├── useAuth.js
│   ├── layouts
│   │   ├── AuthLayout (remove directory with all sub files)
│   ├── routes
│   │   ├── AuthRoutes.jsx
│   ├── sections
│   │   ├── auth (remove directory with all sub files)
│   ├── utils
│   │   ├── api (remove directory with all sub files)
│   │   ├── auth-client (remove directory with all sub files)
│   │   ├── route-guard (remove directory with all sub files)
│   ├── views
│   │   ├── auth (remove directory with all sub files)

```

3. Remove `AuthGuard` - Open file src/layouts/MainLayout/index.jsx, and remove `AuthGuard`

{% code title="src/layouts/MainLayout/index.jsx" %}

```typescript
...
...
return (
      <Stack direction="row" width={1}>
        <Header />
        ...
      </Stack>
  );
  
```

{% endcode %}

4. **Remove `AuthRoutes`** - Open file ./src/routes/index.jsx, and remove `AuthRoutes` import.

{% code title="src/routes/index.jsx" %}

```
import { createBrowserRouter } from 'react-router-dom';

// routes
import MainRoutes from './MainRoutes';
import PagesRoutes from './PagesRoutes';

// ==============================|| ROUTING RENDER ||============================== //

const router = createBrowserRouter([MainRoutes, PagesRoutes], {
  basename: import.meta.env.VITE_APP_BASE_URL
});

export default router;
```

{% endcode %}

5. Remove `AuthProvider`  - Open file src/App.jsx, and remove AuthProvider import.

{% code title="src/App.jsx" %}

```
import { RouterProvider } from 'react-router-dom';

// project imports
import Locales from 'components/Locales';
import Snackbar from 'components/Snackbar';
import { ConfigProvider } from 'contexts/ConfigContext';

import ThemeCustomization from 'themes';

import router from 'routes';

function App() {
  return (
    <ConfigProvider>
      <ThemeCustomization>
        <Locales>
            <RouterProvider router={router} />
            <Snackbar />
        </Locales>
      </ThemeCustomization>
    </ConfigProvider>
  );
}

export default App; 
```

{% endcode %}

6. Remove Auth pages routes from `PageRoutes` - Open file  ./src/routes/PageRoutes.jsx and remove Auth pages import.

{% code title="src/routes/PageRoutes.jsx" %}

```
import { lazy } from 'react';

// project imports
import Loadable from 'components/Loadable';
import PagesLayout from 'layouts/PagesLayout';

// pages
const ErrorPages1 = Loadable(lazy(() => import('views/pages/error/Error1')));
const ErrorPages2 = Loadable(lazy(() => import('views/pages/error/Error2')));
const UnderMaintenancePage = Loadable(lazy(() => import('views/pages/UnderMaintenance')));

// ==============================|| PAGES ROUTES ||============================== //

const PagesRoutes = {
  path: 'pages',
  element: <PagesLayout />,
  children: [
    {
      path: 'error',
      children: [
        {
          path: 'error1',
          element: <ErrorPages1 />
        },
        {
          path: 'error2',
          element: <ErrorPages2 />
        }
      ]
    },
    {
      path: 'under-maintenance',
      element: <UnderMaintenancePage />
    }
  ]
};

export default PagesRoutes;

```

{% endcode %}

7. Remove logout - Open file src/layouts/MainLayout/Header/Profile.jsx and remove logout import.

{% code title="src/layouts/MainLayout/Header/Profile.jsx" %}

```
...
// project imports
import MainCard from 'components/cards/MainCard';
import { ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';

...
...
const menuItems: MenuItem[] = [
  { icon: <SettingsTwoToneIcon />, label: 'Settings' },
  { icon: <PersonTwoToneIcon />, label: 'Profile', path: '/apps/user/profile' },
  { icon: <DraftsTwoToneIcon />, label: 'My Messages' },
  { icon: <LockOpenTwoTone />, label: 'Lock Screen' },
  { icon: <MeetingRoomTwoToneIcon />, label: 'Logout' }
];
```

{% endcode %}

8. Remove Auth pages from menu items  - Open file src/menu-items/pages.js remove below code

{% code title="src/menu-items/pages.js" %}

```
 {
      id: 'auth',
      title: 'auth',
      type: 'collapse',
      icon: icons.SecurityOutlinedIcon,
      children: [
        {
          id: 'login-1',
          title: 'login',
          type: 'item',
          url: '/pages/auth/login',
          target: '_blank'
        },
        {
          id: 'register',
          title: 'register',
          type: 'item',
          url: '/pages/auth/register',
          target: '_blank'
        },
        {
          id: 'forget-1',
          title: 'forget',
          type: 'item',
          url: '/pages/auth/forgot-password',
          target: '_blank'
        },
        {
          id: 'password-recovery',
          title: 'password-recovery',
          type: 'item',
          url: '/pages/auth/password-recovery',
          target: '_blank'
        },
        {
          id: 'otp-verification',
          title: 'otp-verification',
          type: 'item',
          url: '/pages/auth/otp-verification?email=demo@materially.com',
          target: '_blank'
        }
      ]
    },
```

{% endcode %}
{% endtab %}
{% endtabs %}