@okta/okta-react@1.2.1 (#517)

* @okta/okta-react@1.2.1

- PKCE support, @okta/okta-auth-js@2.6.3

packages/configuration-validation/src/lib.js

@@ -53,7 +53,6 @@ configUtil.assertIssuer = (issuer, testing = {}) => {
     console.warn(httpsWarning);
   }
 
-
   if (!issuer) {
     throw new ConfigurationValidationError('Your Okta URL is missing. ' + copyMessage);
   } else if (!testing.disableHttpsCheck && !issuer.match(isHttps)) {

packages/configuration-validation/yarn.lock

@@ -1241,8 +1241,8 @@ ecc-jsbn@~0.1.1:
     safer-buffer "^2.1.0"
 
 electron-to-chromium@^1.3.47:
-  version "1.3.235"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.235.tgz#8d0d52c9ec76d12189f2f2d265a17d57f41d20dc"
+  version "1.3.237"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.237.tgz#39c5d1da59d6fd16ff705b97e772bb3b5dfda7e4"
 
 error-ex@^1.2.0:
   version "1.3.2"

packages/okta-angular/test/e2e/harness/yarn.lock

@@ -1190,8 +1190,8 @@ chokidar@^1.4.1, chokidar@^1.4.2:
     fsevents "^1.0.0"
 
 chokidar@^2.0.0, chokidar@^2.0.2:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.6.tgz#b6cad653a929e244ce8a834244164d241fa954c5"
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
   dependencies:
     anymatch "^2.0.0"
     async-each "^1.0.1"
@@ -1901,8 +1901,8 @@ ejs@^2.5.7:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.2.tgz#3a32c63d1cd16d11266cd4703b14fec4e74ab4f6"
 
 electron-to-chromium@^1.3.47:
-  version "1.3.235"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.235.tgz#8d0d52c9ec76d12189f2f2d265a17d57f41d20dc"
+  version "1.3.237"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.237.tgz#39c5d1da59d6fd16ff705b97e772bb3b5dfda7e4"
 
 elliptic@^6.0.0:
   version "6.5.0"
@@ -4784,8 +4784,8 @@ portfinder@1.0.19:
     mkdirp "0.5.x"
 
 portfinder@^1.0.9:
-  version "1.0.22"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.22.tgz#abd10a488b5696e98ee25c60731f8ae0b76f8ddd"
+  version "1.0.23"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.23.tgz#894db4bcc5daf02b6614517ce89cd21a38226b82"
   dependencies:
     async "^1.5.2"
     debug "^2.2.0"
@@ -5441,8 +5441,8 @@ send@0.17.1:
     statuses "~1.5.0"
 
 serialize-javascript@^1.4.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.7.0.tgz#d6e0dfb2a3832a8c94468e6eb1db97e55a192a65"
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.8.0.tgz#9515fc687232e2321aea1ca7a529476eb34bb480"
 
 serve-index@^1.7.2:
   version "1.9.1"

packages/okta-angular/yarn.lock

@@ -51,8 +51,8 @@
   resolved "https://registry.yarnpkg.com/@okta/configuration-validation/-/configuration-validation-0.3.0.tgz#41954ce0567b25b7ff0d4eb7fc60468a709444d7"
 
 "@okta/okta-auth-js@^2.0.0":
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/@okta/okta-auth-js/-/okta-auth-js-2.6.3.tgz#24ca6a1a4c2da6b6002bbf81bba97e667187e693"
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@okta/okta-auth-js/-/okta-auth-js-2.7.0.tgz#a3b7845ed77e129f424aebed464d3db88f82dfc1"
   dependencies:
     Base64 "0.3.0"
     cross-fetch "^3.0.0"

packages/okta-react-native/yarn.lock

@@ -1890,8 +1890,8 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
 electron-to-chromium@^1.3.191:
-  version "1.3.235"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.235.tgz#8d0d52c9ec76d12189f2f2d265a17d57f41d20dc"
+  version "1.3.237"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.237.tgz#39c5d1da59d6fd16ff705b97e772bb3b5dfda7e4"
 
 elliptic@^6.4.0, elliptic@^6.4.1:
   version "6.5.0"
@@ -4069,8 +4069,8 @@ node-pre-gyp@^0.12.0:
     tar "^4"
 
 node-releases@^1.1.25:
-  version "1.1.27"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.27.tgz#b19ec8add2afe9a826a99dceccc516104c1edaf4"
+  version "1.1.28"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.28.tgz#503c3c70d0e4732b84e7aaa2925fbdde10482d4a"
   dependencies:
     semver "^5.3.0"
 

packages/okta-react/README.md

@@ -44,13 +44,13 @@ yarn add @okta/okta-react
 
 ## Create Routes
 
-Here are the minimum requirements for a working example:
+Here is a minimal working example. This example defines 3 routes:
 
 * **/** - Anyone can access the home page
 * **/protected** - Protected is only visible to authenticated users
 * **/implicit/callback** - This is where auth is handled for you after redirection
 
-```typescript
+```jsx
 // src/App.js
 
 import React, { Component } from 'react';
@@ -64,8 +64,8 @@ class App extends Component {
     return (
       <Router>
         <Security issuer='https://{yourOktaDomain}.com/oauth2/default'
-                  client_id='{clientId}'
-                  redirect_uri={window.location.origin + '/implicit/callback'} >
+                  clientId='{clientId}'
+                  redirectUri={window.location.origin + '/implicit/callback'} >
           <Route path='/' exact={true} component={Home}/>
           <SecureRoute path='/protected' component={Protected}/>
           <Route path='/implicit/callback' component={ImplicitCallback} />
@@ -81,7 +81,7 @@ export default App;
 ## Show Login and Logout Buttons
 In the relevant location in your application, you will want to provide `Login` and `Logout` buttons for the user. You can show/hide the correct button by using the `auth.isAuthenticated()` method. For example:
 
-```typescript
+```jsx
 // src/Home.js
 
 import React, { Component } from 'react';
@@ -134,7 +134,7 @@ When your users are authenticated, your React application has an access token th
 
 Here is what the React component could look like for this hypothetical example:
 
-```typescript
+```jsx
 import fetch from 'isomorphic-fetch';
 import React, { Component } from 'react';
 import { withAuth } from '@okta/okta-react';
@@ -179,33 +179,24 @@ Security is the top-most component of okta-react. This is where most of the conf
 
 #### Configuration options
 
+These options are used by `Security` to configure the [Auth](https://github.com/okta/okta-oidc-js/blob/master/packages/okta-react/src/Auth.js) object. The most commonly used options are shown here. See [Configuration Reference](https://github.com/okta/okta-auth-js#configuration-reference) for an extended set of supported options.
+
 - **issuer** (required) - The OpenId Connect `issuer`
-- **client_id** (required) - The OpenId Connect `client_id`
-- **redirect_uri** (required) - Where the callback handler is hosted
+- **clientId** (required) - The OpenId Connect `client_id`
+- **redirectUri** (required) - Where the callback handler is hosted
 - **scope** *(optional)* - Reserved or custom claims to be returned in the tokens. Default: `['openid', 'email', 'profile']`
-- **response_type** *(optional)* - Desired token types. Default: `['id_token', 'token']`
-- **grantType** *(optional)* - Can be `implicit` (default) or `authorization_code` (for PKCE flow)
+- **responseType** *(optional)* - Desired token types. Default: `['id_token', 'token']`.
+For PKCE flow, this should be left undefined or set to `['code']`.
+- **pkce** *(optional)* - If `true`, PKCE flow will be used
 - **onAuthRequired** *(optional)* - callback function
 
   Accepts a callback to make a decision when authentication is required. If this is not supplied, `okta-react` redirects to Okta. This callback will receive `auth` and `history` parameters. This is triggered when:
     1. `auth.login` is called
     2. SecureRoute is accessed without authentication
 
-- **storage** *(optional)*:
-  Specify the type of storage for tokens. The types are:
-  - [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
-  - [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)
-  - [`cookie`](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)
-
-  Defaults to `localStorage`. If [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage) is not available, falls back to `sessionStorage` or `cookie`.
-- **auto_renew** *(optional)*:
-  By default, the library will attempt to renew expired tokens. When an expired token is requested by the library, a renewal request is executed to update the token. If you wish to  to disable auto renewal of tokens, set `auto_renew` to `false`.
-
-- **auth** *(optional)* - Provide an [Auth](https://github.com/okta/okta-auth-js) object instead of the options above. This is helpful when integrating `okta-react` with external libraries that need access to the tokens.
-
 #### Example
 
-```typescript
+```jsx
 function customAuthHandler({auth, history}) {
   // Redirect to the /login page that has a CustomLoginComponent
   history.push('/login');
@@ -216,8 +207,8 @@ class App extends Component {
     return (
       <Router>
         <Security issuer='https://{yourOktaDomain}.com/oauth2/default'
-                  client_id='{clientId}'
-                  redirect_uri={window.location.origin + '/implicit/callback'}
+                  clientId='{clientId}'
+                  redirectUri={window.location.origin + '/implicit/callback'}
                   onAuthRequired={customAuthHandler} >
           <Router path='/login' component={CustomLoginComponent}>
           {/* some routes here */}
@@ -228,9 +219,18 @@ class App extends Component {
 }
 ```
 
+#### Alternate configuration using `Auth` object
+
+When the `auth` option is passed, all other configuration options passed to `Security` will be ignored. The `Auth` object should be configured directly before being passed to `Security`.
+
+- **auth** *(optional)* - Provide an [Auth](https://github.com/okta/okta-oidc-js/blob/master/packages/okta-react/src/Auth.js) object instead of the options above. This is the most direct way to use methods on the `Auth` object outside of your components and is helpful when integrating `okta-react` with external libraries that need access to the tokens.
+
+
 #### Example with Auth object
 
-```typescript
+Configure an instance of the `Auth` object and pass it to the `Security` component.
+
+```jsx
 // src/App.js
 
 import React, { Component } from 'react';
@@ -245,9 +245,8 @@ const history = createBrowserHistory();
 const auth = new Auth({
   history,
   issuer: 'https://{yourOktaDomain}.com/oauth2/default',
-  client_id: '{clientId}',
-  redirect_uri: window.location.origin + '/implicit/callback',
-  onAuthRequired: ({history}) => history.push('/login')
+  clientId: '{clientId}',
+  redirectUri: window.location.origin + '/implicit/callback',
 });
 
 class App extends Component {
@@ -267,6 +266,55 @@ class App extends Component {
 export default App;
 ```
 
+#### PKCE Example
+
+Assuming you have configured your application to allow the `Authorization code` grant type, simply pass `pkce=true` to the `Security` component. This will configure the `Auth` object to perform PKCE flow for both login and token refresh.
+
+```jsx
+
+class App extends Component {
+  render() {
+    return (
+      <Router>
+        <Security issuer='https://{yourOktaDomain}.com/oauth2/default'
+                  clientId='{clientId}'
+                  pkce={true}
+                  redirectUri={window.location.origin + '/implicit/callback'}>
+          <Router path='/login' component={CustomLoginComponent}>
+          {/* some routes here */}
+        </Security>
+      </Router>
+    );
+  }
+}
+```
+
+You may also configure an `Auth` object directly and pass it to the Security component.
+
+```jsx
+
+const auth = new Auth({
+  issuer: 'https://{yourOktaDomain}.com/oauth2/default',
+  clientId: '{clientId}',
+  pkce: true,
+  redirectUri: window.location.origin + '/implicit/callback',
+});
+
+class App extends Component {
+  render() {
+    return (
+      <Router history={history}>
+        <Security auth={auth} >
+          <Route path='/' exact={true} component={Home}/>
+          <Route path='/implicit/callback' component={ImplicitCallback} />
+        </Security>
+      </Router>
+    );
+  }
+}
+
+```
+
 ### `SecureRoute`
 
 `SecureRoute` ensures that a route is only rendered if the user is authenticated. If the user is not authenticated, it calls `onAuthRequired` if it exists, otherwise, it redirects to Okta.
@@ -315,7 +363,7 @@ Performs a full-page redirect to Okta with optional request parameters.
 
 The `additionalParams` are mapped to Okta's [`/authorize` request parameters](https://developer.okta.com/docs/api/resources/oidc#authorize). This will override any existing [configuration](#configuration-options). As an example, if you have an Okta `sessionToken`, you can bypass the full-page redirect by passing in this token. This is recommended when using the [Okta Sign-In Widget](https://github.com/okta/okta-signin-widget). Simply pass in a `sessionToken` into the `redirect` method as follows:
 
-```typescript
+```jsx
 auth.redirect({
   sessionToken: '{sampleSessionToken}'
 });
@@ -335,6 +383,7 @@ See the [getting started](/README.md#getting-started) section for step-by-step i
 
 | Command      | Description                        |
 |--------------|------------------------------------|
+| `yarn install`| Install dependencies |
 | `yarn start` | Start the sample app using the SDK |
 | `yarn test`  | Run unit and integration tests     |
 | `yarn lint`  | Run eslint linting tests           |

packages/okta-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/okta-react",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React support for Okta",
   "main": "./dist/index.js",
   "scripts": {
@@ -32,8 +32,8 @@
   },
   "homepage": "https://github.com/okta/okta-oidc-js#readme",
   "dependencies": {
-    "@okta/configuration-validation": "^0.3.0",
-    "@okta/okta-auth-js": "^2.6.0",
+    "@okta/configuration-validation": "^0.4.0",
+    "@okta/okta-auth-js": "^2.6.3",
     "babel-runtime": "^6.26.0",
     "prop-types": "^15.5.10"
   },