Support for React 18?

[dclayton77]

Does this package support React 18? I have upgraded my project but am facing an issue with the registration of the OidcProvider. Using the new root.render syntax, I get the below errors.

I cannot see anything in the documentation about using root.render, only the old syntax. Has anyone else faced/solved this issue?

  Overload 1 of 2, '(props: OidcProviderProps<EmptyObject & { global?: GlobalNamespaceState; auth?: UserState; user?: UserNamespaceState; audit?: AuditNamespaceState; router?: RouterState<...>; } & PersistPartial> | Readonly<...>): OidcProvider<...>', gave the following error.
    Type '{ children: Element; store: Store<EmptyObject & { global?: GlobalNamespaceState; auth?: UserState; user?: UserNamespaceState; audit?: AuditNamespaceState; router?: RouterState<...>; } & PersistPartial, AnyAction>; userManager: UserManager; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<OidcProvider<EmptyObject & { global?: GlobalNamespaceState; auth?: UserState; user?: UserNamespaceState; audit?: AuditNamespaceState; router?: RouterState<...>; } & PersistPartial>> & Readonly<...>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<OidcProvider<EmptyObject & { global?: GlobalNamespaceState; auth?: UserState; user?: UserNamespaceState; audit?: AuditNamespaceState; router?: RouterState<...>; } & PersistPartial>> & Readonly<...>'.
  Overload 2 of 2, '(props: OidcProviderProps<EmptyObject & { global?: GlobalNamespaceState; auth?: UserState; user?: UserNamespaceState; audit?: AuditNamespaceState; router?: RouterState<...>; } & PersistPartial>, context: any): OidcProvider<...>', gave the following error.
    Type '{ children: Element; store: Store<EmptyObject & { global?: GlobalNamespaceState; auth?: UserState; user?: UserNamespaceState; audit?: AuditNamespaceState; router?: RouterState<...>; } & PersistPartial, AnyAction>; userManager: UserManager; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<OidcProvider<EmptyObject & { global?: GlobalNamespaceState; auth?: UserState; user?: UserNamespaceState; audit?: AuditNamespaceState; router?: RouterState<...>; } & PersistPartial>> & Readonly<...>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<OidcProvider<EmptyObject & { global?: GlobalNamespaceState; auth?: UserState; user?: UserNamespaceState; audit?: AuditNamespaceState; router?: RouterState<...>; } & PersistPartial>> & Readonly<...>'.```

[barrymichaeldoyle]

Same issue here :/

[M1019171]

same issue here

[jdavis-software]

Yep welp... hasn't been updated to work with React 18... You can see the peerDependency in the package.json

  "peerDependencies": {
    "react": ">=16.8.4",
    "prop-types": ">=15.5.8",
    "oidc-client": ">=1.6.1"
  },

Temporary Solution:

Extend the OidcProviderProps<TState> interface to include the children property:

import React from 'react';
import { OidcProviderProps } from 'redux-oidc';
import { IApplicationState } from './where/ever/your/redux/store/interface/is/defined';

interface OidcProviderHOC<TState> extends OidcProviderProps<TState> {
  children?: React.ReactNode;
}

Create a HOC functional component which takes in that interface returning props.children:

const OidcProviderHOC: React.FC<OidcProviderHOC<IApplicationState>> = (props) => {
    return props.children;
};

ReactDOM.render(
  <Provider store={store}>
      <OidcProviderHOC userManager={userManager} store={store}>
          <App />
      </OidcProviderHOC>
  </Provider>,
  document.getElementById('app')
);

[jdavis-software]

@maxmantz I was going to fix this issue and put out a PR but it looks like it has already been fixed by @ryanzhangau in this commit refactor: add children type to OidcProvder for reactjs 18

  export interface OidcProviderProps<TSTate> {
    readonly userManager: UserManager;
    readonly store: Store<TSTate>;
    children?: React.ReactNode;
  }

It was merged in as well by @drod21 and I do see the change reflected on the master branch:

However when pulling the down the latest from npm npm i redux-oidc@latest the change isn't reflected, when looking at the package code on NPM it doesn't show the change either, any idea what's going on? thanks!

  export interface OidcProviderProps<TSTate> {
    readonly userManager: UserManager;
    readonly store: Store<TSTate>;
  }

[ryan-sandy]

Most projects, you have to publish your libraries to NPM. This library has not been published to NPM in 4 years.

[jdavis-software]

@ryan-sandy yeah I guess that's what needs to happen @drod21.

[M1019171]

After including the temporary changes as stated above by @jdavis-software jdavis-software , Still the Error exists for me for
CallbackComponentProps

!
below is the code snippet

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
import { Provider } from "react-redux";
import { store } from "./store/store";
import { TranslationsProvider } from "./translations/TranslationsProvider";
import { OidcProviderProps } from "redux-oidc";
import { RootState } from "./store/store";
import { userManager } from "./utils/UserManager";

interface OidcProviderHOC extends OidcProviderProps {
children?: React.ReactNode;
}

const OidcProviderHOC: React.FC<OidcProviderHOC<. RootState> > = (props) => {
return props.children;
};

ReactDOM.render(
<. Provider store={store}>
<. OidcProviderHOC userManager={userManager} store={store}>
<. TranslationsProvider>
<. App />
</. TranslationsProvider>
</. OidcProviderHOC>

,
document.getElementById("root")
);

However , I did the following changes as temporary changes.

interface CallBackProvider extends CallbackComponentProps {
children?: React.ReactNode;
}

const CallBackProviderHOC: React.FC = (props) => {
return props.children;
};

and used as below.

<.CallBackProviderHOC
userManager={userManager}
successCallback={() => {}}
errorCallback= {()=> {} }

<. Spinner/>

<./CallBackProviderHOC>
now the successCallback is not being executed

[M1019171]

successCallback is not triggered in. callback component.

herez my code.

interface CallBackProvider extends CallbackComponentProps {
children?: React.ReactNode;
}

const CallBackProviderHOC: React.FC = (props) => {
return props.children;
};

export function Callback() {
const navigate = useNavigate();
const dispatch = useDispatch();

return (
<>
<CallBackProviderHOC
userManager={userManager}
successCallback={() => {

      userManager
        .getUser()
        .then((user) => {
          console.log("success callback");
          if (user) {
            console.log("i was here inside success callback");
            const userStatus = getAuthenticationStatus(user);
            if (userStatus.isAuthenticated) {
              dispatch(setUserRole(userStatus.userRole));
            }
          }
          navigate("/");
        })
        .catch((error) => {
          navigate("/");
          console.error(error);
        });
    }}
    // successCallback={() => navigate("/")}
    errorCallback={(error) => {
      console.log("i was in error");

      navigate("/");
      console.error(error);
    }}
  >
    <StyledDiv>
      <p>i am in callback component</p>
      <ClipLoader />
    </StyledDiv>
  </CallBackProviderHOC>
</>

);
}

[jdavis-software]

@M1019171 Yeah I'm actually running into the same issue now that I had fixed the other React 18 errors I was running into. Any luck yet? @drod21

[ryan-sandy]

Hey, so I created a fork of this library and merged in @drod21 upstream changes. It's compatible with React 18, but since I'm a dinosaur, I didn't test it with TypeScript. If you have issues with TS, open an issue or PR in my fork and I'll update it.

You can install my fork using npm install redux-oidc-2 oidc-client-ts. You will need to change your import references from redux-oidc to redux-oidc-2.

I'll point the redux-oidc-2 at this library if it's ever updated.

[jdavis-software]

@ryan-sandy running into a import issue, other than that looking at the code it looks good!

node_modules/redux-oidc-2/index.d.ts' is not a module.

Here is the import code

import { CallbackComponent } from "redux-oidc-2";

Am I missing something with the configuration of it? I am using CRA just FYI

[M1019171]

@jdavis-software Even i am facing the same now after using the new import statement as below

import { CallbackComponent } from "redux-oidc-2";

@ryan-sandy this is the error

node_modules/redux-oidc-2/index.d.ts' is not a module.ts

[ryan-sandy]

@M1019171 Please head over to redux-oidc-2 and open an issue there. I think in v1.1.1, I've solved the typescript issues.

[slutske22]

The issue @dclayton77 describes is ultimately an issue with React 18 typescript definitions. it seems its not with the actual runtime functioning of this library. React 18's new default definition for functional components does not include children, which is definitely annoying while working with 3rd party libraries like this, but not a deal breaker. This worked for me:

root.render(
  <Provider store={store}>
    {/* @ts-expect-error Official support for React 18 Typescript not yet available */}
    <OidcProvider userManager={userManager} store={store}>
      <App />
    </OidcProvider>
  </Provider>,
  document.getElementById("root")
);

While doing this will irritate your sense of typescript OCD, it gets things working as they were prior to upgrading to react 18. You'll have to do the same thing the CallbackComponent. This is a workaround until @ryan-sandy's fork gets all the kinks worked out.

[CarreraPHP]

In another issue @drod21 has mentioned that he got promoted as a maintainer and he has a fork of this repo @ https://github.com/drod21/redux-oidc/ and @ryan-sandy has also mentioned about his fork @ https://github.com/ryan-sandy/redux-oidc.

Can this repo point to the forked repo that is more active and will provide support.