axafrance / oidc-client Goto Github PK

Issue and Steps to Reproduce

Hi there,

I was just looking at doing the work to make this happen: #147

But I ran into an issue when I tried to run your tests.

It seems Jest 24+ now requires Babel 7 (See here: https://jestjs.io/docs/en/getting-started#babel-6)

When I try to do a fresh install and run your tests locally at the moment, all the tests fail. See this screenshot:

Here you can see the tests working as expected when I lock down the version of Jest to 23.6.0:

#118

Versions

1.1.5

when 2 http request in 401 at the same time to silentrenew. Need to manage that with promise in order to silentrenew juste once a the same time

Issue and Steps to Reproduce

Refresh browser (F5)
Look at browser's console.

Versions

react-oidc v3.0.6

Screenshots

Expected

No error

Actual

UserManager undefined

Additional Details

.

• Installed packages:
  .

Struggling to get this working with Gatsby.

First its due to gatsby running in node so we have to add a window check..
I fixed this by adding a window check for the withRouter

if (typeof window !== 'undefined') {
var _default = withRouter(window, CreateEvent(window, document), generateKey);
}

but then i i get lots of other others. Wondering if it's easy to add some window checks to get this working in Gatsby?

Versions

"@axa-fr/react-oidc-context": "^3.0.4-alpha.0",
"@axa-fr/react-oidc-context-fetch": "^3.0.4-alpha.0",

"gatsby": "^2.15.14",

Auth0 provides in their blog some guidelines on the state of OAuth2 to invoke API from JavaScript in Single Page Applications (SPAs): https://auth0.com/blog/oauth2-implicit-grant-and-spa/

Basically it boils down to:

If you are building a new SPA, you should consider implementing the new guidance based on authorization code with PKCE. More details below.

Have you guys given some thought on this?

Thank you so much for nice plugin.

After authentication is done, How can i access AccessToken? I need to use in Non React Component like ApolloClient for authentication with API.

When we install the lib the run crash because it does not install oidc-client.
when we are doing npm i

we need to install oidc-client manually by:
npm i oidc-client

Routes are hard coded in order to normalize callbabacks (which is a good idea) but sometime we will need to modify its.

It can be a good idea to automaticaly take routes configured bellow

const configuration = {
client_id: 'implicit',
redirect_uri: 'http://localhost:3000/authentication/callback',
response_type: 'id_token token',
post_logout_redirect_uri: 'http://localhost:3000/',
scope: 'openid profile email',
authority: 'https://demo.identityserver.io',
silent_redirect_uri: 'http://localhost:3000/authentication/silent_callback',
automaticSilentRenew: true,
loadUserInfo: true,
triggerAuthFlow: true
};

Package: @axa-fr/react-oidc-context

Senario: When the same application is opened on 2 different windows, and the user logs out of the 1st application, the second application does not log off the user. Instead it gets stuck at
authenticating={Authenticating}.
Expected result: The user should log out of the application even if it's on different window.

Here are few logs on console.

ResponseValidator._processSigninParams: Response was error login_required should it expose some event and we can redirect user to logout/login uri.

In Readme, "Examples": Both links point to the redux example.
Greetings

I use @axa-fr/react-oidc-context for oidc handling of my project.

In the following code I want to pass access_token to Child component, and in componentDidMount method of Child component I want to get access_token and attach that to the request header in order to read some data from server. But in this method value of access_token is undefined.

AuthenticationProvider

<AuthenticationProvider
        configuration={oidcConfiguration}
        loggerLevel={oidcLog.DEBUG}
        isEnabled={true}
        callbackComponentOverride={CustomCallback}>

        <AuthenticationContext.Consumer>
          {props => {
            return (
              <Child access_token={props.oidcUser?.access_token}></Child>
              );
            }}
        </AuthenticationContext.Consumer>
</AuthenticationProvider>

Child component code:

export class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
     console.log(this.props.access_token); // is undefined
  }
  render() {
   //after componentDidMount run, this.props.access_token has value
    return <div>
          <h2>FROM PROPS: {this.props?.arg1}</h2>
        </div>;
  }
}

How can I get access_token in componentDidMount method.
Notice that I don't want to use @axa-fr/react-oidc-context-fetch.

Has this package got the capability to use inMemory storage instead of session storage?
In the oidc vanilla implementation there is the option of using inMemory storage

Oidc.WebStorageStateStore({ store: new Oidc.InMemoryWebStorage() }),

Because of a potential vulnerability we need to use in memory storage

The config object does not seem to support passing an audience for authorize requests. It is not uncommon for providers to require this for jwt based access tokens. Am I missing something in the docs or is this not really supported?

