How to'sRemove Auth This page describes how to remove auth for VITE
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:
Comment out the AuthGuard
wrapper for the routes within the DashboardLayout
element:
src/layout/Dashboard/index.jsx
Copy // import AuthGuard from 'utils/route-guard/AuthGuard';
...
...
return (
// <AuthGuard>
<Box sx={{ display: 'flex', width: '100%' }}>
<Header />
...
</Box>
// </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:
Remove below authentication keys from .env
file.
Copy ...
.
## 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=
## AWS
VITE_APP_AWS_POOL_ID=
VITE_APP_AWS_APP_CLIENT_ID=
## Auth0
VITE_APP_AUTH0_CLIENT_ID=
VITE_APP_AUTH0_DOMAIN=
...
...
Removed below list of files and directory.
Copy able-pro-react
..
├── src
│ ├── components\cards
│ │ ├── AuthFooter.tsx
│ ├── context
│ │ ├── Auth0Context.tsx
│ │ ├── AWSCognitoContext.tsx
│ │ ├── FirebaseContext.tsx
│ │ ├── JWTContext.tsx
│ ├── hooks
│ │ ├── useAuth.ts
│ ├── pages
│ │ ├── auth (remove directory with all sub files)
│ ├── routes
│ │ ├── LoginRoutes.tsx
│ ├── sections
│ │ ├── auth (remove directory with all sub files)
│ ├── utils
│ │ ├── route-guard (remove directory with all sub files)
Remove LoginRoutes
- Open file ./src/routes/index.tsx, and remove LoginRoutes
import.
Copy routes/index.tsx
import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';
// project import
import MainRoutes from './MainRoutes';
import ComponentsRoutes from './ComponentsRoutes';
import SimpleLayout from 'layout/Simple';
import Loadable from 'components/Loadable';
import { SimpleLayoutType } from 'config';
// render - landing page
const PagesLanding = Loadable(lazy(() => import('pages/landing')));
// ==============================|| ROUTING RENDER ||============================== //
const router = createBrowserRouter(
[
{
path: '/',
element: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
children: [
{
path: '/',
element: <PagesLanding />
}
]
},
ComponentsRoutes,
MainRoutes
],
{ basename: import.meta.env.VITE_APP_BASE_NAME }
);
export default router;
Remove or change /login
routes.
If you want to remove routes - remove router component RouterLink
or Link
with to=''
props.
If you want to change url - set the home page URL like, to={APP_DEFAULT_PATH}
, And import APP_DEFAULT_PATH
from config
file.
Remove useAuth
hook - Remove the below imports from throughout the project and set static values for user profile props.
Copy import useAuth from 'hooks/useAuth';
Remove axios interceptors response from ./src/utils/axios.ts file
utils/axios.ts
Copy import axios from 'axios';
// ==============================|| AXIOS - FOR MOCK SERVICES ||============================== //
const axiosServices = axios.create({ baseURL: process.env.VITE_APP_API_URL || 'http://localhost:3010/' });
export default axiosServices;
Last updated 9 months ago