tombutcher.work/2025-tombutcher-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Added SSO Support

Browse Source
This commit is contained in:
Tom Butcher 2025-03-29 17:50:22 +00:00
parent 56c598415d
commit 4233b17908
8 changed files with 212 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@ -16,6 +16,7 @@
"@tsparticles/slim": "^3.8.1", "@tsparticles/slim": "^3.8.1",
"antd": "^5.24.2", "antd": "^5.24.2",
"framer-motion": "^12.4.7", "framer-motion": "^12.4.7",
"keycloak-js": "^26.1.4",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-ga4": "^2.1.0", "react-ga4": "^2.1.0",
@ -15159,6 +15160,12 @@
"node": ">=4.0" "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": { "node_modules/keyv": {
"version": "4.5.4", "version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",

1
package.json
View File

@ -13,6 +13,7 @@
"@tsparticles/slim": "^3.8.1", "@tsparticles/slim": "^3.8.1",
"antd": "^5.24.2", "antd": "^5.24.2",
"framer-motion": "^12.4.7", "framer-motion": "^12.4.7",
"keycloak-js": "^26.1.4",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-ga4": "^2.1.0", "react-ga4": "^2.1.0",

13
public/global.css
View File

@ -509,3 +509,16 @@ h1 {
flex: 1 1 0px; flex: 1 1 0px;
margin-left: 15px; 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
View 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
View File

@ -1,9 +1,10 @@
import React, { useState, useEffect } from "react"; 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 { useLocation, useNavigate } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import ParticlesBackground from "./components/ParticlesBackground"; import ParticlesBackground from "./components/ParticlesBackground";
import { useMediaQuery } from "react-responsive"; import { useMediaQuery } from "react-responsive";
import { useKeycloak } from "./utils/KeycloakProvider";
import MainView from "./views/MainView"; import MainView from "./views/MainView";
import NotFoundView from "./views/NotFoundView"; import NotFoundView from "./views/NotFoundView";
import CVView from "./views/CVView"; import CVView from "./views/CVView";
@ -13,7 +14,7 @@ import ExperienceView from "./views/ExperienceView";
import BlogsView from "./views/BlogsView"; import BlogsView from "./views/BlogsView";
import BlogView from "./views/BlogView"; import BlogView from "./views/BlogView";
import CacheReloadView from "./utils/CacheReloadView"; import CacheReloadView from "./utils/CacheReloadView";
import { LinkOutlined } from "@ant-design/icons"; import { LinkOutlined, UserOutlined, LoadingOutlined } from "@ant-design/icons";
const { Content } = Layout; const { Content } = Layout;
const { Footer } = Layout; const { Footer } = Layout;
@ -24,6 +25,8 @@ const App = () => {
const isMobile = useMediaQuery({ maxWidth: 600 }); const isMobile = useMediaQuery({ maxWidth: 600 });
const { isAuthenticated, loading, keycloak } = useKeycloak();
// Get the query parameter from the URL // Get the query parameter from the URL
const getQueryParam = (param) => { const getQueryParam = (param) => {
const searchParams = new URLSearchParams(location.search); // Use location.search directly const searchParams = new URLSearchParams(location.search); // Use location.search directly
@ -217,8 +220,35 @@ const App = () => {
setCurrentView("socials"); setCurrentView("socials");
}} }}
> >
<LinkOutlined /> <img
src="https://cdn.tombutcher.work/icons/web/w-link.svg"
alt="Social Media Links"
height={16}
style={{ marginBottom: "2px" }}
/>
</a> </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> </Space>
</Footer> </Footer>
</motion.div> </motion.div>

13
src/main.jsx
View File

@ -3,6 +3,7 @@ import ReactGA from "react-ga4";
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
import { StrictMode } from "react"; import { StrictMode } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { KeycloakProvider } from "./utils/KeycloakProvider";
import App from "./App.jsx"; import App from "./App.jsx";
import "antd/dist/reset.css"; // Import Ant Design styles import "antd/dist/reset.css"; // Import Ant Design styles
import "../public/global.css"; import "../public/global.css";
@ -11,9 +12,11 @@ import "../public/fonts.css";
ReactGA.initialize("G-MN5S04W1HB"); ReactGA.initialize("G-MN5S04W1HB");
createRoot(document.getElementById("root")).render( createRoot(document.getElementById("root")).render(
<StrictMode> <KeycloakProvider>
<BrowserRouter> <StrictMode>
<App /> <BrowserRouter>
</BrowserRouter> <App />
</StrictMode>, </BrowserRouter>
</StrictMode>
</KeycloakProvider>,
); );

49
src/utils/KeycloakProvider.jsx Normal file
View 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);

89
src/views/MainView.jsx
View File

@ -1,10 +1,79 @@
// views/MainView.jsx // views/MainView.jsx
import React from "react"; 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 { useMediaQuery } from "react-responsive";
import { useKeycloak } from "../utils/KeycloakProvider";
const MainView = ({ setCurrentView }) => { const MainView = ({ setCurrentView }) => {
const isMobile = useMediaQuery({ maxWidth: 600 }); 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 ( return (
<Flex <Flex
justify="center" justify="center"
@ -84,6 +153,24 @@ const MainView = ({ setCurrentView }) => {
</Button> </Button>
</Flex> </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> </div>
</Flex> </Flex>
); );