Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced User Authentication and Session Management in React Application #12

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhanced User Authentication and Session Management in React Application #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions hotel-reservation-app/hotel-reservation-frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import NotFound from "./pages/not_found";
import LandingPage from "./pages/landing_page";
import theme from "./theme";
import ErrorPage from "./pages/error";
import Cookies from "js-cookie";


export default function App() {
const [signedIn, setSignedIn] = useState(false);
Expand All @@ -25,6 +27,42 @@ export default function App() {
});
const [isAuthLoading, setIsAuthLoading] = useState(false);

function getMappedUser(userInfo: any): User {
return {
email: userInfo?.email || "",
id: userInfo?.sub || "",
name: userInfo?.first_name + " " + userInfo?.last_name,
mobileNumber: userInfo?.mobile_number || "",
};
}
useEffect(() => {
setIsAuthLoading(true);
if (Cookies.get("userinfo")) {
// We are here after a login
const userInfoCookie = Cookies.get("userinfo");
sessionStorage.setItem("userInfo", userInfoCookie || "");
Cookies.remove("userinfo");
var userInfo = userInfoCookie ? JSON.parse(atob(userInfoCookie)) : {};
setSignedIn(true);
setUser(getMappedUser(userInfo));
} else if (sessionStorage.getItem("userInfo")) {
// We have already logged in
var userInfo = JSON.parse(atob(sessionStorage.getItem("userInfo")!));
setSignedIn(true);
setUser(getMappedUser(userInfo));
} else {
console.log("User is not signed in");
if (
window.location.pathname !== "/auth/login" &&
window.location.pathname !== "/"
) {
window.location.pathname = "/auth/login";
}
}
setIsAuthLoading(false);
}, []);


if (isAuthLoading) {
return <div>User authenticating...</div>;
}
Expand Down
9 changes: 8 additions & 1 deletion hotel-reservation-app/hotel-reservation-frontend/src/layout/AppBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
import { Home } from "@mui/icons-material";
import { Button, Icon } from "@mui/material";
import { UserContext } from "../contexts/user";
import Cookies from "js-cookie";


function UserMenu() {
const user = React.useContext(UserContext);
Expand Down Expand Up @@ -48,7 +50,12 @@ function UserMenu() {
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
<MenuItem onClick={() => (window.location.pathname = "/reservations")}>
<MenuItem onClick={() => {
sessionStorage.removeItem("userInfo");
window.location.href =
`/auth/logout?session_hint=${Cookies.get('session_hint')}`;
}}
>
<Button style={{ textTransform: "none" }}>
<Typography textAlign="center">My Reservations</Typography>
</Button>
Expand Down
2 changes: 1 addition & 1 deletion hotel-reservation-app/hotel-reservation-frontend/src/pages/landing_page/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function LandingPage() {
</Typography>
<Button
onClick={() => {
window.location.href = "/rooms";
window.location.href = "/auth/login";
}}
variant="contained"
color="secondary"
Expand Down