diff --git a/packages/context/README.md b/packages/context/README.md index c63fd7db4..79e31fe0e 100644 --- a/packages/context/README.md +++ b/packages/context/README.md @@ -158,7 +158,7 @@ import {useOidc} from "./oidc"; export const Home = () => { - const { login, logout, isLogged} = useOidc(); + const { login, logout, isAuthenticated} = useOidc(); return (
@@ -166,8 +166,8 @@ export const Home = () => {
Welcome !!!

React Demo Application protected by OpenId Connect

- {!isLogged && } - {isLogged && } + {!isAuthenticated && } + {isAuthenticated && }
@@ -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

User Information are loading

} - if(!isLogged){ - return

you are not authentified

+ if(!oidcUser){ + return

you are not authenticated

} return (
User information
+

{oidcUser == null && "You are not logged" }

{oidcUser != null &&

{JSON.stringify(oidcUser)}

}
@@ -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 \ No newline at end of file +- Safari : tested on Safari/605.1.15 diff --git a/packages/context/package-lock.json b/packages/context/package-lock.json index fb7bdea3b..7415a1638 100644 --- a/packages/context/package-lock.json +++ b/packages/context/package-lock.json @@ -1,12 +1,12 @@ { "name": "@axa-fr/react-oidc-context", - "version": "4.0.3", + "version": "4.5.0-alpha.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@axa-fr/react-oidc-context", - "version": "4.0.3", + "version": "4.5.0-alpha.0", "license": "MIT", "dependencies": { "@openid/appauth": "1.3.1", diff --git a/packages/context/src/Home.tsx b/packages/context/src/Home.tsx index a085fb24b..b83796c11 100644 --- a/packages/context/src/Home.tsx +++ b/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 (
Home

React Demo Application protected by OpenId Connect. More info on about oidc on GitHub

- {!isLogged && } - {isLogged && } + {!isAuthenticated && } + {isAuthenticated && }
diff --git a/packages/context/src/MultiAuth.tsx b/packages/context/src/MultiAuth.tsx index c6b1363ed..f4c051a16 100644 --- a/packages/context/src/MultiAuth.tsx +++ b/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 (
Work in progress
-

React Demo Application protected by OpenId Connect with MultipleAUthentication. +

React Demo Application protected by OpenId Connect with MultipleAUthentication.
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.

- {!isLogged && } - {isLogged && } + {!isAuthenticated && } + {isAuthenticated && }
@@ -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 ( diff --git a/packages/context/src/Profile.tsx b/packages/context/src/Profile.tsx index 46dc5171a..5ae51672d 100644 --- a/packages/context/src/Profile.tsx +++ b/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

User Information are loading

} - if(!isLogged){ - return

you are not authentified

+ if(oidcUserLoadingState === UserStatus.LoadingError) { + return

User Information loading errored.

+ } + + if(!oidcUser){ + return

you are not authenticated

} return ( @@ -39,7 +44,7 @@ const DisplayAccessToken = () => { const{ accessToken, accessTokenPayload } = useOidcAccessToken(); if(!accessToken){ - return

you are not authentified

+ return

you are not authenticated

} return (
@@ -58,9 +63,9 @@ const DisplayIdToken =() => { const{ idToken, idTokenPayload } = useOidcIdToken(); if(!idToken){ - return

you are not authentified

+ return

you are not authenticated

} - + return (
@@ -73,4 +78,4 @@ const DisplayIdToken =() => { } -export const SecureProfile = () => ; \ No newline at end of file +export const SecureProfile = () => ; diff --git a/packages/context/src/oidc/ReactOidc.tsx b/packages/context/src/oidc/ReactOidc.tsx index 4b42ced32..f972d3419 100644 --- a/packages/context/src/oidc/ReactOidc.tsx +++ b/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(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(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; -} \ No newline at end of file +} diff --git a/packages/context/src/oidc/User.ts b/packages/context/src/oidc/User.ts index e3c022dc4..e1de5466d 100644 --- a/packages/context/src/oidc/User.ts +++ b/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({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} -} \ No newline at end of file + }, []); + + return {oidcUser: oidcUser.user, oidcUserLoadingState: oidcUser.status} +}