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

{% code title=".env" %}

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

{% endcode %}

2. **Remove below authentication keys from** `next.config.js` **file.**

{% code title="next.config.js" %}

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

{% endcode %}

3. **Remove below list of files and directory.**

```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 following lines from file** `src\app\ProviderWrapper.tsx`

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

```typescript

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

{% endcode %}

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

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

```typescript

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

```

{% endcode %}

6. **Remove and change following lines from file** `src\hooks\useUser.ts`

<pre class="language-typescript" data-title="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 following lines from 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 following lines from file** `src\layout\DashboardLayout\Header\HeaderContent\Profile\index.tsx`

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

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 following lines from file** `src\menu-items\pages.tsx`

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

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

```

{% endcode %}

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

{% code title="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 %}


---

# 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/v3.2.0/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.