oidc-client icon indicating copy to clipboard operation
oidc-client copied to clipboard

[Generic Question] Compatibility Inquiry for OIDC Client with Angular and Identity Server in React App

Open ajmaln-tw opened this issue 1 year ago • 1 comments

I currently have an Angular application that successfully receives tokens from our Identity Server, facilitating Single Sign-On (SSO). My objective is to create a React application that can utilize the same Identity Server for SSO, obtaining tokens and sessions.

Example code

`import { OidcProvider } from "@axa-fr/react-oidc"; import { configuration } from "./common/constants"; const container = document.getElementById("root"); const root = createRoot(container); root.render( <StrictMode>

<OidcProvider configuration={configuration} configurationName="default">
  <Provider store={store}>
    <PersistGate loading={<LoadingWrapper />} persistor={persister}>
      <CustomThemeProvider>
        <CssBaseline />
        <ReactNotifications />
        <PermittedRoutes />
      </CustomThemeProvider>
    </PersistGate>
  </Provider>
</OidcProvider>

);`

Concerns: Angular and React Compatibility:

Given that Angular is Single Page Application (SPA) with Server-Side Rendering (SSR) capabilities, and React can be both SPA and SSR, I am concerned about potential compatibility issues. Will the OIDC client used for Angular seamlessly integrate with a React application that may involve Server-Side Rendering? Token and Session Retrieval:

Will the OIDC client designed for Angular seamlessly enable token and session retrieval from the Identity Server in a React environment? Are there any known considerations or adjustments required for transitioning from Angular to React in this SSO scenario? Context:

Additional Information: OIDC Client: 3.2.2 Identity Server: dot NET React Application (planned): [Provide any relevant information about the React application]

Environment: Windows

ajmaln-tw avatar Dec 08 '23 05:12 ajmaln-tw

Hi @ajmaln-tw , thank you for your issue.

If you want to integrate it with 2 stacks it is possible.

It will may be easier for you to use directly @axa-fr/oidc-client. But buy using @axa-fr/react-oidc you can access OidcClient instance and use it from angular part. It use @axa-fr/oidc-client under the wood which is not LinkedIn to any framework.

Which oidc client do you use for angular? It won't be connected because there is no code link.

guillaume-chervet avatar Dec 09 '23 07:12 guillaume-chervet