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

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