oidc-spa 0.1.0 → 0.1.1

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="https://user-images.githubusercontent.com/6702424/80216211-00ef5280-863e-11ea-81de-59f3a3d4b8e4.png">  
+    <img src="https://github.com/garronej/oidc-spa/assets/6702424/6adde1f7-b7b6-4b1a-b48f-bd02095b99ea">  
 </p>
 <p align="center">
     <i>Openidconnect client for Single Page Applications</i>
@@ -24,22 +24,19 @@
   <a href="https://github.com/garronej/oidc-spa">Documentation</a>
 </p>
 
-An OIDC client for Single Page Applications that comes with an optional adapter for React.  
-Very minimal API surface, you don't need to know the in and out of oidc or OAuth to use this.
+An OIDC client designed for Single Page Applications, typically [Vite](https://vitejs.dev/) projects.
+With a streamlined API, you can easily integrate OIDC without needing to understand every detail of the protocol.
 
-Why not oidc-client-ts ?
+### Comparison with Existing Libraries
 
--   `oidc-client-ts` more a toolkit than a ready to use adapter. This lib use it internally but abstract away most of it's complexity.
--   It's used under the hood by this lib but it's hard to setup directly in a SPA setup especially the silent SSO.
--   It's more resilient do misconfigured server.
--   It restrict what params can be passed on the url when redirecting to the login page.
+#### [oidc-client-ts](https://github.com/authts/oidc-client-ts)
 
-Why not react-oidc-context?
+While `oidc-client-ts` serves as a comprehensive toolkit, our library aims to provide a simplified, ready-to-use adapter. We utilize `oidc-client-ts` internally but abstract away most of its intricacies.
 
--   There's no overlap between OIDC and React. Not everything should be though as a React problem. Oidc and React are
-    completely different problem space they have no business being intertwined.  
-    This library provide an optional React adapter for convenience in the spirit of being truly ready to use but don't
-    get mistaken, it's trivial you could as well do without it.
+#### [react-oidc-context](https://github.com/authts/react-oidc-context)
+
+Our library takes a modular approach to OIDC and React, treating them as separate concerns that don't necessarily have to be intertwined.
+We offer an optional React adapter for added convenience, but it's not a requirement to use it and [it's really trivial anyway](https://github.com/garronej/oidc-spa/blob/main/src/react.tsx).
 
 # Install / Import
 
@@ -59,9 +56,7 @@ Create a `silent-sso.html` file and put it in your public directory.
 </html>
 ```
 
-# Usage
-
-## Isolated from the UI library
+## Basic usage (without involving React)
 
 ```ts
 import { createOidc, decodeJwt } from "oidc-spa";
@@ -91,12 +86,14 @@ import { createOidc, decodeJwt } from "oidc-spa";
             idToken
         } = oidc.getTokens();
 
-        const { sub, preferred_username } = decodeJwt<{
+        const user = decodeJwt<{
             // Use https://jwt.io/ to tell what's in your idToken
             sub: string;
             preferred_username: string;
         }>(idToken);
 
+        console.log(`Hello ${user.preferred_username}`);
+
         // To call when the user click on logout.
         oidc.logout();
     }
@@ -139,17 +136,38 @@ function App() {
         );
     }
 
-    const { preferred_username } = decodeJwt<{
-        preferred_username: string;
-    }>(oidc.getTokens().idToken);
+    const { user } = useUser();
 
     return (
         <>
-            <h1>Hello {preferred_username}</h1>
+            <h1>Hello {user.preferred_username}</h1>
             <button onClick={() => oidc.logout()}>Log out</button>
         </>
     );
 }
+
+// Convenience hook to get the parsed idToken
+// To call only when the user is logged in
+function useUser() {
+    const { oidc } = useOidc();
+
+    if (!oidc.isUserLoggedIn) {
+        throw new Error("This hook should be used only on authenticated route");
+    }
+
+    const { idToken } = oidc.getTokens();
+
+    const user = useMemo(
+        () =>
+            decodeJwt<{
+                sub: string;
+                preferred_username: string;
+            }>(idToken),
+        idToken
+    );
+
+    return { user };
+}
 ```
 
 # Setup example

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "oidc-spa",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "description": "Openidconnect client for Single Page Applications",
     "repository": {
         "type": "git",