Skip to content
This repository has been archived by the owner on Dec 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #16 from adambrgmn/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@adambrgmn
adambrgmn authored Dec 11, 2017
2 parents ce2622d + 74ac73b commit df48017
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 19 deletions.
56 changes: 39 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

* [What is `react-oauth-flow`](#what-is-react-oauth-flow)
* [Installation](#installation)
* [Requirements](#requirements)
* [Usage](#usage)
* [`<OauthSender />`](#oauthsender-)
* [`<OauthReceiver />`](#oauthreceiver-)
Expand Down Expand Up @@ -42,8 +43,27 @@ There is also a umd-build available for usage directly inside a browser, via
</script>
```

## Requirements

`react-oauth-flow` requires
[`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to be
available on the `window`-object. In modern browsers it's there by default. But
for older browsers you might need to provide it yourself as a polyfill.

If you are using
[`create-react-app`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-language-features-and-polyfills)
it's already included as a polyfill. Otherwise I recommend
[`whatwg-fetch`](https://github.com/github/fetch) (which `create-react-app` also
uses).

## Usage

`react-oauth-flow` exports three functions:

* [`OauthSender`](#oauthsender-)
* [`OauthReceiver`](#oauthreceiver-)
* [`createOauthFlow`](#createoauthflow)

### `<OauthSender />`

```js
Expand Down Expand Up @@ -149,15 +169,16 @@ redirected from the OAuth2-provider.

#### Props

| Prop | Type | Required | Default | Description |
| :------------- | :------------------- | :------- | :------ | :-------------------------------------------------------------------------------------- |
| `tokenUrl` | `string` | yes | - | The full url to the token endpoint, provided by the service |
| `clientId` | `string` | yes | - | Your client id from the service provider (remember to keep it secret!) |
| `clientSecret` | `string` | yes | - | Your client secret from the service provider (remember to keep it secret!) |
| `redirectUri` | `string` | yes | - | The URL where the provider has redirected your user (used to verify auth) |
| `args` | `object` | no | - | Args will be attatched to the request to the token endpoint. Will be serialized by `qz` |
| `location` | `{ search: string }` | no | - | Used to extract info from querystring [(read more below)](#location-and-querystring) |
| `querystring` | `string` | no | - | Used to extract info from querystring [(read more below)](#location-and-querystring) |
| Prop | Type | Required | Default | Description |
| :------------- | :------------------- | :------- | :----------------- | :-------------------------------------------------------------------------------------- |
| `tokenUrl` | `string` | yes | - | The full url to the token endpoint, provided by the service |
| `clientId` | `string` | yes | - | Your client id from the service provider (remember to keep it secret!) |
| `clientSecret` | `string` | yes | - | Your client secret from the service provider (remember to keep it secret!) |
| `redirectUri` | `string` | yes | - | The URL where the provider has redirected your user (used to verify auth) |
| `args` | `object` | no | - | Args will be attatched to the request to the token endpoint. Will be serialized by `qz` |
| `location` | `{ search: string }` | no | - | Used to extract info from querystring [(read more below)](#location-and-querystring) |
| `querystring` | `string` | no | - | Used to extract info from querystring [(read more below)](#location-and-querystring) |
| `appName` | `string` | no | `react-oauth-flow` | App name mainly used to provide a decent User-Agent header on token-request |

#### Events

Expand Down Expand Up @@ -263,14 +284,15 @@ overridden when you use the created components.

#### Args

| Arg | Type | Required | Default | Description |
| :--------------------- | :------- | :------- | :------ | :------------------------------------------------------------------------- |
| `options` | `object` | yes | - | Options object |
| `options.authorizeUrl` | `string` | yes | - | The full url to the authorize endpoint, provided by the service |
| `options.tokenUrl` | `string` | yes | - | The full url to the token endpoint, provided by the service |
| `options.clientId` | `string` | yes | - | Your client id from the service provider (remember to keep it secret!) |
| `options.clientSecret` | `string` | yes | - | Your client secret from the service provider (remember to keep it secret!) |
| `options.redirectUri` | `string` | yes | - | The URL where the provider should redirect your users back |
| Arg | Type | Required | Default | Description |
| :--------------------- | :------- | :------- | :----------------- | :-------------------------------------------------------------------------- |
| `options` | `object` | yes | - | Options object |
| `options.authorizeUrl` | `string` | yes | - | The full url to the authorize endpoint, provided by the service |
| `options.tokenUrl` | `string` | yes | - | The full url to the token endpoint, provided by the service |
| `options.clientId` | `string` | yes | - | Your client id from the service provider (remember to keep it secret!) |
| `options.clientSecret` | `string` | yes | - | Your client secret from the service provider (remember to keep it secret!) |
| `options.redirectUri` | `string` | yes | - | The URL where the provider should redirect your users back |
| `appName` | `string` | no | `react-oauth-flow` | App name mainly used to provide a decent User-Agent header on token-request |

## License

Expand Down
11 changes: 10 additions & 1 deletion src/OauthReceiver/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import qs from 'qs';
import { buildURL, fetch2 } from '../utils';
import pkg from '../../package.json';

export class OauthReceiver extends React.Component {
static propTypes = {
tokenUrl: PropTypes.string.isRequired,
clientId: PropTypes.string.isRequired,
clientSecret: PropTypes.string.isRequired,
redirectUri: PropTypes.string.isRequired,
appName: PropTypes.string,
args: PropTypes.objectOf(
PropTypes.oneOfType([
PropTypes.string,
Expand All @@ -31,6 +33,7 @@ export class OauthReceiver extends React.Component {
args: {},
location: null,
querystring: null,
appName: pkg.name,
onAuthSuccess: null,
onAuthError: null,
render: null,
Expand All @@ -55,6 +58,7 @@ export class OauthReceiver extends React.Component {
clientId,
clientSecret,
redirectUri,
appName,
args,
onAuthSuccess,
} = this.props;
Expand All @@ -78,7 +82,12 @@ export class OauthReceiver extends React.Component {
...args,
});

fetch2(url, { method: 'POST' })
const headers = new Headers({
'User-Agent': appName,
Accept: 'application/json',
});

fetch2(url, { method: 'POST', headers })
.then(response => {
const accessToken = response.access_token;

Expand Down
3 changes: 2 additions & 1 deletion src/createOauthFlow/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { OauthReceiver } from '../OauthReceiver';
import { OauthSender } from '../OauthSender';

export function createOauthFlow(
{ authorizeUrl, tokenUrl, clientId, clientSecret, redirectUri } = {},
{ authorizeUrl, tokenUrl, clientId, clientSecret, redirectUri, appName } = {},
) {
const Sender = props => (
<OauthSender
Expand All @@ -20,6 +20,7 @@ export function createOauthFlow(
clientId={clientId}
clientSecret={clientSecret}
redirectUri={redirectUri}
appName={appName}
{...props}
/>
);
Expand Down

0 comments on commit df48017

Please sign in to comment.