[okta-react] Update ImplicitCallback to handle multiple renders (#669)

* Update ImplicitCallback to handle multiple renders

packages/okta-react/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.4.1
+
+### Bug Fixes
+
+- [#669](https://github.com/okta/okta-oidc-js/pull/669) - Fixes ImplicitCallback component so it will not attempt redirect unless `getFromUri` returns a value. This can occur if multiple instances of the component are mounted.
+
 # 1.4.0
 
 ### Features

packages/okta-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/okta-react",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "React support for Okta",
   "main": "./dist/index.js",
   "scripts": {

packages/okta-react/src/ImplicitCallback.js

@@ -17,7 +17,6 @@ import withAuth from './withAuth';
 export default withAuth(class ImplicitCallback extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       authenticated: null,
       error: null
@@ -26,18 +25,23 @@ export default withAuth(class ImplicitCallback extends Component {
 
   componentDidMount() {
     this.props.auth.handleAuthentication()
-    .then(() => this.setState({ authenticated: true }))
+    .then(() => {
+      const location = this.props.auth.getFromUri();
+      this.setState({ authenticated: true, location });
+    })
     .catch(err => this.setState({ authenticated: false, error: err.toString() }));
   }
 
   render() {
-    if (this.state.authenticated === null) {
-      return null;
+    const { error, authenticated, location } = this.state;
+    if (error) {
+      return <p>{error}</p>;
+    }
+
+    if (authenticated && location) {
+      return <Redirect to={location}/>;
     }
 
-    const location = this.props.auth.getFromUri();
-    return this.state.authenticated ?
-      <Redirect to={location}/> :
-      <p>{this.state.error}</p>;
+    return null;
   }
 });

packages/okta-react/test/e2e/harness/e2e/App.test.js

@@ -49,8 +49,6 @@ describe('React + Okta App', () => {
       .then(userInfo => {
         expect(userInfo).toContain('email');
       });
-
-      expect(appPage.getLoginFlow().getText()).toBe('implicit');
 
       // Logout
       protectedPage.getLogoutButton().click();
@@ -104,8 +102,6 @@ describe('React + Okta App', () => {
       .then(userInfo => {
         expect(userInfo).toContain('email');
       });
-
-      expect(appPage.getLoginFlow().getText()).toBe('PKCE');
 
       // Logout
       protectedPage.getLogoutButton().click();

packages/okta-react/test/e2e/harness/package.json

@@ -31,11 +31,12 @@
     "build": "react-app-rewired build",
     "build:test": "rimraf e2e/dist && babel e2e/ -d e2e/dist",
     "kill:port": "kill -s TERM $(lsof -t -i:8080 -sTCP:LISTEN) || true",
-    "pretest": "../../../../../scripts/update_se_drivers.sh 0 && yarn build:test",
+    "pretest": "../../../../../scripts/update_se_drivers.sh 0",
     "wait:server": "BROWSER=none yarn start & ./node_modules/.bin/wait-on http://localhost:8080",
     "test": "yarn wait:server && yarn protractor",
     "posttest": "yarn kill:port",
     "eject": "react-scripts eject",
+    "preprotractor": "yarn build:test",
     "protractor": "babel-node ./node_modules/.bin/protractor protractor.conf.js"
   },
   "browserslist": [

packages/okta-react/test/e2e/harness/src/App.js

@@ -11,7 +11,7 @@
  */
 
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Security, SecureRoute, ImplicitCallback, Auth } from '@okta/okta-react';
 import Home from './Home';
 import Protected from './Protected';
@@ -36,14 +36,17 @@ class App extends Component {
                     redirectUri={redirectUri}
                     onAuthRequired={({history}) => history.push('/login')}
                     pkce={pkce}>
-            <Route path='/' component={Home}/>
-            <Route path='/login' component={CustomLogin}/>
-            <Route path='/sessionToken-login' component={SessionTokenLogin}/>
-            <SecureRoute exact path='/protected' component={Protected}/>
-            <Route path='/implicit/callback' component={ImplicitCallback} />
-            <Route path='/pkce/callback' component={ImplicitCallback} />
+            <Switch>
+              <Route path='/login' component={CustomLogin}/>
+              <Route path='/sessionToken-login' component={SessionTokenLogin}/>
+              <SecureRoute exact path='/protected' component={Protected}/>
+              <Route path='/implicit/callback' component={ImplicitCallback} />
+              <Route path='/pkce/callback' component={ImplicitCallback} />
+              <Route path='/' component={Home}/>
+            </Switch>
           </Security>
         </Router>
+        <a href="/?pkce=1">PKCE Flow</a> | <a href="/">Implicit Flow</a>
       </React.StrictMode>
     );
   }

packages/okta-react/test/e2e/harness/src/Protected.js

@@ -17,6 +17,7 @@ export default withAuth(class Protected extends Component {
   constructor(props) {
     super(props);
     this.state = { userinfo: null };
+    this.logout = this.logout.bind(this);
   }
 
   async componentDidMount() {
@@ -25,11 +26,16 @@ export default withAuth(class Protected extends Component {
     this.setState({ userinfo });
   }
 
+  async logout() {
+    this.props.auth.logout('/');
+  }
+
   render() {
     return (
       <div>
         <div> Protected! </div>
         {this.state.userinfo && <pre id="userinfo-container"> {this.state.userinfo} </pre>}
+        <button id="logout-button" onClick={this.logout}>Logout</button>
       </div>
     );
   }