authentication.md

description
Auth0, JWT, Firebase setup

Authentication

Berry supports three Authentication methods Firebase, JSON Web Token (JWT), Auth0.

{% hint style="info" %} Firebase Authentication set 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 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" %}

import { FirebaseProvider } from "../contexts/FirebaseContext";

{% endcode %}

App component wrap with the <FirebaseProvider>

<ThemeProvider theme={theme(customization)}>
  <FirebaseProvider>
    <Routes />
    <Snackbar />
  </FirebaseProvider>
</ThemeProvider>

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:

{% hint style="info" %} You can edit this file at [ ../src/config.js] {% endhint %}

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

// JWT JSON Web Token method
jwt: {
    secret: 'SECRET-KEY',
    timeout: '1 days'
},

// Firebase Authentication method
firebase: {
    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
auth0: {
    client_id: 'CLIENT-ID',
    domain: 'DOMAIN'
}

{% endcode %}

Switching between Authentication methods

Firebase to JWT

Set JWT Config

Open file config.js from directory ..\src\config.js and set jwt configuration.

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

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

{% endcode %}

Change Login Form

Open file index.js at directory ..\src\views\pages\authentication\login\index.js and use the JWTLogin component.

{% code title="login\index.js" %}

// Replace at line 8:
import JWTLogin from './JWTLogin';


// Also find & edit below code block
<Grid item xs={12}>
    <JWTLogin />
    {/* <Auth0Login /> */}
    {/* <FirebaseLogin /> */}
</Grid>

{% endcode %}

Change AuthProvider

Open file App.js at directory ..\src\App.js and use JWTProvider

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

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

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

{% endcode %}

Change auth Hooks

Open file useAuth.js at directory ..\src\hooks\useAuth.js and use JWTContext

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

// Replace from line 2:
import JWTContext from '../contexts/JWTContext';
const useAuth = () => useContext(JWTContext);

{% endcode %}

Firebase to Auth0

Set Auth0 Config

Open file config.js from directory ..\src\config.js and set jwt configuration.

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

...
  auth0: {
      client_id: 'client_id',
      domain: 'yourdomain.com'
  }
...

{% endcode %}

Change Login Form

Open file index.js at directory ..\src\views\pages\authentication\login\index.js and use the Auth0Login component.

{% code title="\login\index.js" %}

// Replace at line 8:
import Auth0Login from './Auth0Login';


// Also find & edit below code block
<Grid item xs={12}>
    {/* <JWTLogin /> */}
    <Auth0Login />
    {/* <FirebaseLogin /> */}
</Grid>

{% endcode %}

Change AuthProvider

Open file App.js at directory ..\src\App.js and use Auth0Provider

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

// Replace at line 6:
import {Auth0Provider} from "./contexts/Auth0Context";

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

{% endcode %}

Change auth Hooks

Open file useAuth.js at directory ..\src\hooks\useAuth.js and use Auth0Context

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

// Replace from line 2:
import Auth0Context from '../contexts/Auth0Context';
const useAuth = () => useContext(Auth0Context);

{% endcode %}