> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/gradient-able-react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/gradient-able-react/authentication.md).

# Authentication

Gradient Able React Hooks supports 3 authentication methods:  **Firebase Authentication, JSON Web Token, Auth0**. We provide Firebase Authentication by default.

## How does it work?

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

We implemented to make this work the “Guard” concept from Angular. It is simply a component that wraps a route and checks for user authentication status before allowing the navigation. 

We used two guards **GuestGuard** and **AuthGuard**, To find more information about guards, please visit the **Routes.js** page.

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

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

App component wrap with the provider, like

```
  <AuthProvider>
      {renderRoutes(routes)}
  </AuthProvider>
```

&#x20;Using **FirebaseProvider**, we can use the context directly by importing `useContext` from React and specifying the context **FirebaseContext** that we want to use or we can use the custom hook **`useAuth`** from `src/hooks/useAuth.jsx`

## Auth Configuration:

{% hint style="info" %}
You can edit this file at **`[ ../.env]`**
{% endhint %}

```
VITE_APP_VERSION = Version of app
GENERATE_SOURCEMAP = false

## Public URL
PUBLIC_URL=
VITE_APP_BASE_NAME=

## Google Map Key
VITE_APP_GOOGLE_MAPS_API_KEY=

## Firebase - Google Auth 

VITE_APP_FIREBASE_API_KEY= Firebase Api key
VITE_APP_FIREBASE_AUTH_DOMAIN=  Firebase Auth domain
VITE_APP_FIREBASE_PROJECT_ID= Firebase Project Id
VITE_APP_FIREBASE_STORAGE_BUCKET= Firebase Storage Bucket
VITE_APP_FIREBASE_MESSAGING_SENDER_ID= Firebase Messaging Sender Id
VITE_APP_FIREBASE_APP_ID= Firebase App Id
VITE_APP_FIREBASE_MEASUREMENT_ID= Firebase Measurement Id

## Auth0

VITE_APP_AUTH0_CLIENT_ID= Auth0 Client Id
VITE_APP_AUTH0_DOMAIN= Auth0 Domain
```

## Switching between Authentication methods

### **JWT to Firebase**&#x20;

**Set JWT Config** - Open file '**.env**' at directory '../env' and set **firebase** configuration.

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

**Change Login Form** - Open file '**SignIn1.jsx**' at directory 'src/views/auth/signin/SignIn1.jsx', and use the **FirebaseLogin** component.

```
// Replace at line 13:
import AuthLogin from './FirebaseLogin';

<AuthLogin />
```

**AuthProvider for Layout** - Open file '**App.jsx**' at directory 'src/App.jsx' and use **FirebaseProvider**&#x20;

```
// Replace at line 9;
import { FirebaseProvider as AuthProvider } from './contexts/FirebaseContext';

<AuthProvider>
    {renderRoutes(routes)}
</AuthProvider>
```

&#x20;**Change auth Hooks** - Open file '**useAuth.jsx**' at directory '../src/hooks/useAuth.jsx' and use **FirebaseContext**

```
// Replace from line 5:
import AuthContext from '../contexts/FirebaseContext';

const useAuth = () => useContext(AuthContext);
```

###

### **Firebase to Auth0**

**Set Auth Config** - Open file '**.env**' at directory '.env' and set **auth0** configuration.

```
## Auth0

VITE_APP_AUTH0_CLIENT_ID=
VITE_APP_AUTH0_DOMAIN=
```

**Change Login Form** - Open file '**SignIn1.jsx**' at directory 'src/views/auth/signin/SignIn1.jsx', and use **Auth0Login** component.

```
// Replace at line 14:
import AuthLogin from './Auth0Login';

<AuthLogin />
```

**AuthProvider for Layout** - Open file '**App.jsx**' at directory 'src/App.jsx' and use **Auth0Provider**

```
// Replace at line 10;
import { Auth0Provider as AuthProvider } from './contexts/Auth0Context';

<AuthProvider>
    {renderRoutes(routes)}
</AuthProvider>
```

&#x20;**Change auth Hooks** - Open file '**useAuth.jsx**' at directory 'src/hooks/useAuth.jsx' and use **Auth0Context**

```
// Replace from line 6:
import AuthContext from '../contexts/Auth0Context';

const useAuth = () => useContext(AuthContext);
```