@axa-fr/react-oidc 5.10.2 → 5.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +42 -27
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -17,6 +17,7 @@ Try the demo at https://black-rock-0dc6b0d03.1.azurestaticapps.net/
17
17
  - [Run The Demo](#run-the-demo)
18
18
  - [Examples](#examples)
19
19
  - [How It Works](#how-it-works)
20
+ - [NextJS](#NextJS)
20
21
  - [Service Worker Support](#service-worker-support)
21
22
 
22
23
  Easy set up of OIDC for react.
@@ -496,39 +497,53 @@ More information about OIDC
496
497
  - 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
497
498
  - English: https://medium.com/just-tech-it-now/increase-the-security-and-simplicity-of-your-information-system-with-openid-connect-fa8c26b99d6d
498
499
 
499
- # Service Worker Support
500
-
501
- - Firefox : tested on firefox 98.0.2
502
- - Chrome/Edge : tested on version upper to 90
503
- - Opera : tested on version upper to 80
504
- - Safari : tested on Safari/605.1.15
505
500
 
506
- # FAQ
507
501
 
508
- ## Do not set OidcProvider Between Router and its routes
502
+ # NextJS
509
503
 
510
- Login callback won't work.
511
- Set OidcProvider before Router or inside a Route.
504
+ To work with NextJS you need to inject your own history surcharge like the sample below.
512
505
 
513
506
  ```javascript
514
- import React from 'react';
515
- import { render } from 'react-dom';
516
- import { BrowserRouter as Router } from 'react-router-dom';
517
- import { OidcProvider } from '@axa-fr/react-oidc';
518
- import Header from './Layout/Header';
519
- import Routes from './Router';
520
-
521
- const configuration = {};
507
+ const MyApp: React.FC<AppProps> = ({ Component, pageProps: { session, ...pageProps }, router }) => {
508
+ const [loading, setLoading] = useState(router.asPath.includes('access_token'));
509
+
510
+ const store = useStore(pageProps.initialReduxState);
511
+ let searchRedirectPage: PageUrl;
512
+
513
+ const withCustomHistory: () => CustomHistory = () => {
514
+ return {
515
+ replaceState: (url?: string | null, stateHistory?: WindowHistoryState): void => {
516
+ router.replace({
517
+ pathname: url,
518
+ });
519
+ }
520
+ };
521
+ };
522
+ // Code omitted...
523
+
524
+ return !loading ? (
525
+ <>
526
+ <Head>
527
+ <meta
528
+ name="viewport"
529
+ content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"
530
+ />
531
+ </Head>
532
+ <OidcProvider configuration={OIDC_CONFIGURATION} withCustomHistory={withCustomHistory}>
533
+ <Provider store={store}>
534
+ <RouterScrollProvider>{layout}</RouterScrollProvider>
535
+ </Provider>
536
+ </OidcProvider>
537
+ </>
538
+ ) : null;
539
+ };
522
540
 
523
- const App = () => (
524
- <Router>
525
- <OidcProvider configuration={configuration} > // DONT DO THAT
526
- <Header />
527
- <Routes />
528
- </OidcProvider>
529
- </Router>
530
- );
531
541
 
532
- render(<App />, document.getElementById('root'));
533
542
  ```
534
543
 
544
+ # Service Worker Support
545
+
546
+ - Firefox : tested on firefox 98.0.2
547
+ - Chrome/Edge : tested on version upper to 90
548
+ - Opera : tested on version upper to 80
549
+ - Safari : tested on Safari/605.1.15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axa-fr/react-oidc",
3
- "version": "5.10.2",
3
+ "version": "5.10.3",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "jsnext:main": "dist/index.js",