make fetch composition usable without react and only by composing function.

https://medium.com/redteam/stealing-jwts-in-localstorage-via-xss-6048d91378a0

It could be necessary to let the user to choose between default storage (session storage in this case) and a Cookie storage.

Bug fixed on version 2.X.X is back in 3.X.X

The correct version to take is
https://github.com/AxaGuilDEv/react-oidc/blob/65bc3a6e0375c1181401eadd8c049bb0710071a4/packages/redux/src/authenticate.js

I will fixe it on monday

I want to use the package in a widget context, without an redirection during the signin process.
If there is no current session, I just want to be notified, but not being redirected to a signin ou an error page.

It is a new case to manage. It should redirect on a new screen that explain that session is ended and we need to reconnect entirely.

Hey :-)

So I've got an initial setup that looks like this:

  <AuthenticationProvider
    configuration={oidcConfiguration}
    loggerLevel={oidcLog.DEBUG}
    notAuthenticated={() => null}
    notAuthorized={() => null}
    authenticating={() => null}
  >

I'd also like to have a null component returned for the callback component, as outlinded in this issue: #181, but until that issue is resolved this is not yet possible.

While trying to test this on my consuming application, I am currently looking at mocking out the <AuthenticationProvider> at the unit test level, and having a mock for withOidcSecure() which proves this function is called when rendering protected routes.

I am planning to properly test the oidc logic using an integration test that uses something like
testcafe. This will login to our identity provider and prove the logic works properly.

However, the unit tests have code coverage running on them, and the lines exposed by the above props that are returning null will be uncovered by the unit tests using this setup.

While thinking about this problem, I thought it might make sense to ask you to consider changing this api so that these components all render nothing unless explicitly passed in a React component. This behaviour would still allow for any custom component to be rendered, but would by default display nothing to the end user, it would just redirect them.

If you are happy to make this change (I appreciate this is a breaking API change so may require a major version release), I'd be happy to pick up this work and make the required changes myself. I don't want to do this if you don't agree with the idea though.

Can you please let me know what you think, and if you like this idea I'll have a go at this myself probably early next week (earliest I think I'd be able to do this would be next week).

Just to clarify what you'd end up with. If we made these changes, then this:

  <AuthenticationProvider
    configuration={oidcConfiguration}
    loggerLevel={oidcLog.DEBUG}
  >

Would render no text to the user, but would handle the redirection and callback logic, eventually bouncing a user back into their application on successful login.

Whereas this:

  <AuthenticationProvider
    configuration={oidcConfiguration}
    loggerLevel={oidcLog.DEBUG}
    notAuthenticated={() => <h1>Authenticated!</h1>}
    notAuthorized={() => <h1>Not Authorized!</h1>}
    authenticating={() => <h1>Authenticating</h1>}
    callback={() => <h1>Callback component</h1>}
  >

Would render the respective components.

As to whether the callback is part of this piece of work or not would depend on a discussion between ourselves.

Please let me know what you think!

Hi,

I cloned master (commit b222ce7) and ran the following commands:

npm i
npm run bootstrap
npm run example:context

I open the example app in Chromium, i authenticate with 'bob' and when i'm back to the app, the header does not contain the navigation links. I added console.log into Header to debug the props, the oidcUser is null. (and if i click on 'login' again, nothing happens; the application seems to have an inconsistent state)

Any idea what's wrong?

Regards

Hi,

It seems was removed from redux-oidc. I think the option could be removed from the examples to simplify the understanding of your library.

Regards

Logout flow doesn't work as expected in protected routes

As title suggests:

Versions

Current repo.

Screenshots

Expected

Should logout.

Actual

It works as expected in non-protected routes only (Home route)

Issue and Steps to Reproduce

When using IE 11 to perform authentication.
Once the user has submitted the third-party login form with valid credentials, the browser redirects the user to a /authentication/not-authenticated?message=No matching state found in storage URL.
A message is displayed : Authentification Vous n'êtes pas authentifié.

However, the access_token has been successfully retrieved as it is stored in the sessionStorage and added in API calls.

If the user types the requested URL, then the library works as expected.

Versions

• oidc-client : 1.5.1
• @axa-fr/react-oidc-context : 1.2.0
• @axa-fr/react-oidc-context-fetch : 1.2.0
• isomorphic-fetch : 2.2.1
• es6-promise : 4.2.6

Screenshots

Expected

• The browser should redirect to the URL called before the authentication
• A valid access_token should be present in the sessionStorage

Actual

