Remove Authentication

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:

src/layouts/MainLayout/index.tsx
// import AuthGuard from 'utils/route-guard/AuthGuard';

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

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.

.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=

  1. 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)

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

src/layouts/MainLayout/index.tsx
...
...
return (
      <Stack direction="row" width={1}>
        <Header />
        ...
      </Stack>
  );

  1. Remove AuthRoutes - Open file ./src/routes/index.tsx, and remove AuthRoutes import.

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;

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

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;

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

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;

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

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' }
];

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

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'
        }
      ]
    },

PreviousHow toNextState Management

Last updated

Was this helpful?