Add home page. Update keycloak configuration.

README.md

@@ -4,6 +4,8 @@
 
 A demo project created to demonstrate how a react project can be secured using a Keycloak server via authorization token.
 
+Realm configuration and users must be imported from the Spring Keycloak project in the requirements.
+
 ## Requirements
 - Keycloak server 6.0.1
 - https://github.com/czetsuya/Spring-Keycloak-with-REST-API

public/keycloak.json

@@ -1,10 +1,10 @@
 {
- "realm": "primereact-app",
- "auth-server-url": "http:https://localhost:8081/auth",
- "ssl-required": "external",
- "resource": "primereact-client",
- "credentials": {
- "secret": "f84b709c-1eab-4eb2-988a-ec4a005b8051"
- },
- "confidential-port": 0
+ "realm": "primereact-app",
+ "auth-server-url": "http:https://192.168.1.6:8080/auth",
+ "ssl-required": "external",
+ "resource": "primereact-client",
+ "credentials": {
+ "secret": "4dbc4e64-97d2-4ed6-a0ca-98bc22e69575"
+ },
+ "confidential-port": 0
 }

src/App.css

@@ -30,4 +30,11 @@
  height: 200px;
 
  margin: auto;
+}
+
+.center {
+ margin: auto;
+ width: 50%;
+ border: 3px solid green;
+ padding: 10px;
 }

src/App.js

@@ -12,6 +12,7 @@ import 'fullcalendar/dist/fullcalendar.css';
 import './layout/layout.css';
 import './App.css';
 import * as AuthorizationActions from './framework/redux/modules/Authorization';
+import Home from './components/Home'
 import Dashboard from './components/Dashboard';
 import Documentation from './components/Documentation';
 import CustomerList from './pages/secure/Customers/CustomerList';
@@ -47,7 +48,7 @@ class App extends Component {
  <Suspense fallback={<ProgressSpinner />}>
  <I18nextProvider i18n={i18next}>
  <Switch>
- {Locations.Home.toRoute({ component: LandingPageSwitcher, invalid: NotFound }, true)}
+ {Locations.Home.toRoute({ component: Home, invalid: NotFound }, true)}
  {/* Public Routes */}
  <Route path="/error-401" component={Error401} />
  <Route path="/error-500" component={Error500} />

src/api-services/ff-api/Customers.js

@@ -31,6 +31,20 @@ class Customers extends BaseService {
  method: 'DELETE',
  });
  }
+
+ accessByUserRole() {
+ return this.serviceConnector().invokeRequest({
+ url: '/users',
+ method: 'GET'
+ })
+ }
+
+ accessByAdminRole() {
+ return this.serviceConnector().invokeRequest({
+ url: '/admin',
+ method: 'GET'
+ })
+ }
 }
 
 const customers = new Customers();

src/app-config/properties.js

@@ -1 +1 @@
-export const API_URL='http:https://localhost:8086/v1';
+export const API_URL='http:https://localhost:8080/v1';

src/components/Home.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+class Home extends Component {
+ render() {
+ return (
+ <div class="center">
+ <h1>React Security with Keycloak</h1>
+ <Link to="/customers">Customers</Link>
+ </div>
+ )
+ }
+}
+
+export default Home

src/framework/redux/modules/Customers.js

@@ -8,6 +8,7 @@ const CREATE = 'customers/CREATE';
 const RETRIEVE = 'customers/RETRIEVE';
 const UPDATE = 'customers/UPDATE';
 const DELETE = 'customers/DELETE';
+const CLICK = 'customers/CLICK';
 
 const initialState = {
  selected: {},
@@ -39,6 +40,12 @@ export default function reducer(state = initialState, action) {
  list: [...state.list.filter((e, index, arr) => { return e.entityId !== action.payload.entityId })]
  };
  }
+ case Dispatch.successAction(CLICK): {
+ return {
+ ...state,
+ selected: { ...action.payload },
+ };
+ }
  default:
  return state;
  }
@@ -97,3 +104,19 @@ export const remove = customerId => dispatch => {
  Dispatch.done(dispatch, DELETE, { status: SUCCESS, result: { entityId: customerId } });
  });
 };
+
+export const clickUserRole = () => dispatch => {
+ console.log('click')
+ CustomerService.accessByUserRole()
+ .then(response => {
+ Dispatch.done(dispatch, CLICK, { status: SUCCESS, response });
+ })
+}
+
+export const clickAdminRole = () => dispatch => {
+ console.log('click')
+ CustomerService.accessByAdminRole()
+ .then(response => {
+ Dispatch.done(dispatch, CLICK, { status: SUCCESS, response });
+ })
+}

src/pages/secure/Customers/CustomerList.js

@@ -35,6 +35,14 @@ const CustomerList = ({ dispatch, customers, history }) => {
  history.push(Locations.CustomerNew.toUrl({ type: 'new' }));
  };
 
+ const clickUserRole = () => {
+ dispatch(CustomerActions.clickUserRole())
+ }
+
+ const clickAdminRole = () => {
+ dispatch(CustomerActions.clickAdminRole())
+ }
+
  const actionButtons = (rowData) => {
  return (
  <div>
@@ -67,6 +75,11 @@ const CustomerList = ({ dispatch, customers, history }) => {
  </DataTable>
  </div>
  </div>
+ <div>
+ <h2>Role Base Actions</h2>
+ <Button type="button" label="Role User" onClick={clickUserRole}></Button>&nbsp;
+ <Button type="button" label="Role Admin" onClick={clickAdminRole}></Button>
+ </div>
  </div>
  );
 };