Skip to content
This repository has been archived by the owner on Jul 26, 2022. It is now read-only.

@okta/okta-react@1.2.1 #517

Merged
merged 3 commits into from
Aug 22, 2019
Merged

@okta/okta-react@1.2.1 #517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d0bd4ca
@okta/okta-react@1.2.1
aarongranick-okta Aug 1, 2019
e8a44b4
Update README.md
aarongranick-okta Aug 21, 2019
9ab51d4
Update README.md
aarongranick-okta Aug 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/configuration-validation/src/lib.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
4 changes: 2 additions & 2 deletions packages/configuration-validation/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
16 changes: 8 additions & 8 deletions packages/okta-angular/test/e2e/harness/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions packages/okta-angular/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions packages/okta-react-native/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"

Expand Down
109 changes: 79 additions & 30 deletions packages/okta-react/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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} />
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm 90% sure I know the answer, but what happens to users of the old standard?

If we're deprecating the old snake_case method, we should indicate that somewhere so users understand why their code works (per above) when it doesn't match the docs. The changelog would satisfy me on that if it shows up there (and thus not in this PR), but we need to make sure it does show up there in that case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will add note to the changelog

- **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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was grantType ever published for okta-react, or is this leftover from earlier work in this same release?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its left over, we have not released pkce support for react yet

- **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)*:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These moved to the Auth config, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These, and all other supported options are part of the "Configuration refernence" (I point them to okta-auth-js). pkce, secure, etc. are also located here.

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');
Expand All @@ -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 */}
Expand All @@ -228,9 +219,18 @@ class App extends Component {
}
```

#### Alternate configuration using `Auth` object
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 on this section - very clear, very helpful


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';
Expand All @@ -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 {
Expand All @@ -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.
Expand Down Expand Up @@ -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}'
});
Expand All @@ -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 |
6 changes: 3 additions & 3 deletions packages/okta-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down Expand Up @@ -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"
},
Expand Down
Loading