maxmantz/redux-oidc-example

Small ReactJS application to demonstrate the usage of redux-oidc

redux-oidc-example

This is a small sample app to demonstrate the usage of redux-oidc.

You will need a Google account to use it.

After logging in, the app will query the YouTube API for a list of your 5 most recent channel subsciptions (if any). You can click on Show user info to view the user info stored in the reducer. Click on Logout to log out again.

Visit https://redux-oidc-example.herokuapp.com/ for the live demo (might take a while to load).

Usage since redux-oidc v3.0.0-beta.10

co has been removed from the peer dependencies. You don't need it anymore for running this library. You can also safely drop babel-polyfill from the silent renew script.

Usage with silent renew (since redux-oidc v3.0.0-beta.7)

See this app's store and silent renew configurations, as well as webpack config on how to use it.

Usage without silent renew

Using this library without silent renew is possible by using the oidc middleware. See this store configuration on how to use it.

Technologies

This app uses react-router-redux for routing.

Running locally

Clone this repo and run npm install. After that run node server to start the server. Please note that the server is running under TLS and therefore you need to visit https://localhost:8080 to find the app.

Configuration

This app uses a webpack config for building two separate files, index.html for the app & silent_renew.html for silent renew. It uses express as a server with this config to allow the routing for both HTML files to work.

redux-oidc-example's Issues

UserManager in LoginPage

Nice example!

One question about the loginPage. Why does it get the UserManager by import userManager from '../../utils/userManager';instead of getting it from the context?

Also curious if you have you considered having the login page just doing an action like REQUEST_LOGIN and doing the userManager.signinRedirect();part in a saga instead? This way the loginPage component does not have to know about userManager, and the side-effects are kept in the saga.

reactjs with redux oidc client

Hello,

I was able to setup the oidc client, with your redux-oidc library.

What I am having trouble with right now, is basically authorizing the access_token when the user makes a request to my backend api that is made with asp.net.

I just have a hard time understanding which namespace to use in order to validate the bearer token.

Would you have a sample with asp.net Core 2.0, that uses azure ad, and reactjs as the client?

This is a question.

Initial call to loadUser()

redux-oidc-example/src/store.js

Line 30 in 991104d

loadUser(store, userManager);

Why is this initial call to loadUser() done? I removed it and it seems to work anyway :-).

checkSession begin run hundreds of times per second

I set up my store with the userManager from redux-oidc, previously with version 2.2.1 and now with 3.0.0-beta14 and at both points the project I have experience a large bump in CPU usage when implementing the userManager, on a Macbook Pro 2017 the CPU usage increases from under 10% to between 15-25% and I have measured performance and see that checkSession, among other functions, are run extremely often.

Image of Chrome performance measurement with userManager

Image of Chrome performance measurement without userManager

This is the code implementing the OIDC, without it the app runs fine.

const userManager = createUserManager(config.authConfig);

const store = createStore(reducers, composeWithDevTools(applyMiddleware(middleware, thunkMiddleware)));

loadUser(store, userManager);

with authConfig

  authConfig: {
    authority: "https://some-website.net",
    client_id: "js",
    redirect_uri: "https://some-website.net/callback",
    response_type: "id_token token",
    scope: "openid profile api1",
    post_logout_redirect_uri: "https://some-website.net",
    silent_redirect_uri: "https://some-website.net/silent_renew.html",
    automaticSilentRenew: true,
    filterProtocolClaims: true,
    loadUserInfo: true
  },

Any clue what is causing this? What is the checkSession actually doing and can it be run less often?

It does not autorenew token after 1 hour of inactivity

1. If I change time to something like 5 minutes till token expiration, it auto renews token

2. if I leave page open for 1 hour or so, it silently passes expiration time and no token renew happens

Authenticate on all routes - Question

How would you modify this example to authenticate the user on all routes?

So if the application where setup with a Main Page, Page 1, Page 2, and Page 3, each with it's own route, how could you make it so if the user wanted to enter the application on Page 1 it would redirect to a login page and then direct them back to Page 1 once they've logged in?

Is it recommended that on each route you would need to do a check to see if the user is logged in or is there a better DRY principled way to do it?

Sign in with Google temporarily disabled for this app

I try to run the application but Google blocks it saying: "Sign in with Google temporarily disabled for this app. This app has not been verified yet by Google in order to use Google Sign".

Could you guys prepare an other example using different authority?

Add license file

Hi! Thanks so much for your work on this example project. Would you be willing to add a license file for it?

Please add errorCallback to example

After using the example to build login in my own code. I found the following to be very helpful for debuggin in callback\index.js then added to the CallbackComponent´s errorCallback={this.errorCallback}.

errorCallback = (e) => { console.error('errorCallback',e) }

[Question] Silent Renew File Pattern

What is the reason for having the silent-renew outside of the react app instead of just adding a route in the router?

Dynamically load the UserManagerSettings

Hi,

