Added SSO Support
This commit is contained in:
parent
56c598415d
commit
4233b17908
7
package-lock.json
generated
7
package-lock.json
generated
@ -16,6 +16,7 @@
|
||||
"@tsparticles/slim": "^3.8.1",
|
||||
"antd": "^5.24.2",
|
||||
"framer-motion": "^12.4.7",
|
||||
"keycloak-js": "^26.1.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-ga4": "^2.1.0",
|
||||
@ -15159,6 +15160,12 @@
|
||||
"node": ">=4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/keycloak-js": {
|
||||
"version": "26.1.4",
|
||||
"resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-26.1.4.tgz",
|
||||
"integrity": "sha512-4h2RicCzIAtsjKIG8DIO+8NKlpWX2fiNkbS0jlbtjZFbIGGjbQBzjS/5NkyWlzxamXVow9prHTIgIiwfo3GAmQ==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/keyv": {
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
"@tsparticles/slim": "^3.8.1",
|
||||
"antd": "^5.24.2",
|
||||
"framer-motion": "^12.4.7",
|
||||
"keycloak-js": "^26.1.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-ga4": "^2.1.0",
|
||||
|
||||
@ -509,3 +509,16 @@ h1 {
|
||||
flex: 1 1 0px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.tbauthbutton {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
color: white !important;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.tbauthbutton:hover {
|
||||
box-shadow:
|
||||
6px 6px 12px #c5c5c52b,
|
||||
-6px -6px 12px #ffffff30;
|
||||
}
|
||||
|
||||
13
public/silent-check-sso.html
Normal file
13
public/silent-check-sso.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Silent Check SSO</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
parent.postMessage(location.href, location.origin);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
36
src/App.jsx
36
src/App.jsx
@ -1,9 +1,10 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Layout, Space } from "antd";
|
||||
import { Layout, Space, Spin } from "antd";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import ParticlesBackground from "./components/ParticlesBackground";
|
||||
import { useMediaQuery } from "react-responsive";
|
||||
import { useKeycloak } from "./utils/KeycloakProvider";
|
||||
import MainView from "./views/MainView";
|
||||
import NotFoundView from "./views/NotFoundView";
|
||||
import CVView from "./views/CVView";
|
||||
@ -13,7 +14,7 @@ import ExperienceView from "./views/ExperienceView";
|
||||
import BlogsView from "./views/BlogsView";
|
||||
import BlogView from "./views/BlogView";
|
||||
import CacheReloadView from "./utils/CacheReloadView";
|
||||
import { LinkOutlined } from "@ant-design/icons";
|
||||
import { LinkOutlined, UserOutlined, LoadingOutlined } from "@ant-design/icons";
|
||||
|
||||
const { Content } = Layout;
|
||||
const { Footer } = Layout;
|
||||
@ -24,6 +25,8 @@ const App = () => {
|
||||
|
||||
const isMobile = useMediaQuery({ maxWidth: 600 });
|
||||
|
||||
const { isAuthenticated, loading, keycloak } = useKeycloak();
|
||||
|
||||
// Get the query parameter from the URL
|
||||
const getQueryParam = (param) => {
|
||||
const searchParams = new URLSearchParams(location.search); // Use location.search directly
|
||||
@ -217,8 +220,35 @@ const App = () => {
|
||||
setCurrentView("socials");
|
||||
}}
|
||||
>
|
||||
<LinkOutlined />
|
||||
<img
|
||||
src="https://cdn.tombutcher.work/icons/web/w-link.svg"
|
||||
alt="Social Media Links"
|
||||
height={16}
|
||||
style={{ marginBottom: "2px" }}
|
||||
/>
|
||||
</a>
|
||||
{loading ? (
|
||||
<LoadingOutlined spinning />
|
||||
) : (
|
||||
<>
|
||||
{!isAuthenticated && (
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
keycloak.login();
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="https://cdn.tombutcher.work/icons/auth/w-authtombutcherwork.svg"
|
||||
alt="Login to tombutcher.work"
|
||||
height={16}
|
||||
style={{ marginBottom: "2px" }}
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Space>
|
||||
</Footer>
|
||||
</motion.div>
|
||||
|
||||
13
src/main.jsx
13
src/main.jsx
@ -3,6 +3,7 @@ import ReactGA from "react-ga4";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { KeycloakProvider } from "./utils/KeycloakProvider";
|
||||
import App from "./App.jsx";
|
||||
import "antd/dist/reset.css"; // Import Ant Design styles
|
||||
import "../public/global.css";
|
||||
@ -11,9 +12,11 @@ import "../public/fonts.css";
|
||||
ReactGA.initialize("G-MN5S04W1HB");
|
||||
|
||||
createRoot(document.getElementById("root")).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
<KeycloakProvider>
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>
|
||||
</KeycloakProvider>,
|
||||
);
|
||||
|
||||
49
src/utils/KeycloakProvider.jsx
Normal file
49
src/utils/KeycloakProvider.jsx
Normal file
@ -0,0 +1,49 @@
|
||||
import React, { createContext, useContext, useEffect, useState } from "react";
|
||||
import Keycloak from "keycloak-js";
|
||||
|
||||
// Initialize Keycloak
|
||||
const keycloak = new Keycloak({
|
||||
url: "https://auth.tombutcher.work", // Your Keycloak server
|
||||
realm: "master", // Your Keycloak realm
|
||||
clientId: "web-client", // Your Keycloak client ID
|
||||
});
|
||||
|
||||
const KeycloakContext = createContext(null);
|
||||
|
||||
export const KeycloakProvider = ({ children }) => {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [user, setUser] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
keycloak
|
||||
.init({
|
||||
onLoad: "check-sso",
|
||||
silentCheckSsoRedirectUri:
|
||||
window.location.origin + "/silent-check-sso.html",
|
||||
})
|
||||
.then((authenticated) => {
|
||||
setIsAuthenticated(authenticated);
|
||||
if (authenticated) {
|
||||
setUser({
|
||||
username: keycloak.tokenParsed?.preferred_username,
|
||||
email: keycloak.tokenParsed?.email,
|
||||
firstName: keycloak.tokenParsed?.given_name,
|
||||
lastName: keycloak.tokenParsed?.family_name,
|
||||
roles: keycloak.tokenParsed?.realm_access?.roles || [],
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<KeycloakContext.Provider
|
||||
value={{ keycloak, isAuthenticated, user, loading }}
|
||||
>
|
||||
{children}
|
||||
</KeycloakContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useKeycloak = () => useContext(KeycloakContext);
|
||||
@ -1,10 +1,79 @@
|
||||
// views/MainView.jsx
|
||||
import React from "react";
|
||||
import { Button, Flex } from "antd";
|
||||
import { Button, Flex, Dropdown, message } from "antd";
|
||||
import { UserOutlined } from "@ant-design/icons";
|
||||
import { useMediaQuery } from "react-responsive";
|
||||
import { useKeycloak } from "../utils/KeycloakProvider";
|
||||
|
||||
const MainView = ({ setCurrentView }) => {
|
||||
const isMobile = useMediaQuery({ maxWidth: 600 });
|
||||
const { isAuthenticated, user, keycloak } = useKeycloak();
|
||||
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
|
||||
const authItems = [
|
||||
{
|
||||
label: user?.username,
|
||||
key: "1",
|
||||
icon: (
|
||||
<img
|
||||
src={"https://cdn.tombutcher.work/icons/auth/c-person.svg"}
|
||||
width={8}
|
||||
/>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: user?.email,
|
||||
key: "2",
|
||||
icon: (
|
||||
<img
|
||||
src={"https://cdn.tombutcher.work/icons/auth/c-at.svg"}
|
||||
width={8}
|
||||
/>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: "Manage Account",
|
||||
key: "3",
|
||||
icon: (
|
||||
<img
|
||||
src={"https://cdn.tombutcher.work/icons/auth/c-settings.svg"}
|
||||
width={8}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Logout",
|
||||
key: "4",
|
||||
icon: (
|
||||
<img
|
||||
src={"https://cdn.tombutcher.work/icons/auth/c-power.svg"}
|
||||
width={8}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const onAuthItemClick = ({ key }) => {
|
||||
switch (key) {
|
||||
case "3":
|
||||
window.location.href = keycloak.createAccountUrl();
|
||||
break;
|
||||
case "4":
|
||||
keycloak.logout();
|
||||
break;
|
||||
default:
|
||||
message.info(`Click on item ${key}`);
|
||||
}
|
||||
};
|
||||
|
||||
const authMenuProps = {
|
||||
items: authItems,
|
||||
onClick: onAuthItemClick,
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
justify="center"
|
||||
@ -84,6 +153,24 @@ const MainView = ({ setCurrentView }) => {
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<Dropdown
|
||||
menu={authMenuProps}
|
||||
placement={isMobile ? "topLeft" : "bottom"}
|
||||
>
|
||||
<Button
|
||||
className="tbauthbutton"
|
||||
style={{
|
||||
marginTop: "15px",
|
||||
float: isMobile ? "left" : "unset",
|
||||
}}
|
||||
>
|
||||
Hello, {user?.firstName + " " + user?.lastName || "Guest"}!
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user