Adding silent renew entry point to React(create-react-app)

user_1933068 0
Viewed 5424

I have a React application created using the create-react-app module. I have recently been asked by a client to integrate with oidc. For this purpose I'm using redux-oidc, as I already have redux working in my app as well.

We managed to integrate my application into their Identity server and I'm able to sign in and get the user token stored in redux. The problem is that I'm struggling to setup silent renew in my create-react-app application as I have to add an additional entry point. Is there a way to add an additional entry point to silent_renew/index.js without ejecting create-react-app?

Currently I've create a folder called silent_renew containing an index.js file. This folder also contains a silent_renew.html file with not much in it (See: example app similar to my folder structure).

create-react-app webpack reactjs javascript
5 Answers

You can also take the approach of loading the main bundle in the iframe and capturing the path as mentioned here.

Then you don't need to deal with exposing a path to load the oidc client lib (oidc-client.min.js or redux-oidc.js) or dumping it's content somewhere.

index.js/ts 

import * as React from 'react';
import { render } from 'react-dom';
import { processSilentRenew } from 'redux-oidc';
import App from './App';

if (window.location.pathname === '/silent-renew') {
  processSilentRenew();
} else {
  render(<App />, document.getElementById('root'));
}

Please note that /silent-renew request performance can be potentially negatively impacted by large files that loaded along with the application. Some thoughts on it in the comment.

user_11726250

I got it to work by simply adding a route instead of using a separat endpoint. My setup is a create-react-app with redux, redux-oidc & react-router.

I configured the UserManager to use 

{
    silent_redirect_uri: `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}/silent_renew`
}

I added this route in my react-router:

<Route exact={true} path={"/silent_renew"} component={SilentRenewComponent} />

The SilentRenewComponnent is a simple function component which calls the redux-oidc function to process the redirect.

import React from "react";
import { processSilentRenew } from "redux-oidc";

export const SilentRenewComponent = () => {
    processSilentRenew();
    return(
        <div>SilentRenewComponent</div>
    );
};
user_25421320
Related