I'm having trouble modifying the sample code so that it dynamically loads the UserManagerSettings out of an appconfig.json file located in the public folder of a create-react-app project. Would it be possible for you provide a sample on how to do this? My UserManagerSettings vary with each deployment and thus cannot be set at compile time.

Thanks.

Does redux-oidc works with webpack 5, can anyone confirm on that?

I need to implement this on webpack 5 , but facing lot of issues. Can anyone share configuration for webpack 5 file.

does silent renew work?

I have been trying to to get silent renew to work however it looks like the USER_EXPIRED action is being dispatched every second after the access_token expires. What are the steps to get this working? I have tried to intercept the action into one of my own reducers to do silent renewal but it seems like that isnt working.

Missing File?

Hi,

i'm trying out your example and there seems to be a missing file?
https://github.com/maxmantz/redux-oidc-example/blob/master/src/storeWithoutSilentRenew.js
Line 6
import { loadSubscriptionsSaga } from './sagas';

Is this file missing or am I missing something here?

Getting the id_token instead of the access_token

I have the following settings:

    client_id: '{client_id}',
    response_type: 'token id_token',
    scope: 'openid profile',
    authority: 'https://login.microsoftonline.com/{tenant_id}',
    redirect_uri: 'http://localhost:5000/oidc-client-sample.html',
    post_logout_redirect_uri: 'http://localhost:5000/oidc-client-sample.html',
    resource: 'https://domain/WebApplication17',
    automaticSilentRenew: true,
    filterProtocolClaims: true,
    loadUserInfo: true,
    metadata: {
      issuer: 'https://sts.windows.net/{tenant_id}/',
      jwks_uri: 'https://login.microsoftonline.com/{tenant_id}/discovery/keys',
      end_session_endpoint: 'https://login.microsoftonline.com/{tenant_id}/oauth2/logout',
      authorization_endpoint: 'https://login.microsoftonline.com/{tenant_id}/oauth2/authorize',
      token_endpoint: "https://login.microsoftonline.com/{tenant_id}/oauth2/token",
    },
    signingKeys: [{}]
  };

When I create my request with the sample server with these settings, the access_token that I receive is incorrect, basically the access_token is my id_token.

I am receiving back a token starting with ey where as the access token usually start of with AQA....
Also when I call the endpoint openid/userinfo I get a bad request response because the bearer token is invalid. The reason why it's invalid is because the token that I get back is the id_token and not the access_token.
Any idea why that is the case?

How would I use this with redux

Hi,
How would I use this with redux and not redux-saga. I get a null value for user.

It is very frustrating.

Google: "This app is blocked"

Error when loading silent_renew.html

Hi, thank you again so much for this library. I appreciate your work.

I have an error when loading the silent_renew.html file.

This is my userManager settings:

This is the content of the silent_renew.html file:

I also added the silent_redirect_uri to the identity provider:

However, when the page silent_renew.html was being loaded, there was an error in the console as follows:

Could you please let me know what I did wrong and how to solve this error? Thank you.

Is it good way to share store across app solution?

Here redux-oidc-example/src/utils/request.js is example how get the access token from redux store and the redux store is shared in import:

Is it good way to do this? Could be better pass the access token like a parameter and connect the oidc key into component?

Thanks for your opinion. :)

import store from '../store';

// a request helper which reads the access_token from the redux state and passes it in its HTTP request
export default function apiRequest(url, method = 'GET') {
  const token = store.getState().oidc.user.access_token;
  const headers = new Headers();
  headers.append('Accept', 'application/json');
  headers.append('Authorization', `Bearer ${token}`);

  const options = {
    method,
    headers
  };

  return fetch(url, options)
    .then((res) => res.json())
    .then((data) => ({data}))
    .catch((error) => ({ error }));
}

Token pass as paramater:

// a request helper which reads the access_token from the redux state and passes it in its HTTP request
export default function apiRequest(url, method = 'GET', token) {
  const headers = new Headers();
  headers.append('Accept', 'application/json');
  headers.append('Authorization', `Bearer ${token}`);

  const options = {
    method,
    headers
  };

  return fetch(url, options)
    .then((res) => res.json())
    .then((data) => ({data}))
    .catch((error) => ({ error }));
}

And in component use connect method with:

function mapStateToProps(state) {
  return {
    token: oidc.user.access_token
  };
}

Pass the access token from component into action creator and call the api with this paramater.

npm run dev error

there seems to be a possibility to start the project using

npm run dev

however when surfing to the site it crashes with

$ npm run dev

[email protected] dev C:\Users\peter\Documents\react\redux-oidc-example
cross-env NODE_ENV=development webpack-dev-server

Project is running at https://localhost:8080/
webpack output is served from /
404s will fallback to /index.html

webpack: Compiled successfully.
(node:2480) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
internal/buffer.js:945
class FastBuffer extends Uint8Array {}
^

