Skip to content

Commit

Permalink
feat: keycloak login test
Browse files Browse the repository at this point in the history
  • Loading branch information
@DylanJG01
DylanJG01 committed Nov 16, 2023
1 parent 378394b commit 46a874b
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 403 deletions.
11 changes: 8 additions & 3 deletions src/components/Navbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
'use client';
// 'use client';

import {
AppBar,
Expand All @@ -18,6 +18,7 @@ import MenuBar from 'images/MenuBar';
import { makeStyles } from 'models/makeStyles';
import ChangeThemeButton from './ChangeThemeButton';
import Link from './Link';
import Test from './test';

const treeTrackerLogo = `/images/treetracker_logo.svg`;
const treeTrackerLogoWhite = `/images/treetracker_logo_white.svg`;
Expand Down Expand Up @@ -61,7 +62,7 @@ const useStyles = makeStyles()((theme) => ({
}));

function Navbar() {
const { asPath, pathname } = useRouter();
const router = useRouter();
const [anchorEl, setAnchorEl] = useState(null);
const isMobile = useMobile();
const { navbar: config } = useConfigContext();
Expand All @@ -77,10 +78,11 @@ function Navbar() {
};
// trees/1017648?embed=true
const { classes } = useStyles();
const path = asPath.toString().includes('embed=true');
const path = router.asPath.toString().includes('embed=true');
if (path === true) {
return null;
}

return (
<AppBar
elevation={4}
Expand Down Expand Up @@ -133,6 +135,9 @@ function Navbar() {
</Button>
</Link>
))}

<Test />

<ChangeThemeButton />
</Toolbar>
<Button
Expand Down
48 changes: 48 additions & 0 deletions src/components/test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { useAuth } from "react-oidc-context"
// import { UserManager } from "oidc-client-ts";
import { Button } from "@mui/material";
import log from "loglevel"

export default function Test(){

const auth = useAuth();
// const mng = new UserManager({ popup_redirect_uri: "http://localhost:3000"});
log.warn("AUTH", auth)
// log.warn("MGN: ", mng)
log.warn("USER", auth?.user)


switch (auth.activeNavigator) {
case "signinSilent":
return <div>Signing you in...</div>;
case "signoutRedirect":
return <div>Signing you out...</div>;
}


if (auth.isLoading) {
return <div>Loading...</div>;
}

if (auth.error) {
return <div>Oops... {auth.error.message}</div>;
}

if (auth.isAuthenticated) {
return (
<>
Hello {auth.user?.profile.preferred_username}
<Button onClick={() => void auth.removeUser()}>Log out</Button>
</>
);
}

return(
<>
<Button onClick={() => void auth.signinRedirect()}>Log in</Button>
<Button
onClick={() => void auth.signinRedirect()}>Sign Up</Button>
</>

)
}
13 changes: 13 additions & 0 deletions src/models/oidcConfig.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const oidcConfig = {
authority: 'https://dev-k8s.treetracker.org/keycloak/realms/treetracker/',
client_id: 'raw-client',
redirect_uri: 'http://localhost:3000/',
realm: 'treetracker',
onSigninCallback: (res) => {
console.log('onSigninCallback', res);
localStorage.setItem('res', JSON.stringify(res));
},
// to oidcConfig to remove the payload from the URL upon successful login,
};

export default oidcConfig
124 changes: 66 additions & 58 deletions src/pages/_app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,12 @@ import { ConfigProvider, defaultConfig } from '../context/configContext';
import { CustomThemeProvider } from '../context/themeContext';
import { useLocalStorage, useEmbed } from '../hooks/globalHooks';
import { MapContextProvider } from '../mapContext';

import { AuthProvider } from "react-oidc-context";
import oidcConfig from 'models/oidcConfig';
log.warn(`Web Map Client version ${packageJson.version}`);



if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
log.warn('Mocking API calls with msw');
// eslint-disable-next-line global-require
Expand Down Expand Up @@ -88,10 +91,11 @@ function TreetrackerApp({ Component, pageProps, device, config }) {

log.warn('app: isDesktop: ', nextExtraIsDesktop);
log.warn('app: component: ', Component);
// log.warn('app: component: ', Component);
log.warn('app: component: isBLayout', Component.isBLayout);
log.warn('router:', router);

// oidc.createSigninRequest()

React.useEffect(() => {
const handleRouteChange = (url) => {
log.warn('handleRouteChange:', url);
Expand Down Expand Up @@ -140,68 +144,72 @@ function TreetrackerApp({ Component, pageProps, device, config }) {
if (isAdmin) {
return (
<>
<GoogleAnalytics />
<LayoutDashboard>
<Component {...pageProps} />
</LayoutDashboard>
<AuthProvider { ...oidcConfig}>
<GoogleAnalytics />
<LayoutDashboard>
<Component {...pageProps} />
</LayoutDashboard>
</AuthProvider>
</>
);
}

return (
<ConfigProvider config={config}>
<GoogleAnalytics />
<CacheProvider value={muiCache ?? createMuiCache()}>
<CustomThemeProvider>
<DrawerProvider>
<MapContextProvider>
{nextExtraIsDesktop && !nextExtraIsEmbed && (
<Layout {...extraProps} ref={layoutRef}>
<Component {...pageProps} {...extraProps} />
</Layout>
)}
{nextExtraIsDesktop && nextExtraIsEmbed && (
<LayoutEmbed
{...extraProps}
isFloatingDisabled={Component.isFloatingDisabled}
>
<Component {...pageProps} {...extraProps} />
</LayoutEmbed>
)}
{!nextExtraIsDesktop && Component.isBLayout && (
<LayoutMobileB>
<Component {...pageProps} {...extraProps} />
</LayoutMobileB>
)}
{!nextExtraIsDesktop && Component.isCLayout && (
<LayoutMobileC>
<Component {...pageProps} {...extraProps} />
</LayoutMobileC>
)}
{!nextExtraIsDesktop &&
!Component.isBLayout &&
!Component.isCLayout && (
<LayoutMobile ref={layoutRef}>
<AuthProvider { ...oidcConfig}>
<ConfigProvider config={config}>
<GoogleAnalytics />
<CacheProvider value={muiCache ?? createMuiCache()}>
<CustomThemeProvider>
<DrawerProvider>
<MapContextProvider>
{nextExtraIsDesktop && !nextExtraIsEmbed && (
<Layout {...extraProps} ref={layoutRef}>
<Component {...pageProps} {...extraProps} />
</Layout>
)}
{nextExtraIsDesktop && nextExtraIsEmbed && (
<LayoutEmbed
{...extraProps}
isFloatingDisabled={Component.isFloatingDisabled}
>
<Component {...pageProps} {...extraProps} />
</LayoutEmbed>
)}
{!nextExtraIsDesktop && Component.isBLayout && (
<LayoutMobileB>
<Component {...pageProps} {...extraProps} />
</LayoutMobile>
</LayoutMobileB>
)}
</MapContextProvider>
</DrawerProvider>
</CustomThemeProvider>
</CacheProvider>
{nextExtraLoading && (
<Box
sx={{
position: 'fixed',
top: 0,
zIndex: 9999,
width: '100%',
}}
>
<LinearProgress />
</Box>
)}
</ConfigProvider>
{!nextExtraIsDesktop && Component.isCLayout && (
<LayoutMobileC>
<Component {...pageProps} {...extraProps} />
</LayoutMobileC>
)}
{!nextExtraIsDesktop &&
!Component.isBLayout &&
!Component.isCLayout && (
<LayoutMobile ref={layoutRef}>
<Component {...pageProps} {...extraProps} />
</LayoutMobile>
)}
</MapContextProvider>
</DrawerProvider>
</CustomThemeProvider>
</CacheProvider>
{nextExtraLoading && (
<Box
sx={{
position: 'fixed',
top: 0,
zIndex: 9999,
width: '100%',
}}
>
<LinearProgress />
</Box>
)}
</ConfigProvider>
</AuthProvider>
);
}

Expand All @@ -227,7 +235,7 @@ TreetrackerApp.getInitialProps = async (context) => {
configData.find((item) => item.name === 'testing-config')?.data ||
defaultConfig;
}

return {
props,
config,
Expand Down
Loading

0 comments on commit 46a874b

Please sign in to comment.