1
1
import React , { useState , useCallback , useMemo } from 'react' ;
2
2
import { UIManager , LayoutAnimation , Alert } from 'react-native' ;
3
- import { authorize , refresh , revoke } from 'react-native-app-auth' ;
3
+ import { authorize , refresh , revoke , prefetchConfiguration } from 'react-native-app-auth' ;
4
4
import { Page , Button , ButtonContainer , Form , FormLabel , FormValue , Heading } from './components' ;
5
5
6
6
UIManager . setLayoutAnimationEnabledExperimental &&
7
7
UIManager . setLayoutAnimationEnabledExperimental ( true ) ;
8
8
9
9
type State = {
10
10
hasLoggedInOnce : boolean ,
11
+ provider : ?string ,
11
12
accessToken : ?string ,
12
13
accessTokenExpirationDate : ?string ,
13
14
refreshToken : ?string
14
15
} ;
15
16
16
- const config = {
17
- issuer : 'https://demo.identityserver.io' ,
18
- clientId : 'native.code' ,
19
- redirectUrl : 'io.identityserver.demo:/oauthredirect' ,
20
- additionalParameters : { } ,
21
- scopes : [ 'openid' , 'profile' , 'email' , 'offline_access' ]
22
-
23
- // serviceConfiguration: {
24
- // authorizationEndpoint: 'https://demo.identityserver.io/connect/authorize',
25
- // tokenEndpoint: 'https://demo.identityserver.io/connect/token',
26
- // revocationEndpoint: 'https://demo.identityserver.io/connect/revoke'
27
- // }
17
+ const configs = {
18
+ identityserver : {
19
+ issuer : 'https://demo.identityserver.io' ,
20
+ clientId : 'native.code' ,
21
+ redirectUrl : 'io.identityserver.demo:/oauthredirect' ,
22
+ additionalParameters : { } ,
23
+ scopes : [ 'openid' , 'profile' , 'email' , 'offline_access' ] ,
24
+
25
+ // serviceConfiguration: {
26
+ // authorizationEndpoint: 'https://demo.identityserver.io/connect/authorize',
27
+ // tokenEndpoint: 'https://demo.identityserver.io/connect/token',
28
+ // revocationEndpoint: 'https://demo.identityserver.io/connect/revoke'
29
+ // }
30
+ } ,
31
+ auth0 : {
32
+ // From https://openidconnect.net/
33
+ issuer : 'https://samples.auth0.com' ,
34
+ clientId : 'kbyuFDidLLm280LIwVFiazOqjO3ty8KH' ,
35
+ redirectUrl : 'https://openidconnect.net/callback' ,
36
+ additionalParameters : { } ,
37
+ scopes : [ 'openid' , 'profile' , 'email' , 'phone' , 'address' ] ,
38
+
39
+ // serviceConfiguration: {
40
+ // authorizationEndpoint: 'https://samples.auth0.com/authorize',
41
+ // tokenEndpoint: 'https://samples.auth0.com/oauth/token',
42
+ // revocationEndpoint: 'https://samples.auth0.com/oauth/revoke'
43
+ // }
44
+ }
28
45
} ;
29
46
30
47
const defaultAuthState = {
31
48
hasLoggedInOnce : false ,
49
+ provider : '' ,
32
50
accessToken : '' ,
33
51
accessTokenExpirationDate : '' ,
34
52
refreshToken : ''
35
53
} ;
36
54
37
55
export default ( ) => {
38
56
const [ authState , setAuthState ] = useState ( defaultAuthState ) ;
39
-
40
- const handleAuthorize = useCallback ( async ( ) => {
41
- try {
42
- const newAuthState = await authorize ( config ) ;
43
-
44
- setAuthState ( {
45
- hasLoggedInOnce : true ,
46
- ...newAuthState
47
- } ) ;
48
-
49
- } catch ( error ) {
50
- Alert . alert ( 'Failed to log in' , error . message ) ;
51
- }
52
- } , [ authState ] ) ;
57
+ React . useEffect ( ( ) => {
58
+ prefetchConfiguration ( {
59
+ warmAndPrefetchChrome : true ,
60
+ ...configs . identityserver
61
+ } ) ;
62
+ } , [ ] ) ;
63
+
64
+ const handleAuthorize = useCallback (
65
+ async provider => {
66
+ try {
67
+ const config = configs [ provider ] ;
68
+ const newAuthState = await authorize ( config ) ;
69
+
70
+ setAuthState ( {
71
+ hasLoggedInOnce : true ,
72
+ provider : provider ,
73
+ ...newAuthState
74
+ } ) ;
75
+ } catch ( error ) {
76
+ Alert . alert ( 'Failed to log in' , error . message ) ;
77
+ }
78
+ } ,
79
+ [ authState ]
80
+ ) ;
53
81
54
82
const handleRefresh = useCallback ( async ( ) => {
55
83
try {
84
+ const config = configs [ authState . provider ] ;
56
85
const newAuthState = await refresh ( config , {
57
86
refreshToken : authState . refreshToken
58
87
} ) ;
@@ -70,12 +99,14 @@ export default () => {
70
99
71
100
const handleRevoke = useCallback ( async ( ) => {
72
101
try {
102
+ const config = configs [ authState . provider ] ;
73
103
await revoke ( config , {
74
104
tokenToRevoke : authState . accessToken ,
75
105
sendClientId : true
76
106
} ) ;
77
107
78
108
setAuthState ( {
109
+ provider : '' ,
79
110
accessToken : '' ,
80
111
accessTokenExpirationDate : '' ,
81
112
refreshToken : ''
@@ -87,6 +118,7 @@ export default () => {
87
118
88
119
const showRevoke = useMemo ( ( ) => {
89
120
if ( authState . accessToken ) {
121
+ const config = configs [ authState . provider ] ;
90
122
if ( config . issuer || config . serviceConfiguration . revocationEndpoint ) {
91
123
return true ;
92
124
}
@@ -113,7 +145,18 @@ export default () => {
113
145
114
146
< ButtonContainer >
115
147
{ ! authState . accessToken ? (
116
- < Button onPress = { handleAuthorize } text = "Authorize" color = "#DA2536" />
148
+ < >
149
+ < Button
150
+ onPress = { ( ) => handleAuthorize ( 'identityserver' ) }
151
+ text = "Authorize IdentityServer"
152
+ color = "#DA2536"
153
+ />
154
+ < Button
155
+ onPress = { ( ) => handleAuthorize ( 'auth0' ) }
156
+ text = "Authorize Auth0"
157
+ color = "#DA2536"
158
+ />
159
+ </ >
117
160
) : null }
118
161
{ ! ! authState . refreshToken ? (
119
162
< Button onPress = { handleRefresh } text = "Refresh" color = "#24C2CB" />
0 commit comments