Skip to content

Commit

Permalink
Okta, take 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@entrotech
entrotech committed Jan 5, 2024
1 parent b56a807 commit a0d5bae
Show file tree
Hide file tree
Showing 19 changed files with 549 additions and 114 deletions.
6 changes: 6 additions & 0 deletions client/.env
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,8 @@
# Use to simulate different environments (DEV, UAT, PROD)
REACT_APP_ENV=DEV

REACT_APP_API_SERVER_URL=http://localhost:5001
REACT_APP_AUTH0_DOMAIN=dev-o7b5lcj02fchkh7t.us.auth0.com
REACT_APP_AUTH0_CLIENT_ID=2yH0DY3x9a0qFjfXRKZCmguZDe8BM0dB
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:3000/callback
REACT_APP_AUTH0_AUDIENCE=https://hello-world.example.com
31 changes: 31 additions & 0 deletions client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
]
},
"dependencies": {
"@auth0/auth0-react": "^2.2.4",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
Expand Down
214 changes: 118 additions & 96 deletions client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ import ForgotPassword from "./components/Authorization/ForgotPassword";
import Feedback from "./components/Feedback/FeedbackPage";
import ErrorPage from "./components/ErrorPage";

// import { useAuth0 } from "@auth0/auth0-react";
import CallbackPage from "./components/Okta/CallbackPage";
import ProfilePage from "./components/Okta/ProfilePage";
// import PageLoader from "./components/UI/PageLoader";

const calculationPath = "/calculation/:page/:projectId?/*";

const App = ({
Expand All @@ -50,137 +55,154 @@ const App = ({
}) => {
const userContext = useContext(UserContext);
const account = userContext.account;
// const { isLoading } = useAuth0();

const router = createBrowserRouter(
createRoutesFromElements(
<Route
path="/"
element={
<div>
<ClientAreaLayout
appContainerRef={appContainerRef}
hasAcceptedTerms={hasAcceptedTerms}
onAcceptTerms={onAcceptTerms}
checklistModalOpen={checklistModalOpen}
toggleChecklistModal={toggleChecklistModal}
/>
</div>
}
>
{/* These routes either have no sidebar or use a custom sidebar */}
<Route
path="/projects"
element={
<RequireAuth
isAuthorized={account && !!account.email}
redirectTo="/unauthorized"
>
<ProjectsPage
account={account}
contentContainerRef={contentContainerRef}
/>
</RequireAuth>
}
/>
<Route
path={calculationPath}
element={
<TdmCalculationContainer
account={account}
contentContainerRef={contentContainerRef}
/>
}
/>
<Route
path="/calculation"
element={<Navigate to="/calculation/1/0" />}
/>

<Route>
<Route
path="/"
element={
<Navigate
to={account && account.email ? "/calculation/1/0" : "/login"}
/>
}
/>
<Route
path="/admin"
element={
<RequireAuth
isAuthorized={account && account.isAdmin}
redirectTo="/unauthorized"
>
<Admin account={account} />
</RequireAuth>
}
/>
{/* Layout Route adds plain Sidebar */}
<Route
element={
<div>
<PlainSidebarLayout contentContainerRef={contentContainerRef} />
<ClientAreaLayout
appContainerRef={appContainerRef}
hasAcceptedTerms={hasAcceptedTerms}
onAcceptTerms={onAcceptTerms}
checklistModalOpen={checklistModalOpen}
toggleChecklistModal={toggleChecklistModal}
/>
</div>
}
>
<Route path="/about" element={<About />} />

{/* TODO: update FAQ to use checklist link, redirect for now. */}
<Route path="/faqs/true" element={<Navigate to="/checklist" />} />
<Route path="/checklist" element={<ChecklistPage />} />
<Route
path="/termsandconditions"
element={<TermsAndConditionsPage />}
/>
<Route path="/privacypolicy" element={<PrivacyPolicy />} />
<Route path="/unauthorized" element={<Unauthorized />} />
<Route path="/register/:email?" element={<Register />} />
<Route path="/updateaccount/:email?" element={<UpdateAccount />} />
<Route path="/confirm/:token?" element={<ConfirmEmail />} />
<Route path="/login/:email?" element={<Login />} />
<Route path="/forgotpassword" element={<ForgotPassword />} />
<Route path="/resetPassword/:token" element={<ResetPassword />} />
<Route path="/callback" element={<CallbackPage />} />
<Route path="/profile" element={<ProfilePage />} />
{/* These routes either have no sidebar or use a custom sidebar */}
<Route
path="/roles"
path="/projects"
element={
<RequireAuth
isAuthorized={account && account.isSecurityAdmin}
isAuthorized={account && !!account.email}
redirectTo="/unauthorized"
>
<Roles />
<ProjectsPage
account={account}
contentContainerRef={contentContainerRef}
/>
</RequireAuth>
}
/>
<Route
path="/archivedaccounts"
path={calculationPath}
element={
<RequireAuth
isAuthorized={account && account.isSecurityAdmin}
redirectTo="/unauthorized"
>
<RolesArchive />
</RequireAuth>
<TdmCalculationContainer
account={account}
contentContainerRef={contentContainerRef}
/>
}
/>
<Route
path="/archivedprojects"
path="/calculation"
element={<Navigate to="/calculation/1/0" />}
/>

<Route
path="/"
element={
<Navigate
to={account && account.email ? "/calculation/1/0" : "/login"}
/>
}
/>
<Route
path="/admin"
element={
<RequireAuth
isAuthorized={account && account.isSecurityAdmin}
isAuthorized={account && account.isAdmin}
redirectTo="/unauthorized"
>
<ProjectsArchive />
<Admin account={account} />
</RequireAuth>
}
/>
<Route path="/faqs" element={<FaqView isAdmin={account.isAdmin} />} />
<Route path="/feedback" element={<Feedback account={account} />} />
<Route path="*" element={<ErrorPage />} />
{/* Layout Route adds plain Sidebar */}
<Route
element={
<div>
<PlainSidebarLayout contentContainerRef={contentContainerRef} />
</div>
}
>
<Route path="/about" element={<About />} />

{/* TODO: update FAQ to use checklist link, redirect for now. */}
<Route path="/faqs/true" element={<Navigate to="/checklist" />} />
<Route path="/checklist" element={<ChecklistPage />} />
<Route
path="/termsandconditions"
element={<TermsAndConditionsPage />}
/>
<Route path="/privacypolicy" element={<PrivacyPolicy />} />
<Route path="/unauthorized" element={<Unauthorized />} />
<Route path="/register/:email?" element={<Register />} />
<Route path="/updateaccount/:email?" element={<UpdateAccount />} />
<Route path="/confirm/:token?" element={<ConfirmEmail />} />
<Route path="/login/:email?" element={<Login />} />
<Route path="/forgotpassword" element={<ForgotPassword />} />
<Route path="/resetPassword/:token" element={<ResetPassword />} />
<Route
path="/roles"
element={
<RequireAuth
isAuthorized={account && account.isSecurityAdmin}
redirectTo="/unauthorized"
>
<Roles />
</RequireAuth>
}
/>
<Route
path="/archivedaccounts"
element={
<RequireAuth
isAuthorized={account && account.isSecurityAdmin}
redirectTo="/unauthorized"
>
<RolesArchive />
</RequireAuth>
}
/>
<Route
path="/archivedprojects"
element={
<RequireAuth
isAuthorized={account && account.isSecurityAdmin}
redirectTo="/unauthorized"
>
<ProjectsArchive />
</RequireAuth>
}
/>
<Route
path="/faqs"
element={<FaqView isAdmin={account.isAdmin} />}
/>
<Route path="/feedback" element={<Feedback account={account} />} />
<Route path="*" element={<ErrorPage />} />
</Route>
</Route>
</Route>
)
);

// if (isLoading) {
// return (
// <div>
// <pre>{JSON.stringify(isLoading, null, 2)}</pre>
// <PageLoader />
// </div>
// );
// }

return (
<div>
<RouterProvider router={router} />
Expand Down
2 changes: 1 addition & 1 deletion client/src/AppWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const AppWrapper = () => {
/*
Storing user account object in Local Storage as well as state allows the
login session to persist across browser sessions. It also allows a deep
link to a protexted client path be propery authenticated.
link to a protected client path be properly authenticated.
*/
localStorage.setItem("currentUser", JSON.stringify(userAccount));
setAccount(userAccount);
Expand Down
39 changes: 39 additions & 0 deletions client/src/Auth0ProviderWithNavigate.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Auth0Provider } from "@auth0/auth0-react";
import PropTypes from "prop-types";
import React from "react";
import { useNavigate } from "react-router-dom";

const Auth0ProviderWithNavigate = ({ children }) => {
const navigate = useNavigate();

const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const redirectUri = process.env.REACT_APP_AUTH0_CALLBACK_URL;

const onRedirectCallback = appState => {
navigate(appState.returnTo || window.location.pathname);
};

if (!(domain && clientId && redirectUri)) {
return null;
}

return (
<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{
redirect_uri: redirectUri
}}
onRedirectCallback={onRedirectCallback}
>
{children}
</Auth0Provider>
);
};

Auth0ProviderWithNavigate.propTypes = {
children: PropTypes.any
};

export default Auth0ProviderWithNavigate;
Loading

0 comments on commit a0d5bae

Please sign in to comment.