• The browser redirect to /authentication/not-authenticated?message=No matching state found in storage and display Vous n'êtes pas authentifié.
• A valid access_token is present in the sessionStorage
• The browser console display the following error message : OidcClient.processSigninResponse: No matching state found in storage

Additional Details

• Workflow

Access to a URL which need authentication

Browser redirects the user to the SSO Login form

User login with valid credentials

Brower redirects to /authentication/callback URL with params

• scope
• realm
• state
• access_token (valid access_token)
• token_type
• expires_in

Browser redirects to /authentication/not-authenticated?message=No matching state found in storage

• OIDC configuration

 "oidc": {
    "client_id": "xxxx",
    "redirect_uri": "http://localhost:3000/authentication/callback",
    "response_type": "token",
    "post_logout_redirect_uri": "http://localhost:3000/",
    "scope": "openid profile email",
    "authority": "xxx",
    "silent_redirect_uri": "http://localhost:3000/authentication/silent_callback",
    "automaticSilentRenew": false,
    "loadUserInfo": false,
    "triggerAuthFlow": false
  }

May be use https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components

The libraries will be ligther and usable with every router libraries.

authenticationService.js has a console log console.log('overridenConfiguration', overridenConfiguration);. Can we release the latest version? I have seen it has been replaced by oidcLog.dubug but haven't been released yet.

@guillaumechervetaxa

if we use some code not compatible with ie11 then break the build

The History.push is created by the package :

But the function doesn't work

Issue and Steps to Reproduce

Im' using the react-oidc-context.
When migrating react-router from 4.3.1 to 5.0.0, I'm getting this error :
"Invariant Violation: You should not use or withRouter() outside a "

Additional Details

I think it comes from the file AuthenticationContext.js : OidcRoutes are outside a component

trying codeclimate

Issue and Steps to Reproduce

[I came across this issue in the context package. If it is an issue in the Redux package though I think the same applies]

Firstly, thank you very much for this component. I had started the work to do something similar myself, then found this library and decided you had done most of the hard work for me, so thank you for that :-)

I have spotted one or two issues however. You allow for customisation of the NotAuthenticated and NotAuthorized components, but not the Authenticating component.

This results in a flash of French text for me when I'm trying to protect a route, which isn't what I would want in my application.

Versions

1.1.5

Screenshots

Expected

Allow the consumer to override the Authenticating component via an authenticating prop on the AuthenticationProvider.

The example I looked at was for the context API, but I think this would need to be changed for all packages.

I would like to pass below details of metadata for OIDC-redux :

• metadata property which contains:

1. issuer
2. authorization_endpoint
3. userinfo_endpoint
4. end_session_endpoint
5. jwks_uri

• signingKeys (which is the keys property of the jwks_uri endpoint)

The current example of redux is passing the https://github.com/AxaGuilDEv/react-oidc/blob/master/examples/redux/src/configuration.js but not metadata.

So please let me know if there is any chance in adding metadata in the configuration.js file.

Thanks in advance,
Praveen.

Issue and Steps to Reproduce

When using callbackComponentOverride there's something extra happening that causes errors in the console. The errors happen when you login, after further page loads they do not happen. These errors happen with dev and production builds. I used React Profiler to check what's happening with AuthenticationProvider and it seems it is doing two extra updates (re-renders) compared to using default callback component. I suspect there is a race condition and some code tries to check state before it's ready.

I tried to follow code in AuthenticationContext.container.js from the line const CallbackComponent = callbackComponentOverride ? withComponentOverrideProps(CallbackInt, callbackComponentOverride) : CallbackInt; but I'm not completely sure which part triggers the re-renders.

Error happens with the code below and it goes away if I remove callbackComponentOverride={CallbackComponent}. I've tested with Chrome and Firefox as well.

<AuthenticationProvider
        configuration={oidcConfiguration}
        logger={console}
        loggerLevel={oidcLog.DEBUG}
        isEnabled={true}
        callbackComponentOverride={CallbackComponent}
>

Versions

react-oidc-context": "^3.0.2-alpha.0"

Screenshots

With custom callback component two extra "update" phases (total of 5 events in AuthenticationProvider):

With default callback component (total of 3 events in AuthenticationProvider)

Expected

No errors.

Actual

Errors:

OidcClient.readSigninResponseState: No matching state found in storage
ERROR [react-context-oidc] : There was an error handling the token callback: No matching state found in storage
OidcClient.readSigninResponseState: No state in response
ERROR [react-context-oidc] : There was an error handling the token callback: No state in response

Additional Details

