171 | {processing &&
176 | )}
177 | />
178 | );
179 | }
180 | }
181 | ```
182 |
183 | Use `Authorizing now...
} 172 | {error && ( 173 |An error occurred: {error.message}
174 | )} 175 |
234 | {processing &&
238 | )}
239 | />
240 | );
241 |
242 | const ChildrenFunction = props => (
243 | Authorization in progress
} 235 | {state &&Will redirect you to {state.from}
} 236 | {error &&Error: {error.message}
} 237 |
246 | {processing &&
250 | )}
251 | Authorization in progress
} 247 | {state &&Will redirect you to {state.from}
} 248 | {error &&Error: {error.message}
} 249 |
256 | {processing &&
260 | );
261 | const ComponentProp = props => Authorization in progress
} 257 | {state &&Will redirect you to {state.from}
} 258 | {error &&Error: {error.message}
} 259 |
Adam Bergman](http://fransvilhelm.com)
[💻](https://github.com/adambrgmn/react-oauth-flow/commits?author=adambrgmn "Code") [📖](https://github.com/adambrgmn/react-oauth-flow/commits?author=adambrgmn "Documentation") | [
Jamie Wright](http://tatsu.io)
[💻](https://github.com/adambrgmn/react-oauth-flow/commits?author=jwright "Code") [📖](https://github.com/adambrgmn/react-oauth-flow/commits?author=jwright "Documentation") | 351 | | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | 352 | 353 | -------------------------------------------------------------------------------- /examples/oauth-dropbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "oauth-dropbox", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.2.0", 7 | "react-dom": "^16.2.0", 8 | "react-router-dom": "^4.2.2", 9 | "react-scripts": "1.0.17" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/oauth-dropbox/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adambrgmn/react-oauth-flow/89f224b8a0ec5ce03b42110ad331c025e6220180/examples/oauth-dropbox/public/favicon.ico -------------------------------------------------------------------------------- /examples/oauth-dropbox/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 |
35 |
36 | 
37 |
39 |
40 | (
44 | (
57 | {
62 | if (processing) {
63 | return
82 | Welcome to React
38 |
45 | Connect to Dropbox}
48 | />
49 |
50 | )}
51 | />
52 |
53 | Processing!
; 64 | } 65 | 66 | if (error) { 67 | return{error.message}
; 68 | } 69 | 70 | returnSuccessfully authorized Dropbox!
}
80 | />
81 |
36 | {processing && done}
37 | {state && state.from}
38 |
39 | )}
40 | />,
41 | );
42 |
43 | await waitForElement(() => getByTestId('done'));
44 |
45 | expect(onAuthSuccess).toHaveBeenCalledTimes(1);
46 | expect(onAuthError).not.toHaveBeenCalled();
47 |
48 | expect(getByTestId('state')).toHaveTextContent('/success');
49 | });
50 |
51 | test('with custom token uri fetch args', async () => {
52 | fetch2.mockClear();
53 |
54 | const props = {
55 | tokenUrl: 'https://api.service.com/oauth2/token',
56 | tokenFetchArgs: {
57 | cache: 'no-cache',
58 | headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
59 | },
60 | clientId: 'abc',
61 | clientSecret: 'abcdef',
62 | redirectUri: 'https://www.test.com/redirect',
63 | querystring: `?${qs.stringify({
64 | code: 'abc',
65 | state: JSON.stringify({ from: '/settings' }),
66 | })}`,
67 | };
68 |
69 | const { getByTestId } = render(
70 | {processing && done}
74 | )}
75 | />,
76 | );
77 |
78 | await waitForElement(() => getByTestId('done'));
79 |
80 | expect(fetch2).toHaveBeenCalledWith(
81 | expect.stringContaining(props.tokenUrl),
82 | expect.objectContaining({
83 | method: expect.stringMatching('POST'),
84 | cache: expect.stringMatching('no-cache'),
85 | headers: expect.objectContaining({
86 | 'Content-Type': expect.stringMatching(
87 | 'application/x-www-form-urlencoded',
88 | ),
89 | }),
90 | }),
91 | );
92 | });
93 | test('with custom fetch function, default args', async () => {
94 | const onAuthSuccess = jest.fn();
95 | const onAuthError = jest.fn();
96 |
97 | const props = {
98 | tokenUrl: 'https://api.service.com/oauth2/token',
99 | tokenFn: fetch2,
100 | clientId: 'abc',
101 | clientSecret: 'abcdef',
102 | redirectUri: 'https://www.test.com/redirect',
103 | querystring: `?${qs.stringify({
104 | code: 'abc',
105 | state: JSON.stringify({ from: '/success' }),
106 | })}`,
107 | onAuthSuccess,
108 | onAuthError,
109 | };
110 |
111 | const { getByTestId } = render(
112 |
116 | {processing && done}
117 | {state && state.from}
118 |
119 | )}
120 | />,
121 | );
122 |
123 | await waitForElement(() => getByTestId('done'));
124 |
125 | expect(onAuthSuccess).toHaveBeenCalledTimes(1);
126 | expect(onAuthError).not.toHaveBeenCalled();
127 |
128 | expect(getByTestId('state')).toHaveTextContent('/success');
129 | });
130 |
131 | test('with custom token function and token uri fetch args', async () => {
132 | fetch2.mockClear();
133 |
134 | const props = {
135 | tokenUrl: 'https://api.service.com/oauth2/token',
136 | tokenFn: fetch2,
137 | tokenFetchArgs: {
138 | cache: 'no-cache',
139 | headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
140 | },
141 | clientId: 'abc',
142 | clientSecret: 'abcdef',
143 | redirectUri: 'https://www.test.com/redirect',
144 | querystring: `?${qs.stringify({
145 | code: 'abc',
146 | state: JSON.stringify({ from: '/settings' }),
147 | })}`,
148 | };
149 |
150 | const { getByTestId } = render(
151 | {processing && done}
155 | )}
156 | />,
157 | );
158 |
159 | await waitForElement(() => getByTestId('done'));
160 |
161 | expect(fetch2).toHaveBeenCalledWith(
162 | expect.stringContaining(props.tokenUrl),
163 | expect.objectContaining({
164 | method: expect.stringMatching('POST'),
165 | cache: expect.stringMatching('no-cache'),
166 | headers: expect.objectContaining({
167 | 'Content-Type': expect.stringMatching(
168 | 'application/x-www-form-urlencoded',
169 | ),
170 | }),
171 | }),
172 | );
173 | });
174 | });
175 |
--------------------------------------------------------------------------------
/src/OauthReceiver/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import * as React from 'react';
3 | import PropTypes from 'prop-types';
4 | import qs from 'qs';
5 | import { buildURL, fetch2 } from '../utils';
6 |
7 | class OauthReceiver extends React.Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.state = {
12 | processing: true,
13 | state: null,
14 | error: null,
15 | };
16 |
17 | this.getAuthorizationCode = this.getAuthorizationCode.bind(this);
18 | this.handleError = this.handleError.bind(this);
19 | this.parseQuerystring = this.parseQuerystring.bind(this);
20 | }
21 |
22 | componentDidMount() {
23 | this.getAuthorizationCode();
24 | }
25 |
26 | getAuthorizationCode() {
27 | try {
28 | const {
29 | tokenUrl,
30 | tokenFetchArgs,
31 | clientId,
32 | clientSecret,
33 | redirectUri,
34 | args,
35 | tokenFn,
36 | onAuthSuccess,
37 | } = this.props;
38 |
39 | const queryResult = this.parseQuerystring();
40 | const { error, error_description: errorDescription, code } = queryResult;
41 | const state = JSON.parse(queryResult.state || null);
42 | if (state) {
43 | this.setState(() => ({ state }));
44 | }
45 |
46 | if (error != null) {
47 | const err = new Error(errorDescription);
48 | throw err;
49 | }
50 |
51 | const url = buildURL(`${tokenUrl}`, {
52 | code,
53 | grant_type: 'authorization_code',
54 | client_id: clientId,
55 | client_secret: clientSecret,
56 | redirect_uri: redirectUri,
57 | ...args,
58 | });
59 |
60 | const headers = new Headers({ 'Content-Type': 'application/json' });
61 | const defaultFetchArgs = { method: 'POST', headers };
62 | const fetchArgs = Object.assign(defaultFetchArgs, tokenFetchArgs);
63 |
64 | (typeof tokenFn === 'function' ?
65 | tokenFn(url, fetchArgs) :
66 | fetch2(url, fetchArgs)
67 | ).then(response => {
68 | const accessToken = response.access_token;
69 |
70 | if (typeof onAuthSuccess === 'function') {
71 | onAuthSuccess(accessToken, { response, state });
72 | }
73 |
74 | this.setState(() => ({ processing: false }));
75 | })
76 | .catch(err => {
77 | this.handleError(err);
78 | this.setState(() => ({ processing: false }));
79 | });
80 | } catch (error) {
81 | this.handleError(error);
82 | this.setState(() => ({ processing: false }));
83 | }
84 | }
85 |
86 | handleError(error) {
87 | const { onAuthError } = this.props;
88 |
89 | this.setState(() => ({ error }));
90 | if (typeof onAuthError === 'function') {
91 | onAuthError(error);
92 | }
93 | }
94 |
95 | parseQuerystring() {
96 | const { location, querystring } = this.props;
97 | let search;
98 |
99 | if (location != null) {
100 | search = location.search; // eslint-disable-line
101 | } else if (querystring != null) {
102 | search = querystring;
103 | } else {
104 | search = window.location.search; // eslint-disable-line
105 | }
106 |
107 | return qs.parse(search, { ignoreQueryPrefix: true });
108 | }
109 |
110 | render() {
111 | const { component, render, children } = this.props;
112 | const { processing, state, error } = this.state;
113 |
114 | if (component != null) {
115 | return React.createElement(component, { processing, state, error });
116 | }
117 |
118 | if (render != null) {
119 | return render({ processing, state, error });
120 | }
121 |
122 | if (children != null) {
123 | React.Children.only(children);
124 | return children({ processing, state, error });
125 | }
126 |
127 | return null;
128 | }
129 | }
130 |
131 | OauthReceiver.propTypes = {
132 | tokenUrl: PropTypes.string.isRequired,
133 | clientId: PropTypes.string.isRequired,
134 | clientSecret: PropTypes.string.isRequired,
135 | redirectUri: PropTypes.string.isRequired,
136 | args: PropTypes.objectOf(
137 | PropTypes.oneOfType([
138 | PropTypes.string,
139 | PropTypes.number,
140 | PropTypes.bool,
141 | PropTypes.object,
142 | ]),
143 | ),
144 | location: PropTypes.shape({ search: PropTypes.string.isRequired }),
145 | querystring: PropTypes.string,
146 | tokenFn: PropTypes.func,
147 | onAuthSuccess: PropTypes.func,
148 | onAuthError: PropTypes.func,
149 | render: PropTypes.func,
150 | tokenFetchArgs: PropTypes.shape({
151 | method: PropTypes.string,
152 | }),
153 | component: PropTypes.element,
154 | children: PropTypes.func,
155 | };
156 |
157 | OauthReceiver.defaultProps = {
158 | args: {},
159 | location: null,
160 | querystring: null,
161 | tokenFn: null,
162 | onAuthSuccess: null,
163 | onAuthError: null,
164 | render: null,
165 | tokenFetchArgs: {},
166 | component: null,
167 | children: null,
168 | };
169 |
170 | export { OauthReceiver };
171 |
--------------------------------------------------------------------------------
/src/OauthSender/OauthSender.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React from 'react';
3 | import { render, cleanup } from 'react-testing-library';
4 | import { OauthSender } from './index';
5 | import { buildURL } from '../utils';
6 |
7 | afterEach(cleanup);
8 |
9 | test('Component: