Skip to content

Commit 072ea5d

Browse files
nvh95nvh95
committed
feat: use rollup, remove nwb, enzyme, query-string
Prepare for 2.x
1 parent 9cec702 commit 072ea5d

File tree

15 files changed

+7601
-27198
lines changed

15 files changed

+7601
-27198
lines changed

‎.babelrc‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"env": {
3+
"test": {
4+
"presets": [["@babel/preset-env"], "@babel/preset-react"]
5+
}
6+
},
7+
"presets": [
8+
[
9+
"@babel/preset-env",
10+
{
11+
"modules": false
12+
}
13+
],
14+
"@babel/preset-react"
15+
],
16+
"ignore": ["node_modules/**"],
17+
"plugins": ["@babel/plugin-transform-runtime"]
18+
}

‎.vscode/settings.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"editor.formatOnSave": true
3-
}
2+
"editor.formatOnSave": true,
3+
"files.insertFinalNewline": true
4+
}

‎README.md‎

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
# React Linked In Login Using OAuth 2.0
2+
23
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
4+
35
[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors-)
6+
47
<!-- ALL-CONTRIBUTORS-BADGE:END -->
58

69
[![npm package][npm-badge]][npm]
710

8-
9-
1011
[npm-badge]: https://img.shields.io/npm/v/react-linkedin-login-oauth2.png
1112
[npm]: https://www.npmjs.org/package/react-linkedin-login-oauth2
1213

13-
1414
Demo: https://stupefied-goldberg-b44ee5.netlify.app/
1515

