Authentication

Auth0, JWT, Firebase setup

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

Firebase Authentication set by default

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,

App.js

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

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:

You can edit this file at [ ../src/config.js]

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'
}

Switching between Authentication methods

Firebase to JWT

Set JWT Config

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

config.js

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

Change Login Form

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

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>

Change AuthProvider

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

App.js

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

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

Change auth Hooks

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

useAuth.js

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

Firebase to Auth0

Set Auth0 Config

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

config.js

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

Change Login Form

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

\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>

Change AuthProvider

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

App.js

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

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

Change auth Hooks

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

useAuth.js

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