# Authentication

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

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

## 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 the auth provider **`JWTProvider`** like,

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

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

{% endcode %}

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

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

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 API keys to connect to the authentication server, project ID, etc.

{% hint style="danger" %}
Able Pro 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 
REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_FIREBASE_STORAGE_BUCKET=
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=
REACT_APP_FIREBASE_MEASUREMENT_ID=

## AWS
REACT_APP_AWS_POOL_ID=
REACT_APP_AWS_APP_CLIENT_ID=

## JWT
REACT_APP_JWT_SECRET_KEY=ikRgjkhi15HJiU78-OLKfjngiu=
REACT_APP_JWT_TIMEOUT=1d

## Auth0
REACT_APP_AUTH0_CLIENT_ID=
REACT_APP_AUTH0_DOMAIN=
```

{% endcode %}

The theme provides a working example for Login and Register only. Other flows like reset password, verification have to make it workable by the user himself.

## Switching between Authentication methods

## [JWT to Auth0](https://codedthemes.gitbook.io/able-pro/authentication/switch-to-firebase)

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

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