11import React , { useState , useCallback , useMemo } from 'react' ;
22import { 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' ;
44import { Page , Button , ButtonContainer , Form , FormLabel , FormValue , Heading } from './components' ;
55
66UIManager . setLayoutAnimationEnabledExperimental &&
77 UIManager . setLayoutAnimationEnabledExperimental ( true ) ;
88
99type State = {
1010 hasLoggedInOnce : boolean ,
11+ provider : ?string ,
1112 accessToken : ?string ,
1213 accessTokenExpirationDate : ?string ,
1314 refreshToken : ?string
1415} ;
1516
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+ }
2845} ;
2946
3047const defaultAuthState = {
3148 hasLoggedInOnce : false ,
49+ provider : '' ,
3250 accessToken : '' ,
3351 accessTokenExpirationDate : '' ,
3452 refreshToken : ''
3553} ;
3654
3755export default ( ) => {
3856 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+ ) ;
5381
5482 const handleRefresh = useCallback ( async ( ) => {
5583 try {
84+ const config = configs [ authState . provider ] ;
5685 const newAuthState = await refresh ( config , {
5786 refreshToken : authState . refreshToken
5887 } ) ;
@@ -70,12 +99,14 @@ export default () => {
7099
71100 const handleRevoke = useCallback ( async ( ) => {
72101 try {
102+ const config = configs [ authState . provider ] ;
73103 await revoke ( config , {
74104 tokenToRevoke : authState . accessToken ,
75105 sendClientId : true
76106 } ) ;
77107
78108 setAuthState ( {
109+ provider : '' ,
79110 accessToken : '' ,
80111 accessTokenExpirationDate : '' ,
81112 refreshToken : ''
@@ -87,6 +118,7 @@ export default () => {
87118
88119 const showRevoke = useMemo ( ( ) => {
89120 if ( authState . accessToken ) {
121+ const config = configs [ authState . provider ] ;
90122 if ( config . issuer || config . serviceConfiguration . revocationEndpoint ) {
91123 return true ;
92124 }
@@ -113,7 +145,18 @@ export default () => {
113145
114146 < ButtonContainer >
115147 { ! 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+ </ >
117160 ) : null }
118161 { ! ! authState . refreshToken ? (
119162 < Button onPress = { handleRefresh } text = "Refresh" color = "#24C2CB" />
0 commit comments