refactor(hook): rename isLogged to isAuthenticated + refactor useOidc…

…User hook (#743)

BREAKING
* feat(isauthenticated-separate): Adding separate hook to check if user is authenticated.
The "useOidc()" hook is more noisy - it re-renders more because of the three state it has to manage. We could decouple these.
* feat(isauthenticated-separate): Updating readme.
* fix(isauthenticated-separate): Removing unnecessary hook and optimizing 'getOidcUser()'.
This commit contains breaking changes: "isLogged" is switched to "isAuthenticated", per request.
* fix(isauthenticated-separate): Removing unnecessary component in demo.
* fix(isauthenticated-separate): Object property refactor and adding new user state.

packages/context/README.md

@@ -158,16 +158,16 @@ import {useOidc} from "./oidc";
 
 export const Home = () => {
 
-    const { login, logout, isLogged} = useOidc();
+    const { login, logout, isAuthenticated} = useOidc();
 
     return (
         <div className="container-fluid mt-3">
             <div className="card">
                 <div className="card-body">
                     <h5 className="card-title">Welcome !!!</h5>
                     <p className="card-text">React Demo Application protected by OpenId Connect</p>
-                    {!isLogged && <button type="button" className="btn btn-primary" onClick={() => login('/profile')}>Login</button>}
-                    {isLogged && <button type="button" className="btn btn-primary" onClick={logout}>logout</button>}
+                    {!isAuthenticated && <button type="button" className="btn btn-primary" onClick={() => login('/profile')}>Login</button>}
+                    {isAuthenticated && <button type="button" className="btn btn-primary" onClick={logout}>logout</button>}
                 </div>
             </div>
         </div>
@@ -176,7 +176,7 @@ export const Home = () => {
 
 ```
 The Hook method exposes : 
-- isLogged : is the user logged?
+- isAuthenticated : if the user is logged in or not
 - logout: logout function (return a promise)
 - login: login function 'return a promise'
 
@@ -278,20 +278,21 @@ const DisplayIdToken =() => {
 import { useOidcUser } from '@axa-fr/react-oidc-context';
 
 const DisplayUserInfo = () => {
-    const{ oidcUser, isOidcUserLoading, isLogged } = useOidcUser();
+    const{ oidcUser, isOidcUserLoading } = useOidcUser();
 
-    if(isOidcUserLoading) {
+    if(isOidcUserLoading !== UserStatus.Loaded) {
         return <p>User Information are loading</p>
     }
 
-    if(!isLogged){
-        return <p>you are not authentified</p>
+    if(!oidcUser){
+        return <p>you are not authenticated</p>
     }
 
     return (
         <div className="card text-white bg-success mb-3">
             <div className="card-body">
                 <h5 className="card-title">User information</h5>
+                <p>{oidcUser == null && "You are not logged" }</p>
                 {oidcUser != null && <p className="card-text">{JSON.stringify(oidcUser)}</p>}
             </div>
         </div>
@@ -304,4 +305,4 @@ const DisplayUserInfo = () => {
 - Firefox : tested on firefox 98.0.2
 - Chrome/Edge : tested on version upper to 90
 - Opera : tested on version upper to 80
-- Safari : tested on Safari/605.1.15
+- Safari : tested on Safari/605.1.15

packages/context/src/Home.tsx

@@ -3,16 +3,16 @@ import {useOidc} from "./oidc";
 
 export const Home = () => {
 
-    const { login, logout, isLogged} = useOidc();
-    
+    const { login, logout, isAuthenticated} = useOidc();
+
     return (
         <div className="container-fluid mt-3">
             <div className="card">
                 <div className="card-body">
                     <h5 className="card-title">Home</h5>
                     <p className="card-text">React Demo Application protected by OpenId Connect. More info on about oidc on <a href="https://github.com/AxaGuilDEv/react-oidc">GitHub</a> </p>
-                    {!isLogged && <button type="button" className="btn btn-primary" onClick={() => login('/profile')}>Login</button>}
-                    {isLogged && <button type="button" className="btn btn-primary" onClick={logout}>logout</button>}
+                    {!isAuthenticated && <button type="button" className="btn btn-primary" onClick={() => login('/profile')}>Login</button>}
+                    {isAuthenticated && <button type="button" className="btn btn-primary" onClick={logout}>logout</button>}
                 </div>
             </div>
         </div>

packages/context/src/MultiAuth.tsx

@@ -3,20 +3,20 @@ import {OidcProvider, useOidc, useOidcAccessToken} from "./oidc";
 import { configurationIdentityServer} from "./configurations";
 
 const MultiAuth = ( {configurationName, handleConfigurationChange }) => {
-    const { login, logout, isLogged} = useOidc(configurationName);
+    const { login, logout, isAuthenticated} = useOidc(configurationName);
     return (
         <div className="container-fluid mt-3">
             <div className="card">
                 <div className="card-body">
                     <h5 className="card-title">Work in progress</h5>
-                    <p className="card-text">React Demo Application protected by OpenId Connect with MultipleAUthentication. 
+                    <p className="card-text">React Demo Application protected by OpenId Connect with MultipleAUthentication.
                         <br/>For example, config_1 can have other sensitive scope, config_2 does not ask for the "offline_access" so it does not retrieve the most sensitive token "refresh_token" for very sensitive operation, it retrive only access_token valid for a small amout of time.</p>
                     <select value={configurationName} onChange={handleConfigurationChange} >
                         <option value="config_1">config_1</option>
                         <option value="config_2">config_2</option>
                     </select>
-                    {!isLogged && <button type="button" className="btn btn-primary" onClick={() => login()}>Login</button>}
-                    {isLogged && <button type="button" className="btn btn-primary" onClick={logout}>logout</button>}
+                    {!isAuthenticated && <button type="button" className="btn btn-primary" onClick={() => login()}>Login</button>}
+                    {isAuthenticated && <button type="button" className="btn btn-primary" onClick={logout}>logout</button>}
                 </div>
             </div>
         </div>
@@ -32,21 +32,21 @@ export const MultiAuthContainer = () => {
     const callBack = window.location.origin+"/multi-auth/authentification/callback2";
     const silent_redirect_uri = window.location.origin+"/multi-auth/authentification/silent-callback2";
     const configurations = {
-        config_1: {...configurationIdentityServer, 
-            redirect_uri:callBack, 
+        config_1: {...configurationIdentityServer,
+            redirect_uri:callBack,
             silent_redirect_uri,
             scope: 'openid profile email api offline_access'
         },
-        config_2: {...configurationIdentityServer, 
-            redirect_uri:callBack, 
-            silent_redirect_uri: "", 
+        config_2: {...configurationIdentityServer,
+            redirect_uri:callBack,
+            silent_redirect_uri: "",
             scope: 'openid profile email api'}
     }
     const handleConfigurationChange = (event) => {
         const configurationName = event.target.value;
         sessionStorage.configurationName = configurationName;
         setConfigurationName(configurationName);
-        
+
     }
     return (
         <OidcProvider configuration={configurations[configurationName]} configurationName={configurationName}>

packages/context/src/Profile.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
 
-import {OidcSecure, useOidcAccessToken, useOidcIdToken, useOidcUser} from "./oidc";
+import {OidcSecure, useOidc, useOidcAccessToken, useOidcIdToken, useOidcUser} from "./oidc";
+import {UserStatus} from "./oidc/User";
 
 const DisplayUserInfo = () => {
-    const{ oidcUser, isOidcUserLoading, isLogged } = useOidcUser();
+    const{ oidcUser, oidcUserLoadingState } = useOidcUser();
 
-    if(isOidcUserLoading) {
+    if(oidcUserLoadingState === UserStatus.Loading) {
         return <p>User Information are loading</p>
     }
 
-    if(!isLogged){
-        return <p>you are not authentified</p>
+    if(oidcUserLoadingState === UserStatus.LoadingError) {
+        return <p>User Information loading errored.</p>
+    }
+
+    if(!oidcUser){
+        return <p>you are not authenticated</p>
     }
 
     return (
@@ -39,7 +44,7 @@ const DisplayAccessToken = () => {
     const{ accessToken, accessTokenPayload } = useOidcAccessToken();
 
     if(!accessToken){
-        return <p>you are not authentified</p>
+        return <p>you are not authenticated</p>
     }
     return (
         <div className="card text-white bg-info mb-3">
@@ -58,9 +63,9 @@ const DisplayIdToken =() => {
     const{ idToken, idTokenPayload } = useOidcIdToken();
 
     if(!idToken){
-        return <p>you are not authentified</p>
+        return <p>you are not authenticated</p>
     }
-    
+
     return (
         <div className="card text-white bg-info mb-3">
             <div className="card-body">
@@ -73,4 +78,4 @@ const DisplayIdToken =() => {
 }
 
 
-export const SecureProfile = () => <OidcSecure><Profile /></OidcSecure>;
+export const SecureProfile = () => <OidcSecure><Profile /></OidcSecure>;

packages/context/src/oidc/ReactOidc.tsx

@@ -4,21 +4,21 @@ import Oidc from "./vanilla/oidc";
 const defaultConfigurationName = "default";
 export const useOidc =(configurationName=defaultConfigurationName) =>{
     const getOidc =  Oidc.get;
-   
+
     const login = (callbackPath=undefined) => {
         return getOidc(configurationName).loginAsync(callbackPath);
     };
     const logout = () => {
         return getOidc(configurationName).logoutAsync();
     };
-    
-    let isLogged = false;
+
+    let isAuthenticated = false;
     const oidc = getOidc(configurationName);
     if(oidc){
-        isLogged = getOidc(configurationName).tokens != null;
+        isAuthenticated = getOidc(configurationName).tokens != null;
     }
-    
-    return {login, logout, isLogged };
+
+    return { login, logout, isAuthenticated };
 }
 
 const accessTokenInitialState = {accessToken:null, accessTokenPayload:null};
@@ -37,7 +37,7 @@ export const useOidcAccessToken =(configurationName=defaultConfigurationName) =>
     const getOidc =  Oidc.get;
     const [state, setAccessToken] = useState<any>(initTokens(configurationName));
     const [subscriptionId, setSubscriptionId] = useState(null);
-    
+
     useEffect(() => {
         let isMounted = true;
         const oidc = getOidc(configurationName);
@@ -60,7 +60,7 @@ export const useOidcAccessToken =(configurationName=defaultConfigurationName) =>
         if(isMounted){
             setSubscriptionId(newSubscriptionId);
         }
-        return  () => { 
+        return  () => {
             isMounted = false;
             oidc.removeEventSubscription(subscriptionId);
         };
@@ -84,14 +84,14 @@ export const useOidcIdToken =(configurationName= defaultConfigurationName) =>{
     const getOidc =  Oidc.get;
     const [state, setIDToken] = useState<any>(idTokenInitialState);
     const [subscriptionId, setSubscriptionId] = useState(initIdToken(configurationName));
-    
+
     useEffect(() => {
         let isMounted = true;
         const oidc = getOidc(configurationName);
         if(oidc.tokens) {
             const tokens = oidc.tokens;
             setIDToken({idToken: tokens.idToken, idTokenPayload:tokens.idTokenPayload});
-        } 
+        }
         if(subscriptionId){
             oidc.removeEventSubscription(subscriptionId);
         }
@@ -113,4 +113,4 @@ export const useOidcIdToken =(configurationName= defaultConfigurationName) =>{
         };
     }, [configurationName]);
     return state;
-}
+}

packages/context/src/oidc/User.ts

@@ -1,31 +1,38 @@
 import { useEffect, useState} from "react";
 import Oidc from "./vanilla/oidc";
 
-export const useOidcUser =(configurationName="default") => {
-    const [oidcUser, setOidcUser] = useState(null);
-    const [isOidcUserLoading, setIsOidcUserLoading] = useState(false);
-    const getOidc =  Oidc.get;
+export enum UserStatus {
+    Unauthenticated= 'Unauthenticated',
+    Loading = 'Loading user',
+    Loaded = 'User loaded',
+    LoadingError = 'Error loading user'
+}
+
+type OidcUser = {
+    user: any,
+    status: UserStatus
+}
+
+export const useOidcUser = (configurationName="default") => {
+    const [oidcUser, setOidcUser] = useState<OidcUser>({user: null, status: UserStatus.Unauthenticated});
+
+    const oidc = Oidc.get(configurationName);
     useEffect(() => {
         let isMounted = true;
-        const oidc = getOidc(configurationName);
+
         if(oidc && oidc.tokens) {
-            setIsOidcUserLoading(true);
-            getOidc().userInfoAsync()
+            setOidcUser({...oidcUser, status: UserStatus.Loading});
+            oidc.userInfoAsync()
                 .then((info) => {
                     if (isMounted) {
-                        setOidcUser(info);
-                        setIsOidcUserLoading(false);
+                        setOidcUser({user: info, status: UserStatus.Loaded});
                     }
                 })
+                .catch(() => setOidcUser({...oidcUser, status: UserStatus.LoadingError}));
         }
+
         return  () => { isMounted = false };
-    }, [])
-
-    let isLogged = false;
-    const oidc = getOidc(configurationName);
-    if(oidc){
-        isLogged = oidc.tokens != null;
-    }
-
-    return {oidcUser, isOidcUserLoading, isLogged: isLogged}
-}
+    }, []);
+
+    return {oidcUser: oidcUser.user, oidcUserLoadingState: oidcUser.status}
+}