NextJS
This page describes how to remove auth for NextJS
Mantis uses the next-auth for the authentication system.
Remove Authentication Permanent
If you want to permanently remove authentication for nextJS, here are the steps to follow:
Remove below authentication keys from
.env
file.
...
...
## Next Auth
NEXT_PUBLIC_AUTH_URL=
## NEXT_PUBLIC_AUTH_URL=
NEXT_PUBLIC_NEXTAUTH_SECRET=
## Auth0
REACT_APP_AUTH0_CLIENT_ID=
REACT_APP_AUTH0_CLIENT_SECRET=
REACT_APP_AUTH0_DOMAIN=
## Cognito
REACT_APP_COGNITO_CLIENT_ID=
REACT_APP_COGNITO_CLIENT_SECRET=
REACT_APP_COGNITO_REGION=
REACT_APP_COGNITO_POOL_ID=
REACT_APP_COGNITO_DOMAIN=
## JWT
## for 1 day - 86400 = 1* 24 * 60 * 60
REACT_APP_JWT_TIMEOUT=
REACT_APP_JWT_SECRET=
...
...
Remove the below list of files and directories.
mantis-material-react-next
..
├── src
│ ├── app
│ │ ├── api
│ │ │ ├── auth (remove directory with all sub files)
│ │ ├── (auth) (remove directory with all sub files)
│ │ ├── pages
│ │ │ ├── check-mail (remove directory with all sub files)
│ │ │ ├── forget-pass (remove directory with all sub files)
│ │ │ ├── login (remove directory with all sub files)
│ │ │ ├── register (remove directory with all sub files)
│ │ │ ├── reset-pass (remove directory with all sub files)
│ ├── sections
│ │ ├── auth (remove directory with all sub files and folder)
│ ├── utils
│ │ ├── route-guard (remove directory with all sub files)
│ ├── views
│ │ ├── auth (remove directory with all sub files)
│ ├── types
│ │ ├── auth.ts
│ │ ├── next-auth.d.ts
│ ├──utils
│ │ ├── route-guard (remove directory with all sub files)
Remove the following lines from a file
src\app\ProviderWrapper.tsx
// next
import { SessionProvider } from 'next-auth/react';
...
<SessionProvider refetchInterval={0}>
...
...
</SessionProvider>
...
Remove the following lines from a file
src\app(dashboard)\layout.tsx
import AuthGuard from 'utils/route-guard/AuthGuard';
...
...
<AuthGuard>
...
...
</AuthGuard>
...
...
Remove the following lines from a file:
src/layout/DashboardLayout/index.tsx
import AuthGuard from 'utils/route-guard/AuthGuard';
...
...
<AuthGuard>
...
...
</AuthGuard>
...
...
Remove and change the following lines from a file
src\hooks\useUser.ts
//*** Remove lines
// next
import { useSession } from 'next-auth/react';
...
const { data: session } = useSession();
if (session) {
const user = session?.user;
const provider = session?.provider;
let thumb = user?.image!;
if (provider === 'cognito') {
const email = user?.email?.split('@');
user!.name = email ? email[0] : 'Jone Doe';
}
if (!user?.image) {
user!.image = '/assets/images/users/avatar-1.png';
thumb = '/assets/images/users/avatar-thumb-1.png';
}
const newUser: UserProps = {
name: user!.name!,
email: user!.email!,
avatar: user?.image!,
thumb,
role: 'UI/UX Designer'
};
return newUser;
}
return false;
};
//*** Add lines
...
const email = 'jonedoe@gmail.com';
const name = 'Jone Doe';
const image = '/assets/images/users/avatar-1.png';
const thumb = '/assets/images/users/avatar-thumb-1.png';
const newUser: UserProps = {
name: name,
email: email,
avatar: image,
thumb,
role: 'UI/UX Designer'
};
return newUser;
Remove the following lines from the file - src\layout\DashboardLayout\Drawer\DrawerContent\NavUser.tsx
import { useRouter } from 'next/navigation';
import { useSession, signOut } from 'next-auth/react';
...
...
const router = useRouter();
const { data: session } = useSession();
const provider = session?.provider;
const handleLogout = () => {
switch (provider) {
case 'auth0':
signOut({ callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/logout/auth0` });
break;
case 'cognito':
signOut({ callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/logout/cognito` });
break;
default:
signOut({ redirect: false });
}
router.push('/login');
};
....
*** Remove handleLogout where it used
from
<MenuItem onClick={handleLogout} >Logout</MenuItem>
to
<MenuItem>Logout</MenuItem>
...
Remove the following lines from the file
src\layout\DashboardLayout\Header\HeaderContent\Profile\index.tsx
// next
import { useRouter } from 'next/navigation';
import { useSession, signOut } from 'next-auth/react';
...
const handleLogout = () => {
switch (provider) {
case 'auth0':
signOut({ callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/logout/auth0` });
break;
case 'cognito':
signOut({ callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/logout/cognito` });
break;
default:
signOut({ redirect: false });
}
router.push('/login');
};
*** remove all handleLogout function from where it called
remove props handleLogout from file
src\layout\DashboardLayout\Header\HeaderContent\Profile\ProfileTab.tsx
interface Props {
handleLogout: () => void;
}
const ProfileTab = ({ handleLogout }: Props) => {
to
const ProfileTab = () => {
Remove the following lines from a file
src\menu-items\pages.tsx
...
...
import { ..., LoginOutlined, ...} from '@ant-design/icons';
...
const icons = { ..., LoginOutlined, ... };
...
{
id: 'authentication',
title: "authentication",
type: 'collapse',
icon: icons.LoginOutlined,
children: [
{
id: 'login',
title: "login",
type: 'item',
url: '/pages/login',
target: true
},
{
id: 'register',
title: "register",
type: 'item',
url: '/pages/register',
target: true
},
{
id: 'forgot-password',
title: "forgot-password",
type: 'item',
url: '/pages/forget-pass',
target: true
},
{
id: 'reset-password',
title: "reset-password",
type: 'item',
url: '/pages/reset-pass',
target: true
},
{
id: 'check-mail',
title: "check-mail",
type: 'item',
url: '/pages/check-mail',
target: true
},
{
id: 'code-verification',
title: "code-verification",
type: 'item',
url: '/pages/verify-code',
target: true
}
]
},
Remove the following lines from a file
src\utils\axios.ts
...
...
axiosServices.interceptors.request.use(
async (config) => {
const session = await getSession();
if (session?.token.accessToken) {
config.headers['Authorization'] = `Bearer ${session?.token.accessToken}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
axiosServices.interceptors.response.use(
(response) => response,
(error) => {
if (error.response.status === 401 && !window.location.href.includes('/login')) {
window.location.pathname = '/login';
}
return Promise.reject((error.response && error.response.data) || 'Wrong Services');
}
);
...
...
Remove package
"next-auth": "^**.**.**"
from filepackage.json
, removemode_modules
and install node again.
Disabling authentication within the system would render certain applications non-functional, particularly those reliant on backend APIs. These applications require a valid token to access and load data seamlessly.
Mantis uses the next-auth for the authentication system.
Remove Authentication Permanent
If you want to permanently remove authentication for nextJS, here are the steps to follow:
Remove below authentication keys from
.env
file.
...
...
## Next Auth
NEXT_PUBLIC_AUTH_URL=
## NEXT_PUBLIC_AUTH_URL=
NEXT_PUBLIC_NEXTAUTH_SECRET=
## Auth0
REACT_APP_AUTH0_CLIENT_ID=
REACT_APP_AUTH0_CLIENT_SECRET=
REACT_APP_AUTH0_DOMAIN=
## Cognito
REACT_APP_COGNITO_CLIENT_ID=
REACT_APP_COGNITO_CLIENT_SECRET=
REACT_APP_COGNITO_REGION=
REACT_APP_COGNITO_POOL_ID=
REACT_APP_COGNITO_DOMAIN=
## JWT
## for 1 day - 86400 = 1* 24 * 60 * 60
REACT_APP_JWT_TIMEOUT=
REACT_APP_JWT_SECRET=
...
...
Remove the below list of files and directories.
mantis-material-react-next
..
├── src
│ ├── app
│ │ ├── api
│ │ │ ├── auth (remove directory with all sub files)
│ │ ├── (auth) (remove directory with all sub files)
│ │ ├── pages
│ │ │ ├── check-mail (remove directory with all sub files)
│ │ │ ├── forget-pass (remove directory with all sub files)
│ │ │ ├── login (remove directory with all sub files)
│ │ │ ├── register (remove directory with all sub files)
│ │ │ ├── reset-pass (remove directory with all sub files)
│ ├── sections
│ │ ├── auth (remove directory with all sub files and folder)
│ ├── utils
│ │ ├── route-guard (remove directory with all sub files)
│ ├── views
│ │ ├── auth (remove directory with all sub files)
│ ├── types
│ │ ├── auth.ts
│ │ ├── next-auth.d.ts
│ ├──utils
│ │ ├── route-guard (remove directory with all sub files)
Remove the following lines from a file
src\app\ProviderWrapper.jsx
// next
import { SessionProvider } from 'next-auth/react';
...
<SessionProvider refetchInterval={0}>
...
...
</SessionProvider>
...
Remove the following lines from a file
src\app(dashboard)\layout.jsx
import AuthGuard from 'utils/route-guard/AuthGuard';
...
...
<AuthGuard>
...
...
</AuthGuard>
...
...
Remove the following lines from a file:
src/layout/DashboardLayout/index.jsx
import AuthGuard from 'utils/route-guard/AuthGuard';
...
...
<AuthGuard>
...
...
</AuthGuard>
...
...
Remove and change the following lines from a file
src\hooks\useUser.js
//*** Remove lines
// next
import { useSession } from 'next-auth/react';
...
const { data: session } = useSession();
if (session) {
const user = session?.user;
const provider = session?.provider;
let thumb = user?.image!;
if (provider === 'cognito') {
const email = user?.email?.split('@');
user!.name = email ? email[0] : 'Jone Doe';
}
if (!user?.image) {
user!.image = '/assets/images/users/avatar-1.png';
thumb = '/assets/images/users/avatar-thumb-1.png';
}
const newUser = {
name: user!.name!,
email: user!.email!,
avatar: user?.image!,
thumb,
role: 'UI/UX Designer'
};
return newUser;
}
return false;
};
//*** Add lines
...
const email = 'jonedoe@gmail.com';
const name = 'Jone Doe';
const image = '/assets/images/users/avatar-1.png';
const thumb = '/assets/images/users/avatar-thumb-1.png';
const newUser = {
name: name,
email: email,
avatar: image,
thumb,
role: 'UI/UX Designer'
};
return newUser;
Remove the following lines from the file - src\layout\DashboardLayout\Drawer\DrawerContent\NavUser.jsx
import { useRouter } from 'next/navigation';
import { useSession, signOut } from 'next-auth/react';
...
...
const router = useRouter();
const { data: session } = useSession();
const provider = session?.provider;
const handleLogout = () => {
switch (provider) {
case 'auth0':
signOut({ callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/logout/auth0` });
break;
case 'cognito':
signOut({ callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/logout/cognito` });
break;
default:
signOut({ redirect: false });
}
router.push('/login');
};
....
*** Remove handleLogout where it used
from
<MenuItem onClick={handleLogout} >Logout</MenuItem>
to
<MenuItem>Logout</MenuItem>
...
Remove the following lines from the file
src\layout\DashboardLayout\Header\HeaderContent\Profile\index.jsx
// next
import { useRouter } from 'next/navigation';
import { useSession, signOut } from 'next-auth/react';
...
const handleLogout = () => {
switch (provider) {
case 'auth0':
signOut({ callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/logout/auth0` });
break;
case 'cognito':
signOut({ callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/logout/cognito` });
break;
default:
signOut({ redirect: false });
}
router.push('/login');
};
*** remove all handleLogout function from where it called
remove props handleLogout from file
src\layout\DashboardLayout\Header\HeaderContent\Profile\ProfileTab.jsx
interface Props {
handleLogout: () => void;
}
const ProfileTab = ({ handleLogout }: Props) => {
to
const ProfileTab = () => {
Remove the following lines from a file
src\menu-items\pages.jsx
...
...
import { ..., LoginOutlined, ...} from '@ant-design/icons';
...
const icons = { ..., LoginOutlined, ... };
...
{
id: 'authentication',
title: "authentication",
type: 'collapse',
icon: icons.LoginOutlined,
children: [
{
id: 'login',
title: "login",
type: 'item',
url: '/pages/login',
target: true
},
{
id: 'register',
title: "register",
type: 'item',
url: '/pages/register',
target: true
},
{
id: 'forgot-password',
title: "forgot-password",
type: 'item',
url: '/pages/forget-pass',
target: true
},
{
id: 'reset-password',
title: "reset-password",
type: 'item',
url: '/pages/reset-pass',
target: true
},
{
id: 'check-mail',
title: "check-mail",
type: 'item',
url: '/pages/check-mail',
target: true
},
{
id: 'code-verification',
title: "code-verification",
type: 'item',
url: '/pages/verify-code',
target: true
}
]
},
Remove the following lines from a file
src\utils\axios.js
...
...
axiosServices.interceptors.request.use(
async (config) => {
const session = await getSession();
if (session?.token.accessToken) {
config.headers['Authorization'] = `Bearer ${session?.token.accessToken}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
axiosServices.interceptors.response.use(
(response) => response,
(error) => {
if (error.response.status === 401 && !window.location.href.includes('/login')) {
window.location.pathname = '/login';
}
return Promise.reject((error.response && error.response.data) || 'Wrong Services');
}
);
...
...
Remove package
"next-auth": "^**.**.**"
from filepackage.json
, removemode_modules
and install node again.
Disabling authentication within the system would render certain applications non-functional, particularly those reliant on backend APIs. These applications require a valid token to access and load data seamlessly.
Last updated