Merge pull request #1734 from DylanJG01/main

Keycloak Test Login test.

.env.development

@@ -8,3 +8,8 @@ NEXT_PUBLIC_BASE=
 NEXT_PUBLIC_CONFIG_API=
 NEXT_PUBLIC_COUNTRY_LEADER_BOARD_DISABLED=false
 NEXT_PUBLIC_SERVER_CONFIG_DISABLED=true
+NEXT_PUBLIC_KEYCLOAK_URL=https://dev-k8s.treetracker.org/keycloak/realms/treetracker/
+NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=raw-client
+NEXT_PUBLIC_KEYCLOAK_REALM=treetracker
+NEXT_PUBLIC_KEYCLOAK_REDIRECT_URI=https://dev.treetracker.org/
+

package.json

@@ -69,10 +69,12 @@
     "moment": "^2.29.1",
     "next": "^12.1.0",
     "next-images": "^1.8.1",
+    "oidc-client-ts": "^2.4.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-best-gradient-color-picker": "^2.0.21",
     "react-dom": "^17.0.2",
+    "react-oidc-context": "^2.3.1",
     "react-world-map": "^2.4.0",
     "source-map-explorer": "^2.5.2",
     "treetracker-web-map-core": "^2.7.1",

src/components/LoginLogoutToggle.js

@@ -0,0 +1,14 @@
+import { useAuth } from 'react-oidc-context';
+import SignInButton from './SignInButton';
+import SignOutButton from './SignOutButton';
+
+function LoginLogoutToggle({ classes, isMobile }) {
+  const auth = useAuth();
+
+  if (auth?.isAuthenticated) {
+    return <SignOutButton auth={auth} classes={classes} isMobile={isMobile} />;
+  }
+  return <SignInButton auth={auth} classes={classes} isMobile={isMobile} />;
+}
+
+export default LoginLogoutToggle;

src/components/Navbar.js

@@ -1,5 +1,4 @@
-'use client';
-
+// 'use client';
 import {
   AppBar,
   Button,
@@ -11,13 +10,16 @@ import {
 } from '@mui/material';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
+import { useAuth } from 'react-oidc-context';
 import { useConfigContext } from 'context/configContext';
 import { useCustomThemeContext } from 'hooks/contextHooks';
 import { useMobile } from 'hooks/globalHooks';
 import MenuBar from 'images/MenuBar';
 import { makeStyles } from 'models/makeStyles';
 import ChangeThemeButton from './ChangeThemeButton';
 import Link from './Link';
+import LoginLogoutToggle from './LoginLogoutToggle';
+import UserAvatar from './UserAvatar';
 
 const treeTrackerLogo = `/images/treetracker_logo.svg`;
 const treeTrackerLogoWhite = `/images/treetracker_logo_white.svg`;
@@ -61,13 +63,15 @@ 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();
 
   const { theme } = useCustomThemeContext();
 
+  const auth = useAuth();
+
   const open = Boolean(anchorEl);
   const handleMenuClick = (event) => {
     setAnchorEl(anchorEl ? null : event.currentTarget);
@@ -77,10 +81,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}
@@ -133,6 +138,9 @@ function Navbar() {
             </Button>
           </Link>
         ))}
+
+        <LoginLogoutToggle classes={classes} />
+        <UserAvatar auth={auth} />
         <ChangeThemeButton />
       </Toolbar>
       <Button
@@ -162,6 +170,9 @@ function Navbar() {
             <Link href={item.url}>{item.title}</Link>
           </MenuItem>
         ))}
+        <MenuItem>
+          <LoginLogoutToggle classes={classes} isMobile={isMobile} />
+        </MenuItem>
         <MenuItem onClick={handleClose}>
           <ChangeThemeButton />
         </MenuItem>

src/components/SignInButton.js

@@ -0,0 +1,36 @@
+import { Button, Typography, Link } from '@mui/material';
+
+function SignInButton({ auth, classes, isMobile }) {
+  if (isMobile) {
+    return (
+      <Link
+        sx={{
+          textDecoration: 'none',
+          color: ({ palette }) => palette.text.primary,
+        }}
+        onClick={auth.signinRedirect}
+      >
+        Sign in
+      </Link>
+    );
+  }
+
+  return (
+    <Button>
+      <Link
+        sx={{
+          textDecoration: 'none',
+          '& :hover': {
+            color: ({ palette }) => palette.text.primary,
+          },
+        }}
+        className={classes.buttonStyle}
+        onClick={auth?.signinRedirect}
+      >
+        <Typography className={classes.buttonStyle}>Sign in</Typography>
+      </Link>
+    </Button>
+  );
+}
+
+export default SignInButton;

src/components/SignOutButton.js

@@ -0,0 +1,38 @@
+import { Box, Button, Typography, Link, Avatar } from '@mui/material';
+
+function SignOutButton({ auth, classes, isMobile }) {
+  if (isMobile) {
+    return (
+      <Link
+        sx={{
+          textDecoration: 'none',
+          color: ({ palette }) => palette.text.primary,
+        }}
+        onClick={auth?.removeUser}
+      >
+        Sign Out
+      </Link>
+    );
+  }
+
+  return (
+    <Box>
+      <Button>
+        <Link
+          className={classes.buttonStyle}
+          sx={{
+            textDecoration: 'none',
+            '& :hover': {
+              color: ({ palette }) => palette.text.primary,
+            },
+          }}
+          onClick={auth?.removeUser}
+        >
+          <Typography className={classes.buttonStyle}>Sign Out</Typography>
+        </Link>
+      </Button>
+    </Box>
+  );
+}
+
+export default SignOutButton;

src/components/UserAvatar.js

@@ -0,0 +1,41 @@
+import { Box, Link, Avatar, Typography } from '@mui/material';
+
+function UserAvatar({ auth }) {
+  if (!auth?.isAuthenticated) {
+    return null;
+  }
+  return (
+    <Box>
+      <Link
+        href="https://dev-k8s.treetracker.org/keycloak/realms/treetracker/account/#/personal-info"
+        target="_blank"
+        rel="noopener noreferrer"
+        sx={{
+          color: ({ palette }) => palette.text.primary,
+        }}
+      >
+        <Avatar
+          sx={{
+            width: 24,
+            height: 24,
+            background: ({ palette }) => palette.background.greenGradient,
+          }}
+        >
+          <Typography
+            variant="caption"
+            sx={{
+              textTransform: 'uppercase',
+              fontSize: 16,
+              textDecoration: 'none',
+              color: ({ palette }) => palette.text.contrast,
+            }}
+          >
+            {auth?.user?.profile.preferred_username[0] || null}
+          </Typography>
+        </Avatar>
+      </Link>
+    </Box>
+  );
+}
+
+export default UserAvatar;

src/models/oidcConfig.js

@@ -0,0 +1,12 @@
+const oidcConfig = {
+  authority: process.env.NEXT_PUBLIC_KEYCLOAK_URL,
+  client_id: process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID,
+  redirect_uri: process.env.NEXT_PUBLIC_KEYCLOAK_REDIRECT_URI,
+  realm: process.env.NEXT_PUBLIC_KEYCLOAK_REALM,
+  onSigninCallback: (res) => {
+    console.log('onSigninCallback', res);
+    localStorage.setItem('res', JSON.stringify(res));
+  },
+};
+
+export default oidcConfig;