Authentication

Auth0, JWT, Firebase setup

Berry includes three Authentication methods Firebase, JSON Web Token (JWT), Auth0 for their users. Users can change it as per their needs.

Firebase Authentication is set by default

Authentication

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:

All configurations related to authentication are stored in config.js. Those configs are like APIKey to connect authentication server, project id, etc.

Berry has a dummy/test config to make authentication works. Users have to change api and secret as per their project need. One should not use those provided keys in their live environment.

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

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

Switching between Authentication methods

Firebase to Auth0

Set Auth0 Config

At present, Auth0 uses a dummy client id and domain, so we don't need to change anything, but in actual implementation, you need to set client id and domain in the following file. For more detail refer to Auth0 here: https://auth0.com/docs/get-started/auth0-overview

..\src\config.js

...
  auth0: {
        client_id: 'This is dummy id',
        domain: 'this.is.dummy.domain'
    }
...

Change AuthProvider

..\src\App.js

import { Auth0Provider } from 'contexts/Auth0Context';

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

Change auth Hooks

Comment another context in the following file and uncomment Auth0 one.

..\src\hooks\useAuth.js

import AuthContext from 'contexts/Auth0Context';

Copy login code

It's super simple. We have provided a code that just needs to be replaced. Copy code from src\views\pages\authentication\login\Auth0Login and replace it entirely to src\views\pages\authentication\auth-forms\AuthLogin.tsx

Copy register code

We have provided a code that just needs to be replaced. Copy code from src\views\pages\authentication\login\Auth0Register and replace it to src\views\pages\authentication\auth-forms\AuthRegister.tsx

Firebase to JWT

Set JWT Config

At present, jwt uses a dummy backend call, so we don't need any secret, but in actual implementation, you need to set a secret in the following file. For more detail refer to JWT here: https://jwt.io/introduction

..\src\config.js

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

Change AuthProvider

..\src\App.js

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

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

Change auth Hooks

Comment another context in the following file and uncomment JWT one.

..\src\hooks\useAuth.js

import AuthContext from 'contexts/JWTContext';

Copy login code

It's also super simple. We have provided a code that just needs to be replaced. Copy code from src\views\pages\authentication\login\JWTLogin and replace it entirely to src\views\pages\authentication\auth-forms\AuthLogin.tsx

Copy register code

We have provided a code that just needs to be replaced. Copy code from src\views\pages\authentication\login\JWTRegister and replace it to src\views\pages\authentication\auth-forms\AuthRegister.tsx