https://github.com/tide-foundation/tidecloak-gettingstarted Skip to content Navigation Menu Toggle navigation Sign in * Product + GitHub Copilot Write better code with AI + Security Find and fix vulnerabilities + Actions Automate any workflow + Codespaces Instant dev environments + Issues Plan and track work + Code Review Manage code changes + Discussions Collaborate outside of code + Code Search Find more, search less Explore + All features + Documentation + GitHub Skills + Blog * Solutions By company size + Enterprises + Small and medium teams + Startups By use case + DevSecOps + DevOps + CI/CD + View all use cases By industry + Healthcare + Financial services + Manufacturing + Government + View all industries View all solutions * Resources Topics + AI + DevOps + Security + Software Development + View all Explore + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners + Executive Insights * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Enterprise + Enterprise platform AI-powered developer platform Available add-ons + Advanced Security Enterprise-grade security features + GitHub Copilot Enterprise-grade AI features + Premium Support Enterprise-grade 24/7 support * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up Reseting focus You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} tide-foundation / tidecloak-gettingstarted Public * Notifications You must be signed in to change notification settings * Fork 1 * Star 13 Get Started with TideCloak tide.org/tidecloak_product 13 stars 1 fork Branches Tags Activity Star Notifications You must be signed in to change notification settings * Code * Issues 0 * Pull requests 1 * Actions * Projects 0 * Security * Insights Additional navigation options * Code * Issues * Pull requests * Actions * Projects * Security * Insights tide-foundation/tidecloak-gettingstarted main BranchesTags [ ] Go to file Code Folders and files Name Name Last commit message Last commit date Latest commit History 12 Commits public public src src README.md README.md package.json package.json View all files Repository files navigation * README Get Started with TideCloak So, you want to build the most secure digital platforms on the planet, without the burden of worrying about security, and symultaniously grant your users sovereignty over their identities? 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 KC_BOOTSTRAP_ADMIN_USERNAME=admin \ -e KC_BOOTSTRAP_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 This can be done by either: 1. Cloning this repository: git clone https://github.com/ tide-foundation/tidecloak-gettingstarted.git 2. Downloading and unzipping this repository from https://github.com /tide-foundation/tidecloak-gettingstarted/archive/refs/heads/ main.zip 3. Creating it from scratch by following these steps below: a. Create 3 folders: mkdir -p MyProject/public mkdir -p MyProject/src cd MyProject b. Create index.html via nano public/index.html TideCloak Test React App
Loading application...
c. nano public/silent-check-sso.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 = () => (

Hello!

Please authenticate yourself!

Signed in as {IAMService.getName()}

Has Default Roles? {IsAllowedToViewProfile()}
); const renderApp = () => createRoot(document.getElementById("root")).render(); 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": "26.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! 1. Go to http://localhost:3000 You should see a "Hello!" message. 2. Click on the Login button 3. Click on Create an account 4. 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: 1. You have programmed, compiled, built and deployed, from the ground-up, a fully-functional ReactJS Single-Page-Application (SPA). 2. 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. 3. 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. 4. Your web users enjoy fully-secured Tide accounts, with their identity and access-credentials sitting outside of anyone's reach. 5. 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: 1. Identity Governance: Establish workflow processes ensuring that no compromised administrator can cause damage. 2. 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 About Get Started with TideCloak tide.org/tidecloak_product Topics identity privacy decentralized iam cybersecurity self-sovereign-identity identityandaccess Resources Readme Activity Custom properties Stars 13 stars Watchers 1 watching Forks 1 fork Report repository Contributors 4 * @TideSupreme TideSupreme Tide Foundation * @tideorg tideorg * @ondamike ondamike * @DomValladolid DomValladolid Dom V Languages * JavaScript 84.9% * HTML 15.1% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.