@axa-fr/react-oidc 5.7.0-alpha0 → 5.7.1

package/README.md

@@ -1,4 +1,4 @@
-<H1> @axa-fr/react-oidc-context</H1>
+<H1> @axa-fr/react-oidc</H1>
 
 Try the demo at https://black-rock-0dc6b0d03.1.azurestaticapps.net/
 
@@ -19,8 +19,8 @@ Try the demo at https://black-rock-0dc6b0d03.1.azurestaticapps.net/
 - [How It Works](#how-it-works)
 - [Service Worker Support](#service-worker-support)
 
-Easy set up of OIDC for react and use the new react context api as state management.
-It use AppAuthJS behind the scene.
+Easy set up of OIDC for react.
+It use AppAuthJS behind the scene because it very lightweight and created by openid certification team. oidc-client use in V3 is heavy and not longer maintained.
 
 - **Secure** :
   - With the use of Service Worker, your tokens (refresh_token and access_token) are not accessible to the javascript client code (big protection against XSRF attacks)
@@ -30,11 +30,11 @@ It use AppAuthJS behind the scene.
   - refresh_token and access_token are auto refreshed in background
   - with the use of the Service Worker, you do not need to inject the access_token in every fetch, you have only to configure OidcTrustedDomains.js file
 - **No cookies problem** : You can disable silent signin (that internally use an iframe)
-- **Multiple Authentification** :
-  - You can authenticate many times to the same provider with different scope (for exemple you can acquire a new 'payment' scope for a payment)
+- **Multiple Authentication** :
+  - You can authenticate many times to the same provider with different scope (for example you can acquire a new 'payment' scope for a payment)
   - You can authenticate to multiple different providers inside the same SPA (single page application) website
 - **Flexible** :
-  - Work with Service Worker (more secure) and whithout for older browser (less secure)
+  - Work with Service Worker (more secure) and without for older browser (less secure)
 
 <p align="center">
     <img src="https://github.com/AxaGuilDEv/react-oidc/blob/master/docs/img/schema_pcke_client_side_with_service_worker.png?raw=true"
@@ -47,7 +47,7 @@ It use AppAuthJS behind the scene.
 # Getting Started
 
 ```sh
-npm install @axa-fr/react-oidc-context copyfiles --save
+npm install @axa-fr/react-oidc copyfiles --save
 ```
 
 If you need a very secure mode where refresh_token and access_token will be hide behind a service worker that will proxify requests.
@@ -59,7 +59,7 @@ The only file you should edit is "OidcTrustedDomains.js" which will never be era
 #package.json
 {
     "scripts": {
-        "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc-context/dist/OidcServiceWorker.js ./public && copyfiles -f -s ./node_modules/@axa-fr/react-oidc-context/dist/OidcTrustedDomains.js ./public",
+        "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc/dist/OidcServiceWorker.js ./public && copyfiles -f -s ./node_modules/@axa-fr/react-oidc/dist/OidcTrustedDomains.js ./public",
         "start:server": "react-scripts start",
         "build:server": "npm run copy && react-scripts build",
         "prepare": "npm run copy"
@@ -79,7 +79,7 @@ const trustedDomains = {
 
 ```sh
 git clone https://github.com/AxaGuilDEv/react-oidc.git
-cd react-oidc/packages/context
+cd react-oidc/packages/react
 npm install
 npm start
 # then navigate to http://localhost:4200
@@ -99,7 +99,7 @@ The default routes used internally :
 import React from 'react';
 import { render } from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { OidcProvider } from '@axa-fr/react-oidc-context';
+import { OidcProvider } from '@axa-fr/react-oidc';
 import Header from './Layout/Header';
 import Routes from './Router';
 
@@ -197,7 +197,7 @@ The Hook method exposes :
 
 ```javascript
 import React from 'react';
-import { OidcSecure } from '@axa-fr/react-oidc-context';
+import { OidcSecure } from '@axa-fr/react-oidc';
 
 const AdminSecure = () => (
   <OidcSecure>
@@ -216,7 +216,7 @@ export default AdminSecure;
 ```javascript
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
-import { withOidcSecure } from '@axa-fr/react-oidc-context';
+import { withOidcSecure } from '@axa-fr/react-oidc';
 import Home from '../Pages/Home';
 import Dashboard from '../Pages/Dashboard';
 import Admin from '../Pages/Admin';
@@ -236,7 +236,7 @@ export default Routes;
 ## How to get "Access Token" : Hook method
 
 ```javascript
-import { useOidcAccessToken } from '@axa-fr/react-oidc-context';
+import { useOidcAccessToken } from '@axa-fr/react-oidc';
 
 const DisplayAccessToken = () => {
     const{ accessToken, accessTokenPayload } = useOidcAccessToken();
@@ -260,7 +260,7 @@ const DisplayAccessToken = () => {
 ## How to get IDToken : Hook method
 
 ```javascript
-import { useOidcIdToken } from '@axa-fr/react-oidc-context';
+import { useOidcIdToken } from '@axa-fr/react-oidc';
 
 const DisplayIdToken =() => {
     const{ idToken, idTokenPayload } = useOidcIdToken();
@@ -286,7 +286,7 @@ const DisplayIdToken =() => {
 ## How to get User Information : Hook method
 
 ```javascript
-import { useOidcUser, UserStatus } from '@axa-fr/react-oidc-context';
+import { useOidcUser, UserStatus } from '@axa-fr/react-oidc';
 
 const DisplayUserInfo = () => {
   const{ oidcUser, oidcUserLoadingState } = useOidcUser();
@@ -319,7 +319,7 @@ This Hook give you a wrapped fetch that add the access token for you.
 
 ```javascript
 import React, {useEffect, useState} from 'react';
-import { useOidcFetch, OidcSecure } from '@axa-fr/react-oidc-context';
+import { useOidcFetch, OidcSecure } from '@axa-fr/react-oidc';
 
 const DisplayUserInfo = ({ fetch }) => {
   const [oidcUser, setOidcUser] = useState(null);
@@ -375,7 +375,7 @@ This HOC give you a wrapped fetch that add the access token for you.
 
 ```javascript
 import React, {useEffect, useState} from 'react';
-import { useOidcFetch, OidcSecure } from '@axa-fr/react-oidc-context';
+import { useOidcFetch, OidcSecure } from '@axa-fr/react-oidc';
 
 const DisplayUserInfo = ({ fetch }) => {
   const [oidcUser, setOidcUser] = useState(null);
@@ -433,7 +433,7 @@ All components definition receive props "configurationName". Please checkout and
 import React from 'react';
 import { render } from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { OidcProvider } from '@axa-fr/react-oidc-context';
+import { OidcProvider } from '@axa-fr/react-oidc';
 import Header from './Layout/Header';
 import Routes from './Router';
 
@@ -489,6 +489,7 @@ render(<App />, document.getElementById('root'));
 
 These components encapsulate the use of "AppAuth-JS" in order to hide workfow complexity.
 Internally, native History API is used to be router library agnostic.
+It use AppAuthJS behind the scene because it very lightweight and created by openid certification team. oidc-client used in V3 is heavy and not longer maintained.
 
 More information about OIDC
 - French: https://medium.com/just-tech-it-now/augmentez-la-s%C3%A9curit%C3%A9-et-la-simplicit%C3%A9-de-votre-syst%C3%A8me-dinformation-avec-oauth-2-0-cf0732d71284

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/react-oidc",
-  "version": "5.7.0-alpha0",
+  "version": "5.7.1",
   "private": false,
   "main": "dist/index.js",
   "jsnext:main": "dist/index.js",