Part 5: Future proofing your platform

< Back to Part 4: I got 99 problems, but a breach ain’t one

Get Started with TideCloak

So, you want to build the most secure digital platforms on the planet, without the burden of worrying about security? Great!

This developer guide will take you through the minimal steps to build your own Single-Page React application, secured with TideCloak - all in under 10 minutes.

TideCloak gives you a plug and play tool that incorporates all the concepts and technology discussed in this series. It allows you to manage your web users' roles and permissions - It's an adaptation of Redhat's open-source KeyCloak, one of the most robust, powerful and feature-rich Identity and Access Management system. But best of all it's secured by Tide's Cybersecurity Fabric so no-one holds the keys to the kingdom.

Prerequisites

Before starting, make sure you have:

Docker installed and running on your machine
NPM installed
Internet connectivity

For the purpose of this guide, we assume to run on a Debian linux host (either under Windows WSL or not).

1. Getting TideCloak up and running

Start a TideCloak-Dev docker container that already includes all the basic configuration and settings to get you going. To get it, open your Docker/WSL/Linux terminal and run the following command:

sudo docker run \
  -d \
  -v .:/opt/keycloak/data/h2 \
  -p 8080:8080 \
  -e KEYCLOAK_ADMIN=admin \
  -e KEYCLOAK_ADMIN_PASSWORD=password \
  tideorg/tidecloak-dev:latest

This will take a minute or two, and when it's done, you'll be able to go to TideCloak's console at: http://localhost:8080

2. Activate your TideCloak license

To get your TideCloak host to tap into Tide's Cybersecurity Fabric, you'll need to activate your license. Tide offers free developer license for up to 100 users. To do that, you'll need to:

