From 4c2f041d8bf6879e845d99fb8ef690f36beafd72 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Wed, 10 Jan 2024 13:38:55 +0100
Subject: [PATCH] More oidc insights

---
 README.md       |  6 +++---
 src/App/App.tsx | 28 +++++++++++++++++++++++++---
 src/App/oidc.ts |  2 +-
 src/index.tsx   |  6 ++++++
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 4fe4b0f..eb48055 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
 
 # Introduction
 
-This repo constitutes an easily reusable setup for a standalone Keycloak theme project OR for a SPA React App that generates a
+This repo constitutes an easily reusable setup for a Keycloak theme project OR for a SPA React App that generates a
 Keycloak theme that goes along with it.  
 If you are only looking to create a Keycloak theme (and not a Keycloak theme and an App that share the same codebase) there are a lot of things that you can remove from this starter: [Please read this section of the README](#standalone-keycloak-theme).
 
@@ -103,9 +103,9 @@ docker run -it -dp 8083:80 keycloakify/keycloakify-starter:main
 # You can access the app at http://localhost:8083
 ```
 
-# Standalone keycloak theme
+# I only want a Keycloak theme
 
-If you are only looking to create a keycloak theme, you can run theses few commands
+If you are only looking to create a Keycloak theme and not a Theme + a React app, you can run theses few commands
 after clicking ![image](https://user-images.githubusercontent.com/6702424/98155461-92395e80-1ed6-11eb-93b2-98c64453043f.png) to refactor the template 
 and remove unnecessary files.  
 
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 13633b8..c146dbf 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -5,6 +5,13 @@ import { OidcProvider, useOidc, getKeycloakAccountUrl } from "./oidc";
 
 export default function App() {
     return (
+        // To integrate Keycloak to your React App you have many options such as:  
+        // - https://www.npmjs.com/package/keycloak-js  
+        // - https://github.com/authts/oidc-client-ts
+        // - https://github.com/authts/react-oidc-context  
+        // In this starter we use oidc-spa instead
+        // It's a new library made by us, the Keycloakify team.  
+        // Check it out: https://github.com/keycloakify/oidc-spa
         <OidcProvider>
             <ContextualizedApp />
         </OidcProvider>
@@ -33,9 +40,7 @@ function ContextualizedApp() {
                             >
                                 Logout
                             </button>
-                            <pre style={{ textAlign: "left" }}>
-                                {JSON.stringify(oidcTokens.decodedIdToken, null, 2)}
-                            </pre>
+                            <Jwt />
                         </>
                     )
                     :
@@ -61,3 +66,20 @@ function ContextualizedApp() {
 
 }
 
+function Jwt(){
+
+    const { oidcTokens } = useOidc({
+        assertUserLoggedIn: true
+    });
+
+    // NOTE: Use `Bearer ${oidcTokens.accessToken}` as the Authorization header to call your backend
+    // Here we just display the decoded id token
+
+    return (
+        <pre style={{ textAlign: "left" }}>
+            {JSON.stringify(oidcTokens.decodedIdToken, null, 2)}
+        </pre>
+    );
+
+}
+
diff --git a/src/App/oidc.ts b/src/App/oidc.ts
index c52f749..ca9d863 100644
--- a/src/App/oidc.ts
+++ b/src/App/oidc.ts
@@ -13,7 +13,7 @@ const keycloakClientId= "starter";
 export const { OidcProvider } = createOidcProvider({
     issuerUri: `${keycloakUrl}/realms/${keycloakRealm}`,
     clientId: keycloakClientId,
-    // NOTE: You can also pass queries params when calling oidc.login()
+    // NOTE: You can also pass queries params when calling login()
     getExtraQueryParams: () => ({
         // This adding ui_locales to the url will ensure the consistency of the language between the app and the login pages
         // If your app implements a i18n system (like i18nifty.dev for example) you should use this and replace "en" by the 
diff --git a/src/index.tsx b/src/index.tsx
index fa7baab..06a9bb6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,12 @@ import { kcContext as kcAccountThemeContext } from "./keycloak-theme/account/kcC
 
 const KcLoginThemeApp = lazy(() => import("./keycloak-theme/login/KcApp"));
 const KcAccountThemeApp = lazy(() => import("./keycloak-theme/account/KcApp"));
+// Important note:
+// In this starter example we show how you can have your react app and your Keycloak theme in the same repo.  
+// Most Keycloakify user only want to great a Keycloak theme.  
+// If this is your case run the few commands that will remover everything that is not strictly related to the 
+//Keycloak theme:
+// https://github.com/keycloakify/keycloakify-starter?tab=readme-ov-file#i-only-want-a-keycloak-theme
 const App = lazy(() => import("./App"));
 
 createRoot(document.getElementById("root")!).render(