Authentication
Auth0, JWT, Firebase setup
Berry offers four authentication methods - Firebase, JSON Web Token (JWT), Auth0 and AWS - for users to choose from and can be changed to match the user's needs.
Firebase Authentication is set by default
Authentication
Access to dashboard pages is restricted to authenticated users. If a user is not authenticated, they will be 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 as AuthProvider } from 'contexts/FirebaseContext';
App component wrap with the
<FirebaseProvider>
<ThemeCustomization>
...
<AuthProvider>
<Routes />
<Snackbar />
</AuthProvider>
...
</<ThemeCustomization>>
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
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 work. Users have to change API and secret as per their project needs. One should not use those provided keys in their live environment.
config.js
// JWT JSON Web Token method
export const JWT_API = {
secret: 'SECRET-KEY',
timeout: '1 days'
};
// Firebase Authentication method
export const FIREBASE_API = {
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
export const AUTH0_API = {
client_id: 'CLIENT-ID',
domain: 'DOMAIN'
};
// AWS method
export const AWS_API = {
poolId: 'poolid',
appClientId: 'appid'
};
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.
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';
It's super simple. We have provided a code that just needs to be replaced.
Copy code from
src\views\pages\authentication\login\Auth0Login
to src\views\pages\authentication\auth-forms\AuthLogin.tsx
For nextJS,
src\components\Authentication\login\Auth0Login
to src\components\Authentication\auth-forms\AuthLogin.tsx
We have provided a code that just needs to be replaced. Copy code from
src\views\pages\authentication\login\Auth0Register
to src\views\pages\authentication\auth-forms\AuthRegister.tsx
For nextJS,
src\components\Authentication\login\Auth0Register
to src\components\Authentication\auth-forms\AuthRegister.tsx
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';
It's also super simple. We have provided a code that just needs to be replaced. Copy
src\views\pages\authentication\login\JWTLogin
to src\views\pages\authentication\auth-forms\AuthLogin.tsx
For nextJS,
src\components\Authentication\login\JWTLogin
to src\components\Authentication\auth-forms\AuthLogin.tsx
We have provided a code that just needs to be replaced. Copy
src\views\pages\authentication\login\JWTRegister
to src\views\pages\authentication\auth-forms\AuthRegister.tsx
For nextJS,
src\components\Authentication\login\JWTRegister
to src\components\Authentication\auth-forms\AuthRegister.tsx
Set AWS Config
At present, AWS uses a dummy config, so we don't need to change anything, but in actual implementation, you need to set poolId and appClientId in the following file. For more detail refer to AWS here: https://aws.amazon.com/cognito/
..\src\config.js
...
export const AWS_API = {
poolId: 'poolid',
appClientId: 'appid'
};
...
Change AuthProvider
..\src\App.js
import { AWSCognitoProvider as AuthProvider } from 'contexts/AWSCognitoContext';
// Also find & edit below code block
<AuthProvider>
<Routes />
<Snackbar />
</AuthProvider>
Change auth Hooks
Comment another context in the following file and uncomment Auth0 one.
..\src\hooks\useAuth.js
import AuthContext from 'contexts/AWSCognitoContext';
It's super simple. We have provided a code that just needs to be replaced. Copy code from
src\views\pages\authentication\login\AWSCognitoLogin
to src\views\pages\authentication\auth-forms\AuthLogin.tsx
For nextJS,
src\components\Authentication\login\AWSCongnitoLogin
to src\components\Authentication\auth-forms\AuthLogin.tsx
We have provided a code that just needs to be replaced. Copy code from
src\views\pages\authentication\login\AWSCognitoRegister
to src\views\pages\authentication\auth-forms\AuthRegister.tsx
For nextJS,
src\components\Authentication\login\AWSCognitoRegister
to src\components\Authentication\auth-forms\AuthRegister.tsx
Last modified 23d ago