commit

DockerFile

+FROM node:alpine
+WORKDIR /\login-client
+COPY package.json ./
+COPY package-lock.json ./
+COPY ./ ./
+RUN npm i
+CMD ["npm", "run", "start"]
\ No newline at end of file

package.json

@@ -3,11 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-keycloak/web": "^3.4.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "keycloak-js": "^17.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { ReactKeycloakProvider } from "@react-keycloak/web";
+import keycloak from "./Keycloak"
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Nav from "./components/Nav";
+import WelcomePage from "./pages/Homepage";
+import SecuredPage from "./pages/Securedpage";
 
 function App() {
  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+   <div>
+     <ReactKeycloakProvider authClient={keycloak}>
+       <Nav />
+       <BrowserRouter>
+         <Routes>
+           <Route exact path="/" element={<WelcomePage />} />
+           <Route path="/secured" element={<SecuredPage />} />
+         </Routes>
+       </BrowserRouter>
+       </ReactKeycloakProvider>
    </div>
  );
 }

src/Keycloak.js

+import Keycloak from "keycloak-js";
+const keycloak = new Keycloak({
+ url: "http://localhost:8080/auth",
+ realm: "AuthKeyCloak",
+ clientId: "React-auth",
+});
+
+export default keycloak;
\ No newline at end of file

src/components/Nav.js

+import React from "react";
+import { useKeycloak } from "@react-keycloak/web";
+
+const Nav = () => {
+ const { keycloak, initialized } = useKeycloak();
+
+ return (
+   <div>
+     <div className="top-0 w-full flex flex-wrap">
+       <section className="x-auto">
+         <nav className="flex justify-between bg-gray-200 text-blue-800 w-screen">
+           <div className="px-5 xl:px-12 py-6 flex w-full items-center">
+             <h1 className="text-3xl font-bold font-heading">
+               Keycloak React AUTH.
+             </h1>
+             <ul className="hidden md:flex px-4 mx-auto font-semibold font-heading space-x-12">
+               <li>
+                 <a className="hover:text-blue-800" href="/">
+                   Home
+                 </a>
+               </li>
+               <li>
+                 <a className="hover:text-blue-800" href="/secured">
+                   Secured Page
+                 </a>
+               </li>
+             </ul>
+             <div className="hidden xl:flex items-center space-x-5">
+               <div className="hover:text-gray-200">
+                 {!keycloak.authenticated && (
+                   <button
+                     type="button"
+                     className="text-blue-800"
+                     onClick={() => keycloak.login()}
+                   >
+                     Login
+                   </button>
+                 )}
+
+                 {!!keycloak.authenticated && (
+                   <button
+                     type="button"
+                     className="text-blue-800"
+                     onClick={() => keycloak.logout()}
+                   >
+                     Logout ({keycloak.tokenParsed.preferred_username})
+                   </button>
+                 )}
+               </div>
+             </div>
+           </div>
+         </nav>
+       </section>
+     </div>
+   </div>
+ );
+};
+
+export default Nav;
\ No newline at end of file

src/helpers/PrivateRoute.js

+import { useKeycloak } from "@react-keycloak/web";
+
+const PrivateRoute = ({ children }) => {
+ const { keycloak } = useKeycloak();
+
+ const isLoggedIn = keycloak.authenticated;
+
+ return isLoggedIn ? children : null;
+};
+
+export default PrivateRoute;
\ No newline at end of file

src/pages/Homepage.js

+import React from 'react';
+
+
+const Home = () => {
+
+ return (
+   <div>
+     <h1 className="text-green-800 text-4xl">Welcome to the Homepage</h1>
+   </div>
+ );
+};
+
+export default Home;
\ No newline at end of file

src/pages/Securedpage.js

+import React from 'react';
+
+
+const Secured = () => {
+
+ return (
+   <div>
+     <h1 className="text-black text-4xl">Welcome to the Protected Page.</h1>
+   </div>
+ );
+};
+
+export default Secured;
\ No newline at end of file