Multiple providers example

Author: Axel Eirola

Example/App.js

@@ -1,58 +1,87 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { UIManager, LayoutAnimation, Alert } from 'react-native';
-import { authorize, refresh, revoke } from 'react-native-app-auth';
+import { authorize, refresh, revoke, prefetchConfiguration } from 'react-native-app-auth';
 import { Page, Button, ButtonContainer, Form, FormLabel, FormValue, Heading } from './components';
 
 UIManager.setLayoutAnimationEnabledExperimental &&
   UIManager.setLayoutAnimationEnabledExperimental(true);
 
 type State = {
   hasLoggedInOnce: boolean,
+  provider: ?string,
   accessToken: ?string,
   accessTokenExpirationDate: ?string,
   refreshToken: ?string
 };
 
-const config = {
-  issuer: 'https://demo.identityserver.io',
-  clientId: 'native.code',
-  redirectUrl: 'io.identityserver.demo:/oauthredirect',
-  additionalParameters: {},
-  scopes: ['openid', 'profile', 'email', 'offline_access']
-
-  // serviceConfiguration: {
-  //   authorizationEndpoint: 'https://demo.identityserver.io/connect/authorize',
-  //   tokenEndpoint: 'https://demo.identityserver.io/connect/token',
-  //   revocationEndpoint: 'https://demo.identityserver.io/connect/revoke'
-  // }
+const configs = {
+  identityserver: {
+    issuer: 'https://demo.identityserver.io',
+    clientId: 'native.code',
+    redirectUrl: 'io.identityserver.demo:/oauthredirect',
+    additionalParameters: {},
+    scopes: ['openid', 'profile', 'email', 'offline_access'],
+
+    // serviceConfiguration: {
+    //   authorizationEndpoint: 'https://demo.identityserver.io/connect/authorize',
+    //   tokenEndpoint: 'https://demo.identityserver.io/connect/token',
+    //   revocationEndpoint: 'https://demo.identityserver.io/connect/revoke'
+    // }
+  },
+  auth0: {
+    // From https://openidconnect.net/
+    issuer: 'https://samples.auth0.com',
+    clientId: 'kbyuFDidLLm280LIwVFiazOqjO3ty8KH',
+    redirectUrl: 'https://openidconnect.net/callback',
+    additionalParameters: {},
+    scopes: ['openid', 'profile', 'email', 'phone', 'address'],
+
+    // serviceConfiguration: {
+    //   authorizationEndpoint: 'https://samples.auth0.com/authorize',
+    //   tokenEndpoint: 'https://samples.auth0.com/oauth/token',
+    //   revocationEndpoint: 'https://samples.auth0.com/oauth/revoke'
+    // }
+  }
 };
 
 const defaultAuthState = {
   hasLoggedInOnce: false,
+  provider: '',
   accessToken: '',
   accessTokenExpirationDate: '',
   refreshToken: ''
 };
 
 export default () => {
   const [authState, setAuthState] = useState(defaultAuthState);
-
-  const handleAuthorize = useCallback(async () => {
-    try {
-      const newAuthState = await authorize(config);
-
-      setAuthState({
-        hasLoggedInOnce: true,
-        ...newAuthState
-      });
-
-    } catch (error) {
-      Alert.alert('Failed to log in', error.message);
-    }
-  }, [authState]);
+  React.useEffect(() => {
+    prefetchConfiguration({
+      warmAndPrefetchChrome: true,
+      ...configs.identityserver
+    });
+  }, []);
+
+  const handleAuthorize = useCallback(
+    async provider => {
+      try {
+        const config = configs[provider];
+        const newAuthState = await authorize(config);
+
+        setAuthState({
+          hasLoggedInOnce: true,
+          provider: provider,
+          ...newAuthState
+        });
+      } catch (error) {
+        Alert.alert('Failed to log in', error.message);
+      }
+    },
+    [authState]
+  );
 
   const handleRefresh = useCallback(async () => {
     try {
+      const config = configs[authState.provider];
       const newAuthState = await refresh(config, {
         refreshToken: authState.refreshToken
       });
@@ -70,12 +99,14 @@ export default () => {
 
   const handleRevoke = useCallback(async () => {
     try {
+      const config = configs[authState.provider];
       await revoke(config, {
         tokenToRevoke: authState.accessToken,
         sendClientId: true
       });
 
       setAuthState({
+        provider: '',
         accessToken: '',
         accessTokenExpirationDate: '',
         refreshToken: ''
@@ -87,6 +118,7 @@ export default () => {
 
   const showRevoke = useMemo(() => {
     if (authState.accessToken) {
+      const config = configs[authState.provider];
       if (config.issuer || config.serviceConfiguration.revocationEndpoint) {
         return true;
       }
@@ -113,7 +145,18 @@ export default () => {
 
       <ButtonContainer>
         {!authState.accessToken ? (
-          <Button onPress={handleAuthorize} text="Authorize" color="#DA2536" />
+          <>
+            <Button
+              onPress={() => handleAuthorize('identityserver')}
+              text="Authorize IdentityServer"
+              color="#DA2536"
+            />
+            <Button
+              onPress={() => handleAuthorize('auth0')}
+              text="Authorize Auth0"
+              color="#DA2536"
+            />
+          </>
         ) : null}
         {!!authState.refreshToken ? (
           <Button onPress={handleRefresh} text="Refresh" color="#24C2CB" />