• Installed packages:

    "@apollo/react-hooks": "^3.1.2",
    "@axa-fr/react-oidc-context": "^3.0.2-alpha.0",
    "@axa-fr/react-oidc-context-fetch": "^3.0.2-alpha.0",
    "apollo-boost": "^0.4.4",
    "graphql": "^14.5.8",
    "oidc-client": "^1.9.1",
    "prop-types": "^15.7.2",
    "pure-react-carousel": "^1.23.0",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-router-dom": "5.1.2",
    "react-scripts": "3.2.0",
    "styled-components": "^5.0.0-beta.9",
    "use-async-effect": "^2.2.1"

Issue and Steps to Reproduce

I notice the context provider method you have access to a props.logout function. How do we get access to this with the Hook as the oidcUser returns null until you log in?

Issue and Steps to Reproduce

Supplying custom redirect components for AuthenticationProvider causes prop type validation warnings. Currently they are defined as PropTypes.node however correct one would be PropTypes.elementType as that accepts functional components as well. Here's a link to the PR where elementType was added.

import { AuthenticationProvider, oidcLog } from "@axa-fr/react-oidc-context";
import oidcConfiguration from "./configuration";
import NotAuthorized from "../auth/not-authorized";
import NotAuthenticated from "../auth/not-authenticated";
import Authenticating from "../auth/authenticating";
import CallbackComponent from "../auth/callback-component";

<AuthenticationProvider
        configuration={oidcConfiguration}
        logger={console}
        loggerLevel={oidcLog.DEBUG}
        isEnabled={true}
        notAuthorized={NotAuthorized}
        notAuthenticated={NotAuthenticated}
        authenticating={Authenticating}
        callbackComponentOverride={CallbackComponent}
      >

All my custom redirects are similar to this:

// ./auth/authenticating.jsx
import React from "react";

const Authenticating = () => {
  return (
    <div>
      <h2>Redirecting to authentication service</h2>
      <p>Moment please...</p>
    </div>
  );
};

export default Authenticating;

Versions

3.0.1-alpha.0

Screenshots

Expected

No errors :)

Actual

Failed prop type warnings.

Additional Details

I'll provide a PR with the fixes.

Coud the react-oidc be updated to remove recompose and replace with hooks?

A note from an author of recompose

Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today, we announced a proposal for Hooks. Hooks solves all the problems I attempted to address with Recompose three years ago, and more on top of that.

i do not have PropTypes installed on my project and when I install reac-oidc, it install an old version that crash at runtime :

I add to install a recent version od PropTypes in order to make it works.

Issue and Steps to Reproduce

When a user logs in, after a long period of time (usually between 12h and 24h), he is redirected to a login page, even if he closed his computer session.
In the context of Axa France, I'm talking about this login page:

The issue occurs when he tries to login 10 minutes after the redirection, which happens often when his session is closed: because he took too much time to authenticate, he will be redirected to this page:

Versions

Package: @axa-fr/react-oidc-redux
Version: 2.0.8

Issue and Steps to Reproduce

Hi,
Thanks for your great work, I use the context package for implementing in react-admin with Azure. It work pretty well, but for react-admin in need to catch actions from the context to do some necessary stuff.
How can I access to actions like ON_LOADING, ON_ERROR, ON_LOAD_USER, ON_LOADING (like we usually did with Redux) or do you some accessible events for do something on similar case ?
Thanks for your help

Versions

"@axa-fr/react-oidc-context": "^3.0.0-alpha.0",
"oidc-client": "^1.9.1",

Screenshots

Expected

Actual

Additional Details

• Installed packages:

Issue and Steps to Reproduce

Thank you for this fix #180 against this issue #158.

This no longer routes towards an authenticated route, but I do get a flash of text that appears to be the callback component.

I could not see a way to customise this component, so it would be great to be able to do this.

Versions

v1.3.2-alpha.0

Screenshots

Expected

I'd expect to be able to override the React callback component via a prop, and see this render (or return null and render no text) instead.

Actual

See above screenshot for current actual behaviour.

Additional Details

• Installed packages:

If we use new React Hook on a package (Context in my case) we got an error message that say

hooks can only be called inside the body of a function component

I bump React in all packages but the problem stay.

I find an issue on react GH

facebook/react#13991

Today, with Context OIDC, is not possible to disable the component through the provider like :

<Router>
<AuthenticationProvider
configuration={oidcConfiguration}
loggerLevel={oidcLog.DEBUG}
isEnabled={false}
>
<Header />
<Routes />
</AuthenticationProvider>
</Router>

When a silent renew faile, the token expire and it is no renewed. So we stuck with a expired token with no posssibility to renew it automatiquely. We have to force logout and login again

study and code the support for code flow (with pkce).

oidc client already support it.

IdentityModel/oidc-client-js#552