RangeError: Invalid typed array length: -4095
at new Uint8Array ()
at new FastBuffer (internal/buffer.js:945:1)
at Handle.onStreamRead [as onread] (internal/stream_base_commons.js:185:19)
at Stream. (C:\Users\peter\Documents\react\redux-oidc-example\node_modules\handle-thing\lib\handle.js:120:12)
at Stream.emit (events.js:327:22)
at endReadableNT (C:\Users\peter\Documents\react\redux-oidc-example\node_modules\spdy-transport\node_modules\readable-stream\lib_stream_readable.js:1010:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: cross-env NODE_ENV=development webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Google OAuth: Refresh token not present in token response

Hi @maxmantz

I have already implemented Keycloak with redux-oidc. It works really well.
Now I'm trying with Google OAuth. I'm facing the following issues

1. Refresh token is not present in token response.
   Google docs suggests to pass access_type=offline to get the refresh token. When I tried to pass that in userManagerConfig it's not passing as a param in token endpoint. Seems it's not a configurable thing in redux-oidc library as I checked the lib classes.
   How to get the refresh token with Google OAuth in token response?

Someone suggest to pass offline_access in scope. But it's not a supported scope in Google. Any help would be appreciated.

2. Google OAuth expecting client_secret to get the token response along with authority and client_id. But I don't see that in your example. Not sure how that works for you.

3. Access token couldn't be used for getting resource from API since it's not a JWT token. I can able use only id_token. Is this okay?

4. End_session_endpoint is not available in Google OAuth well known configurations. So I'm getting end session endpoint missing error while logout.

Appreciate your inputs on this. Mainly I need inputs on [1] Refresh token from Google

Branch using react-router-dom

This sample is based on react-router 2.0. The router has changed a lot since that version, which makes it difficult to follow the sample today.

Would someone create a branch of this project to demo how to use redux-oidc with react-router-dom 4.X? This is a migration guide for the router: https://github.com/ReactTraining/react-router/blob/25776d4dc89b8fb2f575884749766355992116b5/packages/react-router/docs/guides/migrating.md#the-router

Passing configuration to UserManager

Is there any way to pass runtime configuration for userManager.js after running the npm run build? changing the identity provider externally and passing the values down to userManager to authenticate against the new identity provider

Crashes on start

$ npm install && npm start
$ open https://localhost:8080/
...
Uncaught Error: Cannot find module "immutable"
    at webpackMissingModule (https://127.0.0.1:8080/app.js:31276:131)
    at t.(anonymous function).exports (https://127.0.0.1:8080/app.js:31276:217)
    at Object.<anonymous> (https://127.0.0.1:8080/app.js:31276:541)
    at __webpack_require__ (https://127.0.0.1:8080/app.js:20:30)
    at Object.<anonymous> (https://127.0.0.1:8080/app.js:29489:19)
    at __webpack_require__ (https://127.0.0.1:8080/app.js:20:30)
    at Object.<anonymous> (https://127.0.0.1:8080/app.js:8701:13)
    at __webpack_require__ (https://127.0.0.1:8080/app.js:20:30)
    at Object.<anonymous> (https://127.0.0.1:8080/app.js:72:19)
    at __webpack_require__ (https://127.0.0.1:8080/app.js:20:30)
webpackMissingModule @ redux-oidc.js:1
t.(anonymous function).exports @ redux-oidc.js:1
(anonymous) @ redux-oidc.js:1
__webpack_require__ @ bootstrap 9b09fd9…:19
(anonymous) @ app.js:3
__webpack_require__ @ bootstrap 9b09fd9…:19
(anonymous) @ index.js:3
__webpack_require__ @ bootstrap 9b09fd9…:19
(anonymous) @ bootstrap 9b09fd9…:39
__webpack_require__ @ bootstrap 9b09fd9…:19
(anonymous) @ bootstrap 9b09fd9…:39
(anonymous) @ bootstrap 9b09fd9…:39

Firefox signing user out after a few seconds without warning

When running this example project locally with an instance of Identity Server 4 as the identity authority, it works fine in Chrome and Edge (on Windows), but Firefox for some reason adds an iframe into the markup a few seconds after the user is authenticated with src set to the connect/authorize endpoint. This causes an error on the identity authority's side ("No user present in authorize request") which in turn causes the React app to behave as if the user has signed out, even logging "Action type: redux-oidc/USER_SIGNED_OUT" in the console.

This is Firefox 59.0.1 (64-bit).

Why does Firefox, and only Firefox, add this iframe to the markup? FYI I've also logged this on Stack Overflow with more detail here:

open any link in new tab on same browser ,i can't get user Data

TypeScript

Do you have this example in TypeScript by any chance? I'm struggling to replicate/translate the Callback.js functionality into valid TypeScript.

For expo managed react native app - can we use redux-oidc for login authentication ???

For expo managed react native app - can we use redux-oidc for login authentication. Please clarify me..

Page not available when running example.

Hi,
I'm having problems running your example. I followed all the instructions (npm install, node server) [installed immutable too]. Server seems to be running (had to change the port [rethinkdb was running on 8080 on my machine])

I keep getting this:

There was another user who created a fork of your example to integrate redux-auth-wrapper and I'm also having problems running his example as well. Identical one as a matter of fact.