> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/materially-react-material-documentation/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/materially-react-material-documentation/authentication.md).

# Authentication

Materially supports 3 popular Authentication methods.

Materially supports 3 authentication methods:  **Firebase Authentication, JSON Web Token, Auth0**.

{% hint style="success" %}
We provided JWT Authentication by default.
{% endhint %}

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

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

```
import { AuthProvider } from 'contexts/AuthContext';
```

App components wrap with the provider, like

```
<ThemeProvider theme={theme(customization)}>
  <AuthProvider>  
    <ThemeRoutes />
    <Snackbar />
  </FirebaseProvider>
</AuthProvider>
```

Using AuthProvider, we can use the context directly by importing `useContext` from React and specifying the context AuthContext that we want to use, or we can use the custom hook **`useAuth`** from `src/hooks/useAuth.ts`

## Auth Configuration:

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

```
VITE_APP_VERSION = Version of app
GENERATE_SOURCEMAP = false

## 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](/materially-react-material-documentation/authentication/switch-to-firebase.md)

## [JWT to Auth0](/materially-react-material-documentation/authentication/switch-to-auth0.md)