v3.2.0

NextJS

This page describes how to remove auth for NextJS

Mantis uses next-auth for authentication system.

Remove Authentication Permanent

If you want to permanently remove authentication for nextJS, here are the steps to follow:

  1. Remove below authentication keys from .env file.

.env
...
...
## Next Auth
NEXTAUTH_URL=

## NEXTAUTH_URL=
NEXTAUTH_SECRET_KEY=

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

  1. Remove below authentication keys from next.config.js file.

next.config.js
..
...
...
 NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET_KEY,
 NEXTAUTH_URL: process.env.NEXTAUTH_URL,
 NEXT_APP_JWT_SECRET: process.env.REACT_APP_JWT_SECRET,
 NEXT_APP_JWT_TIMEOUT: process.env.REACT_APP_JWT_TIMEOUT,
 NEXTAUTH_SECRET_KEY: process.env.NEXTAUTH_SECRET_KEY,
...
...

  1. Remove below list of files and directory.

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)

  1. Remove following lines from file src\app\ProviderWrapper.tsx

ProviderWrapper.tsx

// next
import { SessionProvider } from 'next-auth/react';
...
<SessionProvider refetchInterval={0}>
...
...
</SessionProvider>
...

  1. Remove following lines from filesrc\app(dashboard)\layout.tsx

layout.tsx

import AuthGuard from 'utils/route-guard/AuthGuard';
...
...
    <AuthGuard>
...
...
    </AuthGuard>
...
...

  1. Remove and change following lines from file src\hooks\useUser.ts

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;

  1. Remove following lines from file - src\layout\DashboardLayout\Drawer\DrawerContent\NavUser.tsx

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

  1. Remove following lines from file src\layout\DashboardLayout\Header\HeaderContent\Profile\index.tsx

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

  1. remove props handleLogout from file src\layout\DashboardLayout\Header\HeaderContent\Profile\ProfileTab.tsx

ProfileTab.tsx

interface Props {
  handleLogout: () => void;
}

const ProfileTab = ({ handleLogout }: Props) => {

to
const ProfileTab = () => {

  1. Remove following lines from file src\menu-items\pages.tsx

pages.tsx
...
...
import { ..., LoginOutlined, ...} from '@ant-design/icons';
...
const icons = { ..., LoginOutlined, ... };
...

{
  id: 'authentication',
  title: <FormattedMessage id="authentication" />,
  type: 'collapse',
  icon: icons.LoginOutlined,
  children: [
    {
      id: 'login',
      title: <FormattedMessage id="login" />,
      type: 'item',
      url: '/pages/login',
      target: true
    },
    {
      id: 'register',
      title: <FormattedMessage id="register" />,
      type: 'item',
      url: '/pages/register',
      target: true
    },
    {
      id: 'forgot-password',
      title: <FormattedMessage id="forgot-password" />,
      type: 'item',
      url: '/pages/forget-pass',
      target: true
    },
    {
      id: 'reset-password',
      title: <FormattedMessage id="reset-password" />,
      type: 'item',
      url: '/pages/reset-pass',
      target: true
    },
    {
      id: 'check-mail',
      title: <FormattedMessage id="check-mail" />,
      type: 'item',
      url: '/pages/check-mail',
      target: true
    },
    {
      id: 'code-verification',
      title: <FormattedMessage id="code-verification" />,
      type: 'item',
      url: '/pages/verify-code',
      target: true
    }
  ]
},

  1. Remove following lines from file src\utils\axios.ts

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

...
...

  1. Remove package "next-auth": "^**.**.**" from file package.json, remove mode_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.

PreviousViteNextFigma