Closed ehgp closed 2 years ago
I got setJWT to work by introducing both parameters.
const [jwt, setJWT] = useLocalStorage("jwt", "");
I still cannot get useAuth to work however.
If you have questions about a tutorial, may I suggest my Discord channel: https://discord.gg/neKghyefqh
You have posted a lot of code here that is not from my tutorial.
What I don't see is your index.js that imports the App.js. In that file, you also need to import your context. Look at mine in this repository. From there, you need the AuthProvider like I created to provide the context to the rest of your app.
This is not an issue with the repository provided.
Thanks for the invite! I did not post my index.js and App.js! It must be that for sure!
App.js
import { useState, useEffect, useMemo } from "react";
// RTL plugins
import rtlPlugin from "stylis-plugin-rtl";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
// @mui material components
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Icon from "@mui/material/Icon";
// react-router components
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
// omponents
import MDBox from "./components/MDBox";
// example components
import Sidenav from "./examples/Sidenav";
import Configurator from "./examples/Configurator";
// themes
import theme from "./assets/theme";
import themeRTL from "./assets/theme/theme-rtl";
// Dark Mode themes
import themeDark from "./assets/theme-dark";
import themeDarkRTL from "./assets/theme-dark/theme-rtl";
// Client Portal routes
import { user_routes, admin_routes, public_routes } from "./routes/routes";
import useLocalStorage from "hooks/useLocalStorage";
// contexts
import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "./context";
// Images
import brandWhite from "./assets/images/Badge_HG_States.png";
import brandDark from "./assets/images/Badge_black_transparent.png";
export default function App() {
const [controller, dispatch] = useMaterialUIController();
const {
miniSidenav,
direction,
layout,
openConfigurator,
sidenavColor,
transparentSidenav,
whiteSidenav,
darkMode,
} = controller;
const [onMouseEnter, setOnMouseEnter] = useState(false);
const [rtlCache, setRtlCache] = useState(null);
const { pathname } = useLocation();
const ROLES = ["user", "admin", "owner"];
const [jwt, setJWT] = useLocalStorage("jwt", "");
// Cache for the rtl
useMemo(() => {
const cacheRtl = createCache({
key: "rtl",
stylisPlugins: [rtlPlugin],
});
setRtlCache(cacheRtl);
}, []);
// Open sidenav when mouse enter on mini sidenav
const handleOnMouseEnter = () => {
if (miniSidenav && !onMouseEnter) {
setMiniSidenav(dispatch, false);
setOnMouseEnter(true);
}
};
// Close sidenav when mouse leave mini sidenav
const handleOnMouseLeave = () => {
if (onMouseEnter) {
setMiniSidenav(dispatch, true);
setOnMouseEnter(false);
}
};
// Change the openConfigurator state
const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
// Setting the dir attribute for the body element
useEffect(() => {
document.body.setAttribute("dir", direction);
}, [direction]);
// Setting page scroll to 0 when changing the route
useEffect(() => {
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
}, [pathname]);
const getRoutes = (allRoutes) =>
allRoutes.map((route) => {
if (route.user) {
return getRoutes(route.user);
}
if (route.admin) {
return getRoutes(route.admin);
}
if (route.public) {
return getRoutes(route.public);
}
if (route.route) {
return <Route exact path={route.route} element={route.component} key={route.key} />;
}
return null;
});
const configsButton = (
<MDBox
display="flex"
justifyContent="center"
alignItems="center"
width="3.25rem"
height="3.25rem"
bgColor="white"
shadow="sm"
borderRadius="50%"
position="fixed"
right="2rem"
bottom="2rem"
zIndex={99}
color="dark"
sx={{ cursor: "pointer" }}
onClick={handleConfiguratorOpen}
>
<Icon fontSize="small" color="inherit">
settings
</Icon>
</MDBox>
);
return direction === "rtl" ? (
<CacheProvider value={rtlCache}>
<ThemeProvider theme={darkMode ? themeDarkRTL : themeRTL}>
<CssBaseline />
<Routes>
{getRoutes(routes)}
<Route path="*" element={<Navigate to="/dashboard" />} />
</Routes>
{layout === "dashboard" && (
<>
<Sidenav
color={sidenavColor}
brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
brandName=" "
routes={routes}
onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave}
/>
<Configurator />
{configsButton}
</>
)}
{layout === "vr" && <Configurator />}
</ThemeProvider>
</CacheProvider>
) : (
<ThemeProvider theme={darkMode ? themeDark : theme}>
<CssBaseline />
<Routes>
{jwt
? jwt?.user_role === "user"
? getRoutes(user_routes)
: getRoutes(admin_routes)
: getRoutes(public_routes)}
{/* catch all */}
<Route path="*" element={<Navigate to="/404" />} />
</Routes>
{layout === "dashboard" && (
<>
<Sidenav
color={sidenavColor}
brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
brandName=" "
routes={user_routes}
onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave}
/>
<Configurator />
{configsButton}
</>
)}
{layout === "vr" && <Configurator />}
</ThemeProvider>
);
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import { MaterialUIControllerProvider } from "./context";
ReactDOM.render(
<BrowserRouter>
<MaterialUIControllerProvider>
<App />
</MaterialUIControllerProvider>
</BrowserRouter>,
document.getElementById("root")
);
Dependencies
Win 11 NodeJS 16.16.0 (Currently using 64-bit executable)
package.json
jsconfig.json
.prettierrc.json
AuthContext.jsx
I had also used the original useAuth provided by your tutorial and I got the same error.
useLocalStorage.js
The Error
setAuth is not a function / can uncomment useLocalStorage lines to recreate setJWT error
useLogin.js
authentication/sign-in/index.js
Error
I am not an expert on calling functions or objects across files but I cannot quite put my finger on this one. If I use raw LocalStorage everything works fine.