1616
This package is used to get authorization code for Linked In Log in feature using OAuth2 in a easy way. After have the authorization code, you can send it to server to continue to get information needed. For more, please see at [Authenticating with OAuth 2.0 - Linked In](https://developer.linkedin.com/docs/oauth2)
17-
See [Usage](#usage) and [Demo](#demo) for instruction.
17+
See [Usage](#usage) and [Demo](#demo) for instruction.
1818

1919
## Table of contents
20+
2021
- [Changelog](#changelog)
2122
- [Installation](#installation)
2223
- [Overview](#overview)
@@ -27,18 +28,23 @@ See [Usage](#usage) and [Demo](#demo) for instruction.
2728
- [Issues](#issues)
2829

2930
## Changelog
31+
3032
See [CHANGELOG.md](https://github.com/nvh95/react-linkedin-login-oauth2/blob/master/CHANGELOG.md)
3133

3234
## Installation
35+
3336
```
3437
npm install --save react-linkedin-login-oauth2
3538
```
3639

3740
## Overview
38-
We will create a Linked In button (using `LinkedIn` component), after clicking on this button, a popup window will show up and ask for the permission. After we accepted, the pop up window will redirect to a specified URI which should be routed to `LinkedInPopUp` component. It has responsible to notice our openning app the authorization code Linked In provides us. You can consider using `react-router-dom` as a possible solution.
41+
42+
We will create a Linked In button (using `LinkedIn` component), after clicking on this button, a popup window will show up and ask for the permission. After we accepted, the pop up window will redirect to a specified URI which should be routed to `LinkedInCallback` component. It has responsible to notice our openning app the authorization code Linked In provides us. You can consider using `react-router-dom` as a possible solution.
3943

4044
## Usage
45+
4146
First, we create a button and provide required props
47+
4248
```
4349
import React, { Component } from 'react';
4450
@@ -65,7 +71,7 @@ class LinkedInPage extends Component {
6571
errorMessage: error.errorMessage,
6672
});
6773
}
68-
74+
6975
render() {
7076
const { code, errorMessage } = this.state;
7177
return (
@@ -89,10 +95,11 @@ class LinkedInPage extends Component {
8995
export default LinkedInPage;
9096
```
9197

92-
Then we define a route to `redirect_url` and pass `LinkedInPopUp` to it as follow:
98+
Then we define a route to `redirect_url` and pass `LinkedInCallback` to it as follow:
99+
93100
```
94101
import React, { Component } from 'react';
95-
import { LinkedInPopUp } from 'react-linkedin-login-oauth2';
102+
import { LinkedInCallback } from 'react-linkedin-login-oauth2';
96103
97104
import { render } from 'react-dom';
98105
import { BrowserRouter, Route, Switch } from 'react-router-dom';
@@ -103,7 +110,7 @@ class Demo extends Component {
103110
return (
104111
<BrowserRouter>
105112
<Switch >
106-
<Route exact path="/linkedin" component={LinkedInPopUp} />
113+
<Route exact path="/linkedin" component={LinkedInCallback} />
107114
<Route path="/" component={LinkedInPage} />
108115
</Switch>
109116
</BrowserRouter>
@@ -113,7 +120,9 @@ class Demo extends Component {
113120
```
114121

115122
### Usage with custom button
123+
116124
You can render your own component by provide `renderElement` as following example:
125+
117126
```
118127
<LinkedIn
119128
clientId="81lx5we2omq9xh"
@@ -125,13 +134,14 @@ You can render your own component by provide `renderElement` as following exampl
125134
)}
126135
/>
127136
```
137+
128138
# Support IE
129139

130-
Earlier, this package might not work in IE11. The reason is that if popup and opener do not have same domain, popup cannot send message to opener. For more information about this, please visit [here](https://stackoverflow.com/questions/21070553/postmessage-still-broken-on-ie11). From `1.0.7`, we can bypass this by open a popup to our page, then redirect to Linked In authorization page, it should work fine. IE11 is supported in `1.0.7`. Following is step to support it. (If you don't have need to support IE, please ignore this part)
140+
Earlier, this package might not work in IE11. The reason is that if popup and opener do not have same domain, popup cannot send message to opener. For more information about this, please visit [here](https://stackoverflow.com/questions/21070553/postmessage-still-broken-on-ie11). From `1.0.7`, we can bypass this by open a popup to our page, then redirect to Linked In authorization page, it should work fine. IE11 is supported in `1.0.7`. Following is step to support it. (If you don't have need to support IE, please ignore this part)
131141

142+
1. Pass prop `supportIE`
143+
2. Pass `redirectPath` which has path route to `LinkedInCallback` component, default value is `/linkedin` (for above example, `<Route exact path="/linkedin" component={LinkedInCallback} />` => `redirectPath="/linkedin"`)
132144

133-
1. Pass prop `supportIE`
134-
2. Pass `redirectPath` which has path route to `LinkedinPopUp` component, default value is `/linkedin` (for above example, `<Route exact path="/linkedin" component={LinkedInPopUp} />` => `redirectPath="/linkedin"`)
135145
```
136146
<LinkedIn
137147
...
@@ -142,41 +152,48 @@ Earlier, this package might not work in IE11. The reason is that if popup and op
142152
```
143153

144154
## Demo
155+
145156
- Source code: https://github.com/nvh95/react-linkedin-login-oauth2-demo/blob/master/src/App.js
146157
- Online demo: [https://stupefied-goldberg-b44ee5.netlify.com/](https://stupefied-goldberg-b44ee5.netlify.com/)
158+
147159
## Props
148-
`LinkedIn` component:
149160

150-
| Parameter | value | is required | default |
151-
|---------------|----------|:-----------:|:----------------------------------------------------------------------------------:|
152-
| clientId | string | yes | |
153-
| redirectUri | string | yes | |
154-
| scope | string | yes | 'r_emailaddress' |
161+
`LinkedIn` component:
162+
163+
| Parameter | value | is required | default |
164+
| ------------- | -------- | :---------: | :--------------------------------------------------------------------------------: |
165+
| clientId | string | yes | |
166+
| redirectUri | string | yes | |
167+
| scope | string | yes | 'r_emailaddress' |
155168
| | | | See your app scope in `https://www.linkedin.com/developers/apps/${yourAppId}/auth` |
156-
| onSuccess | function | yes | |
157-
| onFailure | function | yes | |
158-
| className | string | no | 'btn-linkedin' |
159-
| style | object | no | |
160-
| disabled | boolean | no | false |
161-
| onClick | function | no | |
162-
| children | function | no | Linked in Signin button |
163-
| renderElement | function | no | Render prop to use a custom element, use props.onClick |
164-
| supportIE | boolean | no | false |
165-
| redirectPath | function | no | /linkedin |
169+
| onSuccess | function | yes | |
170+
| onFailure | function | yes | |
171+
| className | string | no | 'btn-linkedin' |
172+
| style | object | no | |
173+
| disabled | boolean | no | false |
174+
| onClick | function | no | |
175+
| children | function | no | Linked in Signin button |
176+
| renderElement | function | no | Render prop to use a custom element, use props.onClick |
177+
| supportIE | boolean | no | false |
178+
| redirectPath | function | no | /linkedin |
166179

167180
Read more about props here [https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin/context#step-2-request-an-authorization-code](https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin/context#step-2-request-an-authorization-code)
168181

169-
`LinkedinPopUp` component:
170-
No parameters needed
182+
`LinkedInCallback` component:
183+
No parameters needed
184+
185+
## Issues
171186

172-
## Issues
173187
Please create an issue at [https://github.com/nvh95/react-linkedin-login-oauth2/issues](https://github.com/nvh95/react-linkedin-login-oauth2/issues). I will spend time to help you.
174188

175189
#### Failed to minify the code from this file: ./node_modules/react-linkedin-login-oauth2/node_modules/query-string/index.js:8
190+
176191
Please upgrade `react-linkedin-login-oauth2` to latest version following
192+
177193
```
178194
npm install --save react-linkedin-login-oauth2
179195
```
196+
180197
## Known issue
181198

182199
## Contributors ✨
@@ -203,4 +220,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
203220

204221
<!-- ALL-CONTRIBUTORS-LIST:END -->
205222

206-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
223+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

‎demo/src/index.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import React, { Component } from 'react';
2-
import { render } from 'react-dom';
3-
import { BrowserRouter, Route, Switch } from 'react-router-dom';
1+
import React, { Component } from "react";
2+
import { render } from "react-dom";
3+
import { BrowserRouter, Route, Switch } from "react-router-dom";
44

5-
import { LinkedInPopUp } from '../../src';
6-
import LinkedInPage from './LinkedInPage';
5+
import { LinkedInCallback } from "../../src";
6+
import LinkedInPage from "./LinkedInPage";
77

88
class Demo extends Component {
99
render() {
1010
return (
1111
<BrowserRouter>
12-
<Switch >
13-
<Route exact path="/linkedin" component={LinkedInPopUp} />
12+
<Switch>
13+
<Route exact path="/linkedin" component={LinkedInCallback} />
1414
<Route path="/" component={LinkedInPage} />
1515
</Switch>
1616
</BrowserRouter>
1717
);
1818
}
1919
}
2020

21-
render(<Demo />, document.querySelector('#demo'));
21+
render(<Demo />, document.querySelector("#demo"));

‎demo/src/index1.js‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
import React, { Component } from 'react';
2-
import { render } from 'react-dom';
3-
import QueryString from 'query-string';
4-
import { LinkedInPopUp } from '../../src';
5-
import LinkedInPage from './LinkedInPage';
1+
import React, { Component } from "react";
2+
import { render } from "react-dom";
3+
import { parse } from "../../src/utils";
4+
import { LinkedInCallback } from "../../src";
5+
import LinkedInPage from "./LinkedInPage";
66

77
class Demo1 extends Component {
88
render() {
9-
const params = QueryString.parse(window.location.search);
9+
const params = parse(window.location.search);
1010
if (params.code || params.error) {
11-
return (
12-
<LinkedInPopUp />
13-
);
11+
return <LinkedInCallback />;
1412
}
15-
return (
16-
<LinkedInPage />
17-
);
13+
return <LinkedInPage />;
1814
}
1915
}
2016

21-
render(<Demo1 />, document.querySelector('#demo'));
17+
render(<Demo1 />, document.querySelector("#demo"));

0 commit comments

Comments
 (0)