More oidc insights

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>
+    );
+
+}
+