# Authentication

Berry includes four Authentication methods **`Firebase, JSON Web Token (JWT), Auth0, AWS`** for their users. Users can change it as per their needs.

{% hint style="info" %}
Firebase Authentication is set by default
{% endhint %}

{% embed url="<https://youtu.be/daHRKlIi6Uc?list=PLknn3jaIuWiDKKEy3EO-p5-MP1nSOgUr1>" %}
Authentication
{% endembed %}

## 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.js`**, we have specified auth provider **`FirebaseProvider`** like,

{% code title="App.js" %}

```javascript
import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
```

{% endcode %}

App component wrap with the **`<FirebaseProvider>`**

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

Using **`<FirebaseProvider>`**, we can use the context directly by importing **`useContext`** from React and specifying the context **`FirebaseContext`** 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 authentication server, project id, etc.

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

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

```javascript
// JWT JSON Web Token method
export const JWT_API = {
    secret: 'SECRET-KEY',
    timeout: '1 days'
};

// Firebase Authentication method
export const FIREBASE_API = {
    apiKey: "API-KEY",
    authDomain: "AUTH-DOMAIN",
    databaseURL: "DATABASE-URL",
    projectId: "PROJECT-ID",
    storageBucket: "STORAGE-BUCKET",
    messagingSenderId: "MESSAGEING-SENDER-ID",
    appId: "APP-ID",
    measurementId: "MEASUREMENT-ID"
};

// Auth0 method
export const AUTH0_API = {
    client_id: 'CLIENT-ID',
    domain: 'DOMAIN'
};

// AWS method
export const AWS_API = {
    poolId: 'poolid',
    appClientId: 'appid'
};
```

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

## Switching between Authentication methods

### **Firebase to Auth0**

**Set Auth0 Config**

At present, Auth0 uses a dummy client id and domain, so we don't need to change anything, but in actual implementation, you need to set client id and domain in the following file. For more detail refer to Auth0 here: <https://auth0.com/docs/get-started/auth0-overview>

{% code title="..\src\config.js" %}

```javascript
...
  auth0: {
        client_id: 'This is dummy id',
        domain: 'this.is.dummy.domain'
    }
...
```

{% endcode %}

**Change AuthProvider**

{% code title="..\src\App.js" %}

```javascript
import { Auth0Provider } from 'contexts/Auth0Context';

// Also find & edit below code block
<Auth0Provider>
    <Routes />
    <Snackbar />
</Auth0Provider>
```

{% endcode %}

**Change auth Hooks**

Comment another context in the following file and uncomment Auth0 one.

{% code title="..\src\hooks\useAuth.js" %}

```javascript

import AuthContext from 'contexts/Auth0Context';
```

{% endcode %}

#### Copy login code

It's super simple. We have provided a code that just needs to be replaced.&#x20;

Copy code from `src\views\pages\authentication\login\Auth0Login` to `src\views\pages\authentication\auth-forms\AuthLogin.tsx`

**For nextJS,** `src\components\Authentication\login\Auth0Login` to `src\components\Authentication\auth-forms\AuthLogin.tsx`

#### Copy register code

We have provided a code that just needs to be replaced. Copy code from `src\views\pages\authentication\login\Auth0Register` to `src\views\pages\authentication\auth-forms\AuthRegister.tsx`

**For nextJS,** `src\components\Authentication\login\Auth0Register` to `src\components\Authentication\auth-forms\AuthRegister.tsx`

### **Firebase to** JWT

**Set JWT Config**

At present, jwt uses a dummy backend call, so we don't need any secret, but in actual implementation, you need to set a secret in the following file. For more detail refer to JWT here: <https://jwt.io/introduction>

{% code title="..\src\config.js" %}

```javascript
...
  jwt: {
      secret: 'SECRET-KEY',
      timeout: '1 days'
  }
...
```

{% endcode %}

**Change AuthProvider**

{% code title="..\src\App.js" %}

```javascript
// Replace at line 6:
import { JWTProvider } from "./contexts/JWTContext";

// Also find & edit below code block
<JWTProvider>
    <Routes />
    <Snackbar />
</JWTProvider>
```

{% endcode %}

**Change auth Hooks**

Comment another context in the following file and uncomment JWT one.

{% code title="..\src\hooks\useAuth.js" %}

```javascript
import AuthContext from 'contexts/JWTContext';
```

{% endcode %}

#### Copy login code

It's also super simple. We have provided a code that just needs to be replaced. Copy `src\views\pages\authentication\login\JWTLogin` to `src\views\pages\authentication\auth-forms\AuthLogin.tsx`

**For nextJS,** `src\components\Authentication\login\JWTLogin` to `src\components\Authentication\auth-forms\AuthLogin.tsx`

#### Copy register code

We have provided a code that just needs to be replaced. Copy `src\views\pages\authentication\login\JWTRegister` to `src\views\pages\authentication\auth-forms\AuthRegister.tsx`

**For nextJS,** `src\components\Authentication\login\JWTRegister` to `src\components\Authentication\auth-forms\AuthRegister.tsx`

### **Firebase to AWS Congnito**

**Set AWS Config**

At present, AWS uses a dummy config, so we don't need to change anything, but in actual implementation, you need to set poolId and appClientId in the following file. For more detail refer to AWS here: <https://aws.amazon.com/cognito/>

{% code title="..\src\config.js" %}

```javascript
...

export const AWS_API = {
    poolId: 'poolid',
    appClientId: 'appid'
};

...
```

{% endcode %}

**Change AuthProvider**

{% code title="..\src\App.js" %}

```javascript
import { AWSCognitoProvider as AuthProvider } from 'contexts/AWSCognitoContext';

// Also find & edit below code block
<AuthProvider>
    <Routes />
    <Snackbar />
</AuthProvider>
```

{% endcode %}

**Change auth Hooks**

Comment another context in the following file and uncomment Auth0 one.

{% code title="..\src\hooks\useAuth.js" %}

```javascript

import AuthContext from 'contexts/AWSCognitoContext';
```

{% endcode %}

#### Copy login code

It's super simple. We have provided a code that just needs to be replaced. Copy code from `src\views\pages\authentication\login\AWSCognitoLogin` to `src\views\pages\authentication\auth-forms\AuthLogin.tsx`

**For nextJS,** `src\components\Authentication\login\AWSCongnitoLogin` to `src\components\Authentication\auth-forms\AuthLogin.tsx`

#### Copy register code

We have provided a code that just needs to be replaced. Copy code from `src\views\pages\authentication\login\AWSCognitoRegister` to `src\views\pages\authentication\auth-forms\AuthRegister.tsx`

**For nextJS,** `src\components\Authentication\login\AWSCognitoRegister` to `src\components\Authentication\auth-forms\AuthRegister.tsx`


---

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