# NextJS

{% tabs %}
{% tab title="NEXT(TS)" %}
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:

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

{% code title=".env" %}

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

{% endcode %}

3. **Remove the below list of files and directories.**

```markdown
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)
```

4. **Remove the following lines from a file** `src\app\ProviderWrapper.tsx`

{% code title="ProviderWrapper.tsx" %}

```typescript

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

{% endcode %}

5. **Remove the following lines from a file**`src\app(dashboard)\layout.tsx`

{% code title="layout.tsx" %}

```typescript

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

```

{% endcode %}

6. **Remove the following lines from a file:** `src/layout/DashboardLayout/index.tsx`

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

```typescript

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

```

{% endcode %}

7. **Remove and change the following lines from a file** `src\hooks\useUser.ts`

<pre class="language-typescript" data-title="src\hooks\useUser.ts"><code class="lang-typescript">//*** 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;
};

<strong>//*** Add lines
</strong>...

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;
</code></pre>

7. **Remove the following lines from the file -** src\layout\DashboardLayout\Drawer\DrawerContent\NavUser.tsx

<pre class="language-typescript" data-title="src\layout\DashboardLayout\Drawer\DrawerContent\NavUser.tsx"><code class="lang-typescript">
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
&#x3C;MenuItem onClick={handleLogout} >Logout&#x3C;/MenuItem>
to
&#x3C;MenuItem>Logout&#x3C;/MenuItem>
...
<strong>
</strong></code></pre>

8. **Remove the following lines from the file** `src\layout\DashboardLayout\Header\HeaderContent\Profile\index.tsx`

{% code title="src\layout\DashboardLayout\Header\HeaderContent\Profile\index.t" %}

```typescript
// 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
```

{% endcode %}

9. **remove props handleLogout from file** `src\layout\DashboardLayout\Header\HeaderContent\Profile\ProfileTab.tsx`

{% code title="ProfileTab.tsx" %}

```typescript

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

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

to
const ProfileTab = () => {

```

{% endcode %}

10. **Remove the following lines from a file** `src\menu-items\pages.tsx`

{% code title="src\menu-items\pages.tsx" %}

```typescript
...
...
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
    }
  ]
},

```

{% endcode %}

11. **Remove the following lines from a file** `src\utils\axios.ts`

{% code title="src\utils\axios.ts" %}

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

...
...
```

{% endcode %}

12. **Remove package** `"next-auth": "^**.**.**"` **from file** `package.json`, remove `mode_modules` and install node again.

{% hint style="warning" %}
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.
{% endhint %}
{% endtab %}

{% tab title="NEXT(JS)" %}
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:

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

{% code title=".env" %}

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

{% endcode %}

3. **Remove the below list of files and directories.**

```markdown
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)
```

4. **Remove the following lines from a file** `src\app\ProviderWrapper.jsx`

{% code title="ProviderWrapper.jsx" %}

```javascript

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

{% endcode %}

5. **Remove the following lines from a file**`src\app(dashboard)\layout.jsx`

{% code title="src\app(dashboard)\layout.jsx" %}

```javascript

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

```

{% endcode %}

6. **Remove the following lines from a file:** `src/layout/DashboardLayout/index.jsx`

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

```javascript

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

```

{% endcode %}

7. **Remove and change the following lines from a file** `src\hooks\useUser.js`

<pre class="language-javascript" data-title="src\hooks\useUser.js"><code class="lang-javascript">//*** 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;
};

<strong>//*** Add lines
</strong>...

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;
</code></pre>

7. **Remove the following lines from the file -** src\layout\DashboardLayout\Drawer\DrawerContent\NavUser.jsx

<pre class="language-javascript" data-title="src\layout\DashboardLayout\Drawer\DrawerContent\NavUser.jsx"><code class="lang-javascript">
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
&#x3C;MenuItem onClick={handleLogout} >Logout&#x3C;/MenuItem>
to
&#x3C;MenuItem>Logout&#x3C;/MenuItem>
...
<strong>
</strong></code></pre>

8. **Remove the following lines from the file** `src\layout\DashboardLayout\Header\HeaderContent\Profile\index.jsx`

{% code title="src\layout\DashboardLayout\Header\HeaderContent\Profile\index.js" %}

```javascript
// 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
```

{% endcode %}

9. **remove props handleLogout from file** `src\layout\DashboardLayout\Header\HeaderContent\Profile\ProfileTab.jsx`

{% code title="ProfileTab.jsx" %}

```javascript

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

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

to
const ProfileTab = () => {

```

{% endcode %}

10. **Remove the following lines from a file** `src\menu-items\pages.jsx`

{% code title="src\menu-items\pages.jsx" %}

```javascript
...
...
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
    }
  ]
},

```

{% endcode %}

11. **Remove the following lines from a file** `src\utils\axios.js`

{% code title="src\utils\axios.js" %}

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

...
...
```

{% endcode %}

12. **Remove package** `"next-auth": "^**.**.**"` **from file** `package.json`, remove `mode_modules` and install node again.

{% hint style="warning" %}
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.
{% endhint %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codedthemes.gitbook.io/mantis/v4.0.1/how-to/remove-authentication/nextjs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.