# Authentication

Mantis includes four authentication methods **`JSON Web Token (JWT), Firebase, Auth0, AWS and Supabase`**for its users. Users can change it as per their needs.

{% hint style="success" %}
JWT Authentication is set by default
{% endhint %}

{% tabs %}
{% tab title="VITE(TS)" %}

## How does it work?

Only authenticated users can access dashboard pages. If a user is not authenticated, the user is redirected to the login page.

We used two guards **`GuestGuard`** and **`AuthGuard.`** Guards have been configured in **`src\utils\route-guard\`** folder.

In the **`src/layout/App.tsx`**, we have specified the auth provider **`JWTProvider`** like,

{% code title="src/App.tsx" %}

```typescript
import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
```

{% endcode %}

App component wraps with the **`<JWTProvider>`**

{% code title="src/App.tsx" %}

```typescript
<ThemeCustomization>
  ...
  <AuthProvider>
    <Routes />
    <Snackbar />
  </AuthProvider>
  ...
</ThemeCustomization>
```

{% endcode %}

Using **`<JWTProvider>`**&#x57;e can use the context directly by importing **`useContext`** from React and specifying the context **`JWTContext`** Or we can use the custom hook **`useAuth`** from `src/hooks/useAuth.js`

## Auth Configuration:

All configurations related to authentication are stored in config.ts. Those configs are like APIKey to connect to the authentication server, project ID, etc.

{% hint style="danger" %}
Mantis has a dummy/test config to make authentication work. Users have to change the API and secret as per their project needs. One must not use those provided keys in their live environment.
{% endhint %}

{% code title=".env" %}

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

## SupaBase
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
```

{% endcode %}

> The theme provides working an example for Login and Register only. Other flow like reset password, verification have to make it workable by the user himself.
> {% endtab %}

{% tab title="VITE(JS)" %}

## How does it work?

Only authenticated users can access dashboard pages. If a user is not authenticated, the user is redirected to the login page.

We used two guards **`GuestGuard`** and **`AuthGuard.`** Guards have been configured in **`src\utils\route-guard\`** folder.

In the **`src/layout/App.jsx`**, we have specified the auth provider **`JWTProvider`** like,

{% code title="src/App.jsx" %}

```javascript
import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
```

{% endcode %}

App component wraps with the **`<JWTProvider>`**

{% code title="src/App.jsx" %}

```javascript
<ThemeCustomization>
  ...
  <AuthProvider>
    <Routes />
    <Snackbar />
  </AuthProvider>
  ...
</ThemeCustomization>
```

{% endcode %}

Using **`<JWTProvider>`**&#x57;e can use the context directly by importing **`useContext`** from React and specifying the context **`JWTContext`** Or we can use the custom hook **`useAuth`** from `src/hooks/useAuth.js`

## Auth Configuration:

All configurations related to authentication are stored in config.js. Those configs are like APIKey to connect to the authentication server, project ID, etc.

{% hint style="danger" %}
Mantis has a dummy/test config to make authentication work. Users have to change the API and secret as per their project needs. One must not use those provided keys in their live environment.
{% endhint %}

{% code title=".env" %}

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

## SupaBase
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
```

{% endcode %}

> The theme provides working an example for Login and Register only. Other flow like reset password, verification have to make it workable by the user himself.
> {% endtab %}

{% tab title="NEXT(TS)" %}

## How does it work?

Only authenticated users can access dashboard pages. If a user is not authenticated, the user is redirected to the login page.

We used two guards **`GuestGuard`** and **`AuthGuard.`** Guards have been configured in **`src\utils\route-guard\`** folder.

In the src/app/ProviderWrapper.tsx, we have specified the auth provider `SessionProvider` like,

{% code title="src/app/ProviderWrapper.tsx" %}

```typescript
import { SessionProvider } from 'next-auth/react';
```

{% endcode %}

## Auth Configuration:

All configurations related to authentication are stored in config.ts. Those configs are like APIKey to connect to the authentication server, project ID, etc.

{% hint style="danger" %}
Mantis has a dummy/test config to make authentication work. Users have to change the API and secret as per their project needs. One must not use those provided keys in their live environment.
{% endhint %}

{% code title=".env" %}

```javascript
## Auth0
NEXT_PUBLIC_AUTH0_CLIENT_ID=
NEXT_PUBLIC_AUTH0_CLIENT_SECRET=
NEXT_PUBLIC_AUTH0_DOMAIN=

## Cognito
NEXT_PUBLIC_COGNITO_CLIENT_ID=
NEXT_PUBLIC_COGNITO_CLIENT_SECRET=
NEXT_PUBLIC_COGNITO_REGION=
NEXT_PUBLIC_COGNITO_POOL_ID=
NEXT_PUBLIC_COGNITO_DOMAIN=

## JWT
## for 1 day - 86400 = 1* 24 * 60 * 60
NEXT_PUBLIC_JWT_TIMEOUT=
NEXT_PUBLIC_JWT_SECRET=
```

{% endcode %}

> The theme provides working an example for Login and Register only. Other flow like reset password, verification have to make it workable by the user himself.
> {% endtab %}

{% tab title="NEXT(JS)" %}

## How does it work?

Only authenticated users can access dashboard pages. If a user is not authenticated, the user is redirected to the login page.

We used two guards **`GuestGuard`** and **`AuthGuard.`** Guards have been configured in **`src\utils\route-guard\`** folder.

In the src/app/ProviderWrapper.tsx, we have specified the auth provider `SessionProvider` like,

{% code title="src/app/ProviderWrapper.jsx" %}

```javascript
import { SessionProvider } from 'next-auth/react';
```

{% endcode %}

## Auth Configuration:

All configurations related to authentication are stored in config.ts. Those configs are like APIKey to connect to the authentication server, project ID, etc.

{% hint style="danger" %}
Mantis has a dummy/test config to make authentication work. Users have to change the API and secret as per their project needs. One must not use those provided keys in their live environment.
{% endhint %}

{% code title=".env" %}

```javascript
## Auth0
NEXT_PUBLIC_AUTH0_CLIENT_ID=
NEXT_PUBLIC_AUTH0_CLIENT_SECRET=
NEXT_PUBLIC_AUTH0_DOMAIN=

## Cognito
NEXT_PUBLIC_COGNITO_CLIENT_ID=
NEXT_PUBLIC_COGNITO_CLIENT_SECRET=
NEXT_PUBLIC_COGNITO_REGION=
NEXT_PUBLIC_COGNITO_POOL_ID=
NEXT_PUBLIC_COGNITO_DOMAIN=

## JWT
## for 1 day - 86400 = 1* 24 * 60 * 60
NEXT_PUBLIC_JWT_TIMEOUT=
NEXT_PUBLIC_JWT_SECRET=
```

{% endcode %}

> The theme provides working an example for Login and Register only. Other flow like reset password, verification have to make it workable by the user himself.
> {% endtab %}
> {% endtabs %}

## Switching between Authentication methods

### [**JWT to Auth0**](https://codedthemes.gitbook.io/mantis/authentication/switch-to-auth0)

### [**JWT to Firebase** JWT](https://codedthemes.gitbook.io/mantis/authentication/switch-to-firebase)

### [**JWT to AWS Cognito**](https://codedthemes.gitbook.io/mantis/authentication/switch-to-aws-cognito)

### [**JWT to Supabase**](https://codedthemes.gitbook.io/mantis/authentication/switch-to-supabase)