brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

moved login page logic into the auth file to redirect correctly before auth redirects because you're unauthenticated

Browse source
This commit is contained in:
Carter 2025-06-24 16:46:59 -06:00
parent f900ba6c9d
commit 15d2a6a690
3 changed files with 81 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/navigation/Router.tsx
View file

@ -9,7 +9,6 @@ import { getWhitelabel } from "services/whiteLabel";
import Ventilation from "pages/VentEditor";
import { useGlobalState } from "providers";
import DeviceSupport from "pages/DeviceSupport";
import Login from "pages/Login";
const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
const DevicePage = lazy(() => import("pages/Device"));
@ -54,7 +53,7 @@ export const appendToUrl = (appendage: number | string) => {
export default function Router() {
const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();
const { isLoading } = useAuth0();
const whiteLabel = getWhitelabel();
const [{ user }] = useGlobalState();
@ -303,7 +302,6 @@ export default function Router() {
{/* Redirects */}
<Route path="/callback" element={<Navigate to="/" />} />
<Route path="/login" element={<Login />} />
{/* <Route path="/team/:teamID" element={<Navigate to="/teams/:teamID" />} /> */}
{/* <Route path="/device/:deviceID" element={<Navigate to="/devices/:devicesID" />} /> */}
<Route path="" element={<Navigate to={whiteLabel.homePage ? whiteLabel.homePage : "/devices"} />} />

53
src/pages/Login.tsx
View file

@ -1,53 +0,0 @@
import { RedirectLoginOptions, useAuth0 } from "@auth0/auth0-react";
// import { useAuth } from "hooks";
import queryString from "query-string";
import { useCallback, useEffect } from "react";
import { useLocation } from "react-router";
// import Loading from "./Loading";
import LoadingScreen from "app/LoadingScreen";
interface Props {
prevPath?: string;
}
export default function Login(props: Props) {
const { prevPath } = props;
const location = useLocation();
const { loginWithRedirect } = useAuth0();
const setRouteBeforeLogin = useCallback((): Promise<string> => {
return new Promise(function(resolve) {
localStorage.setItem("routeBeforeLogin", prevPath ? prevPath : "/");
return resolve("success");
});
}, [prevPath]);
useEffect(() => {
const options: RedirectLoginOptions = {
authorizationParams: {} // Initialize here
};
console.log(location)
if (location && location.search) {
let parsed = queryString.parse(location.search);
console.log(parsed.signup)
if (parsed.signup === "true") {
// if (options.authorizationParams) options.authorizationParams.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
options.authorizationParams!.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
console.log(options)
}
if (parsed.email && parsed.email !== "") {
// if (options.authorizationParams) options.authorizationParams.login_hint = parsed.email.toString(); // prefill email
options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
}
}
setRouteBeforeLogin().finally(() => {
loginWithRedirect(options);
});
}, [location, loginWithRedirect, setRouteBeforeLogin]);
// return <LoadingScreen fullViewport={true} />;
return <LoadingScreen message="login redirect" />;
}

102
src/providers/auth.tsx
View file

@ -1,31 +1,89 @@
import { useAuth0 } from "@auth0/auth0-react";
import { PropsWithChildren, useEffect } from "react";
import { RedirectLoginOptions, useAuth0 } from "@auth0/auth0-react";
import queryString from "query-string";
import { PropsWithChildren, useCallback, useEffect } from "react";
import { useLocation } from "react-router-dom";
interface Props extends PropsWithChildren<any>{
setToken: React.Dispatch<React.SetStateAction<string | undefined>>
prevPath?: string
}
export default function AuthWrapper(props: Props) {
const { children, setToken } = props;
const { isLoading, loginWithRedirect, isAuthenticated, getAccessTokenSilently } = useAuth0();
useEffect(() => {
if (!isAuthenticated && !isLoading) {
loginWithRedirect();
}
}, [isAuthenticated, loginWithRedirect, isLoading]);
const { children, setToken, prevPath } = props;
const { isLoading, loginWithRedirect, isAuthenticated, getAccessTokenSilently } = useAuth0();
useEffect(() => {
if (isAuthenticated) getAccessTokenSilently().then(t => {
if (t.length < 1) {
loginWithRedirect()
}
setToken(t)
}).catch(() => {
// No token, go back to login
loginWithRedirect()
})
}, [setToken, isAuthenticated])
return children;
useEffect(() => {
const url = new URL(window.location.href);
const isManualLoginPage = url.pathname === "/login";
if (isManualLoginPage) {
const options: RedirectLoginOptions = {
authorizationParams: {} // Initialize here
};
let parsed = queryString.parse(url.search);
if (parsed.signup === "true") {
options.authorizationParams!.screen_hint = "signup";
}
if (parsed.email && parsed.email !== "") {
options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
}
loginWithRedirect(options)
} else if (!isAuthenticated && !isLoading) {
loginWithRedirect();
}
}, [isAuthenticated, loginWithRedirect, isLoading]);
useEffect(() => {
if (isAuthenticated) getAccessTokenSilently().then(t => {
if (t.length < 1) {
loginWithRedirect()
}
console.log("setting token :)")
setToken(t)
}).catch(() => {
// No token, go back to login
loginWithRedirect()
})
}, [setToken, isAuthenticated])
// const setRouteBeforeLogin = useCallback((): Promise<string> => {
// return new Promise(function(resolve) {
// localStorage.setItem("routeBeforeLogin", prevPath ? prevPath : "/");
// return resolve("success");
// });
// }, [prevPath]);
useEffect(() => {
const options: RedirectLoginOptions = {
authorizationParams: {} // Initialize here
};
console.log(location)
if (location && location.search) {
let parsed = queryString.parse(location.search);
console.log(parsed.signup)
if (parsed.signup === "true") {
// if (options.authorizationParams) options.authorizationParams.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
options.authorizationParams!.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
console.log(options)
}
if (parsed.email && parsed.email !== "") {
// if (options.authorizationParams) options.authorizationParams.login_hint = parsed.email.toString(); // prefill email
options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
}
}
// setRouteBeforeLogin().finally(() => {
// loginWithRedirect(options);
// });
}, [location, loginWithRedirect, /*setRouteBeforeLogin*/]);
return children;
}