Access your TideCloak administration console at http://localhost:8080/admin/master/console/#/myrealm/identity-providers/tide/tide/settings
Log in using your admin credentials (Username: admin, Password: password, if you haven't changed it) (You should be automatically navigated to: myrealm realm --> Identity Providers --> tide IdP --> Settings screen)
Click on the Manage License button next to License
Click on the blue Request License button
Go through the checkout process by providing a contact email

Within few seconds, you'll get your TideCloak host licenced and activated!

3. Create your React JS project

Let's create the following simple React project structure:

MyProject/
│
├── public/
│   ├── index.html
│   └── silent-check-sso.html
│
├── src/
│   ├── index.js
│   └── IAMService.js
│
└── package.json

Here's how:

a. Create 3 folders:

mkdir -p MyProject/public
mkdir -p MyProject/src
cd MyProject

b. Create index.html via `nano public/index.html`

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TideCloak Test React App</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root">Loading application...</div>
  </body>
</html>

c. `nano public/silent-check-sso.html`

<html><body><script>parent.postMessage(location.href, location.origin)</script></body></html>

d. `nano src/index.js`

import { createRoot } from "react-dom/client";
import IAMService from "./IAMService";

const RenderOnAnonymous = ({ children }) => (!IAMService.isLoggedIn() ? children : null);

const RenderOnAuthenticated = ({ children }) => (IAMService.isLoggedIn() ? children : null);

const IsAllowedToViewProfile = () => (IAMService.hasOneRole("default-roles-myrealm") ? "Yes" : "No");

const App = () => (
  <div>
    <RenderOnAnonymous>
      <div>
        <h1>Hello!</h1>
        <p>Please authenticate yourself!</p>
        <p><button onClick={() => IAMService.doLogin()}>Login</button></p>
      </div>
    </RenderOnAnonymous>
    <RenderOnAuthenticated>
      <div>
        <p>Signed in as <b>{IAMService.getName()}</b></p>
        <p>Has Default Roles? <b>{IsAllowedToViewProfile()}</b></p>
        <p><button onClick={() => IAMService.doLogout()}>Logout</button></p>
      </div>
    </RenderOnAuthenticated>
  </div>
);

const renderApp = () => createRoot(document.getElementById("root")).render(<App />);

IAMService.initIAM(renderApp);

e. `nano src/IAMService.js`

import TideCloak from "keycloak-js";

const _tc = new TideCloak({
  url: "http://localhost:8080",
  realm: "myrealm",
  clientId: "mytest",
});

const initIAM = (onAuthenticatedCallback) => {
  _tc.init({
      onLoad: "check-sso",
      silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
      pkceMethod: "S256",
    })
    .then((authenticated) => {
      if (!authenticated) {
        console.log("user is not authenticated..!");
      }
      onAuthenticatedCallback();
      console.log("AccessToken is " + _tc.token);
    })
    .catch(console.error);
};

const doLogin = _tc.login;

const doLogout = _tc.logout;

const isLoggedIn = () => !!_tc.token;

const updateToken = (successCallback) => _tc.updateToken(5).then(successCallback).catch(doLogin);

const getName = () => _tc.tokenParsed?.preferred_username;

const hasOneRole = (role) => _tc.hasRealmRole(role);

const IAMService = {
  initIAM,
  doLogin,
  doLogout,
  isLoggedIn,
  updateToken,
  getName,
  hasOneRole,
};

export default IAMService;

f. `nano package.json`

{
  "name": "tidecloak-react",
  "version": "1.0.0",
  "private": false,
  "main": "src/index.js",
  "dependencies": {
    "keycloak-js": "25.0.6",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

4. Build your NPM environment

Download and install all the dependencies for this project:

npm install

5. Run your project

Build and run your project:

npm start

All done!

6. Play!

Go to http://localhost:3000 You should see a "Hello!" message.
Click on the Login button
Click on Create an account
Provide a new username, password, recovery email

It will now show you that you're "Signed in" and it will show you your anonymous Tide username for this app.

Project recap

Let's review what just happened and what you've just accomplished:

You have programmed, compiled, built and deployed, from the ground-up, a fully-functional ReactJS Single-Page-Application (SPA).
Web users can now sign up and sign in to your SPA, being served customized content to authenticated and unauthenticated users and based on their predefined roles.
Your web users' roles and permissions are managed locally on your very own self-hosted instance of TideCloak - one of the most robust, powerful and feature-rich Identity and Access Management system which you have downloaded, installed, configured and deployed locally.
Your web users enjoy fully-secured Tide accounts, with their identity and access-credentials sitting outside of anyone's reach.
Your TideCloak instance is secured by the global Tide Cybersecurity Fabric that you have activated and licensed.

What next?

There's two additional layers of protection you can configure through TideCloak:

Identity Governance: Establish workflow processes ensuring that no compromised administrator can cause damage.
User walletization: Ability to lock user data with unique user keys secured by Tide's Cybersecurity Fabric - so ownership and privacy can be guaranteed.

For early access to these features Sign up for our Beta Program

Authors:

This 5-part series outlining the worry-free future of cybersecurity for platform developers is an adaptation of Tide Foundation Co-Founders Michael Loewy and Yuval Hertzog’s keynote at ACM SIGCOMM 2024

Michael Loewy is a Co-Founder of Tide Foundation and serves on the advisory board of the Children’s Medical Research Institute.

Yuval Hertzog is a Co-Founder of Tide Foundation and one of the inventors of VoIP.

Series shortcuts:

Part 1: It’s time to rethink cybersecurity for platform developers
Part 2: It’s cybersecurity’s kryptonite: Why are you still holding it?
Part 3: How nature holds the key to cybersecurity’s future
Part 4: I got 99 problems, but a breach ain’t one
Part 5: Future proofing your platform

Thought Piece

Part 5: Future proofing your platform

Get Started with TideCloak

Prerequisites

1. Getting TideCloak up and running

2. Activate your TideCloak license

3. Create your React JS project

a. Create 3 folders:

b. Create index.html via nano public/index.html

c. nano public/silent-check-sso.html

d. nano src/index.js

e. nano src/IAMService.js

f. nano package.json

4. Build your NPM environment

5. Run your project

6. Play!

Project recap

What next?

For early access to these features Sign up for our Beta Program

Authors:

Series shortcuts:

Blog

25 Sep 2024

Share this post

Recent News

Blog

25 Sep 2024

Press

4 Nov 2024

Announcement

18 Nov 2024

Press

11 Mar 2024

Press

23 Nov 2023

Blog

25 Sep 2024

Blog

25 Sep 2024

Blog

25 Sep 2024

Press

25 May 2023

Announcement

26 May 2023

Press

5 May 2023

Press

5 Apr 2023

Thanks for getting in touch. We'll get back to you as soon as possible!

Join the community that secures your feature

b. Create index.html via `nano public/index.html`

c. `nano public/silent-check-sso.html`

d. `nano src/index.js`

e. `nano src/IAMService.js`

f. `nano package.json`