Skip to content

Commit 459b395

Browse files
cuongdevjscuongdevjs
committed
#feat: ✨ upgrade Twitter flow oAuth (v2)
1 parent 0ba501f commit 459b395

15 files changed

Lines changed: 141 additions & 192 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,4 @@ dist
2222
npm-debug.log*
2323
yarn-debug.log*
2424
yarn-error.log*
25+
/src/helper/constants.ts

‎example/src/App.tsx‎

Lines changed: 6 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback, useRef, useState } from 'react'
1+
import React, { useCallback, useState } from 'react'
22
import './app.css'
33
import { User } from './User'
44
import {
@@ -11,8 +11,7 @@ import {
1111
LoginSocialMicrosoft,
1212
LoginSocialPinterest,
1313
LoginSocialTwitter,
14-
IResolveParams,
15-
TypeCrossFunction
14+
IResolveParams
1615
} from 'reactjs-social-login'
1716

1817
import {
@@ -28,69 +27,24 @@ import {
2827

2928
import { ReactComponent as PinterestLogo } from './assets/pinterest.svg'
3029

31-
const REDIRECT_URI = 'https://7923-123-16-241-177.ap.ngrok.io/account/login'
30+
const REDIRECT_URI = 'https://20d3-1-55-164-102.ap.ngrok.io/account/login'
3231
// const REDIRECT_URI = 'http://localhost:3000/account/login'
3332

3433
const App = () => {
3534
const [provider, setProvider] = useState('')
3635
const [profile, setProfile] = useState<any>()
37-
const amazonRef = useRef<TypeCrossFunction>(null!)
38-
const instagramRef = useRef<TypeCrossFunction>(null!)
39-
const googleRef = useRef<TypeCrossFunction>(null!)
40-
const facebookRef = useRef<TypeCrossFunction>(null!)
41-
const microsoftRef = useRef<TypeCrossFunction>(null!)
42-
const linkedinRef = useRef<TypeCrossFunction>(null!)
43-
const githubRef = useRef<TypeCrossFunction>(null!)
44-
const pinterestRef = useRef<TypeCrossFunction>(null!)
45-
const twitterRef = useRef<TypeCrossFunction>(null!)
4636

4737
const onLoginStart = useCallback(() => {
4838
alert('login start')
4939
}, [])
5040

51-
const onLogoutFailure = useCallback(() => {
52-
alert('logout fail')
53-
}, [])
54-
5541
const onLogoutSuccess = useCallback(() => {
5642
setProfile(null)
5743
setProvider('')
5844
alert('logout success')
5945
}, [])
6046

61-
const onLogout = useCallback(() => {
62-
switch (provider) {
63-
case 'amazon':
64-
amazonRef.current?.onLogout()
65-
break
66-
case 'facebook':
67-
facebookRef.current?.onLogout()
68-
break
69-
case 'google':
70-
googleRef.current?.onLogout()
71-
break
72-
case 'instagram':
73-
instagramRef.current?.onLogout()
74-
break
75-
case 'microsoft':
76-
microsoftRef.current?.onLogout()
77-
break
78-
case 'github':
79-
githubRef.current?.onLogout()
80-
break
81-
case 'pinterest':
82-
pinterestRef.current?.onLogout()
83-
break
84-
case 'twitter':
85-
twitterRef.current?.onLogout()
86-
break
87-
case 'linkedin':
88-
linkedinRef.current?.onLogout()
89-
break
90-
default:
91-
break
92-
}
93-
}, [provider])
47+
const onLogout = useCallback(() => {}, [])
9448

9549
return (
9650
<>
@@ -100,7 +54,6 @@ const App = () => {
10054
<div className={`App ${provider && profile ? 'hide' : ''}`}>
10155
<h1 className='title'>ReactJS Social Login</h1>
10256
<LoginSocialFacebook
103-
ref={facebookRef}
10457
appId={process.env.REACT_APP_FB_APP_ID || ''}
10558
fieldsProfile={
10659
'id,first_name,last_name,middle_name,name,name_format,picture,short_name,email,gender'
@@ -119,11 +72,8 @@ const App = () => {
11972
</LoginSocialFacebook>
12073

12174
<LoginSocialGoogle
122-
ref={googleRef}
12375
client_id={process.env.REACT_APP_GG_APP_ID || ''}
124-
onLogoutFailure={onLogoutFailure}
12576
onLoginStart={onLoginStart}
126-
onLogoutSuccess={onLogoutSuccess}
12777
onResolve={({ provider, data }: IResolveParams) => {
12878
setProvider(provider)
12979
setProfile(data)
@@ -136,7 +86,6 @@ const App = () => {
13686
</LoginSocialGoogle>
13787

13888
<LoginSocialAmazon
139-
ref={amazonRef}
14089
client_id={process.env.REACT_APP_AMAZON_APP_ID || ''}
14190
redirect_uri={REDIRECT_URI}
14291
onResolve={({ provider, data }: IResolveParams) => {
@@ -147,13 +96,11 @@ const App = () => {
14796
console.log(err)
14897
}}
14998
onLoginStart={onLoginStart}
150-
onLogoutSuccess={onLogoutSuccess}
15199
>
152100
<AmazonLoginButton />
153101
</LoginSocialAmazon>
154102

155103
<LoginSocialInstagram
156-
ref={instagramRef}
157104
client_id={process.env.REACT_APP_INSTAGRAM_APP_ID || ''}
158105
client_secret={process.env.REACT_APP_INSTAGRAM_APP_SECRET || ''}
159106
redirect_uri={REDIRECT_URI}
@@ -171,11 +118,9 @@ const App = () => {
171118
</LoginSocialInstagram>
172119

173120
<LoginSocialMicrosoft
174-
ref={microsoftRef}
175121
client_id={process.env.REACT_APP_MICROSOFT_APP_ID || ''}
176122
redirect_uri={REDIRECT_URI}
177123
onLoginStart={onLoginStart}
178-
onLogoutSuccess={onLogoutSuccess}
179124
onResolve={({ provider, data }: IResolveParams) => {
180125
setProvider(provider)
181126
setProfile(data)
@@ -188,12 +133,10 @@ const App = () => {
188133
</LoginSocialMicrosoft>
189134

190135
<LoginSocialLinkedin
191-
ref={linkedinRef}
192136
client_id={process.env.REACT_APP_LINKEDIN_APP_ID || ''}
193137
client_secret={process.env.REACT_APP_LINKEDIN_APP_SECRET || ''}
194138
redirect_uri={REDIRECT_URI}
195139
onLoginStart={onLoginStart}
196-
onLogoutSuccess={onLogoutSuccess}
197140
onResolve={({ provider, data }: IResolveParams) => {
198141
setProvider(provider)
199142
setProfile(data)
@@ -206,7 +149,6 @@ const App = () => {
206149
</LoginSocialLinkedin>
207150

208151
<LoginSocialGithub
209-
ref={githubRef}
210152
client_id={process.env.REACT_APP_GITHUB_APP_ID || ''}
211153
client_secret={process.env.REACT_APP_GITHUB_APP_SECRET || ''}
212154
redirect_uri={REDIRECT_URI}
@@ -223,12 +165,10 @@ const App = () => {
223165
<GithubLoginButton />
224166
</LoginSocialGithub>
225167
<LoginSocialPinterest
226-
ref={pinterestRef}
227168
client_id={process.env.REACT_APP_PINTEREST_APP_ID || ''}
228169
client_secret={process.env.REACT_APP_PINTEREST_APP_SECRET || ''}
229170
redirect_uri={REDIRECT_URI}
230171
onLoginStart={onLoginStart}
231-
onLogoutSuccess={onLogoutSuccess}
232172
onResolve={({ provider, data }: IResolveParams) => {
233173
setProvider(provider)
234174
setProfile(data)
@@ -247,9 +187,8 @@ const App = () => {
247187
</LoginSocialPinterest>
248188

249189
<LoginSocialTwitter
250-
ref={twitterRef}
251-
client_id={process.env.REACT_APP_TWITTER_API_KEY || ''}
252-
client_secret={process.env.REACT_APP_TWITTER_APP_SECRET || ''}
190+
client_id={process.env.REACT_APP_TWITTER_V2_APP_KEY || ''}
191+
// client_secret={process.env.REACT_APP_TWITTER_V2_APP_SECRET || ''}
253192
redirect_uri={REDIRECT_URI}
254193
onLoginStart={onLoginStart}
255194
onLogoutSuccess={onLogoutSuccess}

‎example/src/User.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ interface Props {
99
export const User = memo(({ provider, profile, onLogout }: Props) => {
1010
const avatar =
1111
profile?.avatar ||
12+
profile?.profile_image_url ||
1213
profile?.avatar_url ||
1314
profile?.picture ||
1415
profile?.picture?.data?.url ||

‎example/src/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import './index.css'
22

33
import React from 'react'
4-
import ReactDOM from 'react-dom'
4+
import { createRoot } from 'react-dom/client'
55
import App from './App'
66

7-
ReactDOM.render(<App />, document.getElementById('root'))
7+
const container: HTMLElement = document.getElementById('root')!
8+
const root = createRoot(container)
9+
root.render(<App />)

‎package-lock.json‎

Lines changed: 43 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
"@types/crypto-js": "^3.1.43",
4747
"@types/jest": "^25.1.4",
4848
"@types/node": "^12.12.38",
49-
"@types/react": "^16.9.27",
50-
"@types/react-dom": "^16.9.7",
49+
"@types/react": "^18.0.15",
50+
"@types/react-dom": "^18.0.6",
5151
"@typescript-eslint/eslint-plugin": "^2.26.0",
5252
"@typescript-eslint/parser": "^2.26.0",
5353
"babel-eslint": "^10.0.3",
@@ -67,6 +67,8 @@
6767
"microbundle-crl": "^0.13.10",
6868
"npm-run-all": "^4.1.5",
6969
"prettier": "^2.0.4",
70+
"react": "^18.2.0",
71+
"react-dom": "^18.2.0",
7072
"react-scripts": "^3.4.1",
7173
"react-social-login-buttons": "^3.5.1",
7274
"typescript": "^3.7.5"

‎src/LoginSocialAmazon/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export const LoginSocialAmazon = ({
8383
)
8484

8585
const getUserInfo = useCallback(
86-
async (res) => {
86+
async (res: objectType) => {
8787
fetch(`https://api.amazon.com/user/profile`, {
8888
headers: {
8989
Authorization: `Bearer ${res.access_token}`

‎src/LoginSocialFacebook/index.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const LoginSocialFacebook = ({
5454
}: Props) => {
5555
const scriptNodeRef = useRef<HTMLElement>(null!)
5656
const [isSdkLoaded, setIsSdkLoaded] = useState(false)
57+
const [isProcessing, setIsProcessing] = useState(false)
5758

5859
useEffect(() => {
5960
!isSdkLoaded && load()
@@ -126,6 +127,7 @@ const LoginSocialFacebook = ({
126127
} else {
127128
onReject(response)
128129
}
130+
setIsProcessing(false)
129131
},
130132
[getMe, onReject]
131133
)
@@ -163,12 +165,14 @@ const LoginSocialFacebook = ({
163165
])
164166

165167
const loginFB = useCallback(() => {
166-
if (!isSdkLoaded) return
168+
if (!isSdkLoaded || isProcessing) return
167169

168170
if (!_window.FB) {
169171
load()
170172
onReject("Fb isn't loaded!")
173+
setIsProcessing(false)
171174
} else {
175+
setIsProcessing(true)
172176
onLoginStart && onLoginStart()
173177
_window.FB.login(handleResponse, {
174178
scope,
@@ -177,14 +181,15 @@ const LoginSocialFacebook = ({
177181
})
178182
}
179183
}, [
180-
isSdkLoaded,
181184
load,
185+
scope,
182186
onReject,
187+
auth_type,
188+
isSdkLoaded,
183189
onLoginStart,
184-
handleResponse,
185-
scope,
190+
isProcessing,
186191
return_scopes,
187-
auth_type
192+
handleResponse
188193
])
189194

190195
return (

0 commit comments

Comments
 (0)