You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**Materially** is the most developer-friendly & highly customizable React **Hooks** + Redux with **Material UI**
9
+
10
10
11
-
We’ve followed the best industry standards to make our product easy, fast & highly scalable to work with. Materially is the most convenient react hooks admin dashboard template for developers as it's made with React Hooks, Components, Create React App, Redux, clean code, and fully documented which allows you to build eye-catching, high-quality, high-performance responsive single-page applications.
11
+
[Berry](https://berrydashboard.io)is the most `developer-friendly` & highly customizable React Admin Template based on [Material-UI](http://material-ui.com/).
12
12
13
-
## Features
13
+
Berry comes with plenty of ready-to-use Material-UI components that will help you to build your site faster and saves your development time.
14
14
15
-
* Material UI
16
-
* React Hooks
17
-
* Thir-Party Authentication
18
-
* Fully Responsive Layout
19
-
* Dashboard, **380+ Widget** Cards
20
-
* JSS Powered
21
-
***75+ Pages**
22
-
* Live Menu Customize
23
-
* 6 months of free support included
24
-
* Easy to Build and Setup
25
-
* Clear Cut Code style
15
+
We’ve followed the best industry standards to make our product easy, fast & highly scalable to work with. It's made with this high-end technology stack - React Hooks, Components, Create React App & Redux.
If you have any suggestions regarding “How To” recipes that should be on this page, Let’s know. We always appreciate your feedback.
42
-
43
-
Reach us at codedthemes\[at\].gmail\[dot\]com
42
+
Feedback from our beloved community is always welcome. Feel free to reach out anytime at our [Support Panel.](https://codedthemes.support-hub.io) We would love to hear from you anytime.
description: Materially supports 3 popular Authentication methods.
2
+
description: 'Auth0, JWT, Firebase setup'
3
3
---
4
4
5
5
# Authentication
6
6
7
-
Materially supports 3 authentication methods:**Firebase Authentication, JSON Web Token, Auth0**.
7
+
Berry supports three Authentication methods **`Firebase, JSON Web Token (JWT), Auth0.`**
8
8
9
-
**FYI** - We provide Firebase Authentication by default.
9
+
{% hint style="info" %}
10
+
Firebase Authentication set by default
11
+
{% endhint %}
10
12
11
13
## How does it work?
12
14
13
15
Only authenticated users can access dashboard pages. If a user is not authenticated, the user redirected to the login page.
14
16
15
-
We implemented to make this work the “Guard” concept from Angular. It is simply a component that wraps a route and checks for user authentication status before allowing the navigation.
16
-
17
-
We used two guards **GuestGuard** and **AuthGuard**, To find more information about guards, please visit the **Routes.js** page.
17
+
We used two guards **`GuestGuard`** and **`AuthGuard`** . Guards have been configured in **`src\utils\route-guard\`** folder.
18
18
19
-
In the `src/layout/App.js`, we have specified auth provider **FirebaseProvider** like,
19
+
In the **`src/layout/App.js`**, we have specified auth provider **`FirebaseProvider`** like,
App component wrap with the **`<FirebaseProvider>`**
26
28
27
-
```text
29
+
```javascript
28
30
<ThemeProvider theme={theme(customization)}>
29
31
<FirebaseProvider>
30
32
<Routes />
@@ -33,15 +35,16 @@ App component wrap with the provider, like
33
35
</ThemeProvider>
34
36
```
35
37
36
-
Using **FirebaseProvider**, we can use the context directly by importing `useContext` from React and specifying the context **FirebaseContext** that we want to use or we can use the custom hook **`useAuth`** from `src/hooks/useAuth.js`
38
+
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`
37
39
38
40
## Auth Configuration:
39
41
40
42
{% hint style="info" %}
41
43
You can edit this file at **`[ ../src/config.js]`**
42
44
{% endhint %}
43
45
44
-
```text
46
+
{% code title="config.js" %}
47
+
```javascript
45
48
// JWT JSON Web Token method
46
49
jwt: {
47
50
secret:'SECRET-KEY',
@@ -66,99 +69,137 @@ auth0: {
66
69
domain:'DOMAIN'
67
70
}
68
71
```
69
-
70
-
### <aid="switching-between-auth-methods"></a>
72
+
{% endcode %}
71
73
72
74
## Switching between Authentication methods
73
75
74
76
### **Firebase to JWT**
75
77
76
-
**Set JWT Config** - Open file '**config.js**' at directory '../src/config.js' and set **jwt** configuration.
78
+
**Set JWT Config**
79
+
80
+
Open file **`config.js`** from directory **`..\src\config.js`** and set **`jwt`** configuration.
77
81
78
-
```text
79
-
export default {
80
-
...
81
-
jwt: {
82
+
{% code title="config.js" %}
83
+
```javascript
84
+
...
85
+
jwt: {
82
86
secret:'SECRET-KEY',
83
87
timeout:'1 days'
84
88
}
85
-
}
89
+
...
86
90
```
91
+
{% endcode %}
92
+
93
+
**Change Login Form**
87
94
88
-
**Change Login Form** - Open file '**index.js**' at directory '../src/views/Login/index.js', and use the **JWTLogin** component.
95
+
Open file **`index.js`**at directory **`..\src\views\pages\authentication\login\index.js`** and use the **`JWTLogin`** component.
89
96
90
-
```text
97
+
{% code title="login\\index.js" %}
98
+
```javascript
91
99
// Replace at line 8:
92
100
importJWTLoginfrom'./JWTLogin';
93
101
94
-
// Replace at line 21:
95
-
<JWTLogin />
102
+
103
+
// Also find & edit below code block
104
+
<Grid item xs={12}>
105
+
<JWTLogin />
106
+
{/* <Auth0Login /> */}
107
+
{/* <FirebaseLogin /> */}
108
+
</Grid>
96
109
```
110
+
{% endcode %}
97
111
98
-
**AuthProvider for Layout** - Open file '**App.js**' at directory '../src/layout/App.js' and use **JWTProvider**
112
+
**Change AuthProvider**
99
113
100
-
```text
101
-
// Replace at line 6;
114
+
Open file **`App.js`** at directory **`..\src\App.js`** and use **`JWTProvider`**
0 commit comments