#2 Integrasi OAuth FitBit to Access API's

Example/App.js

@@ -1,5 +1,5 @@
 import React, {useState, useCallback, useMemo} from 'react';
-import {Alert} from 'react-native';
+import {Alert, Text, View} from 'react-native';
 import {
   authorize,
   refresh,
@@ -15,6 +15,7 @@ import {
   FormValue,
   Heading,
 } from './components';
+import moment from "moment";
 
 const configs = {
   identityserver: {
@@ -31,18 +32,30 @@ const configs = {
     // }
   },
   auth0: {
-    // From https://openidconnect.net/
-    issuer: 'https://samples.auth0.com',
-    clientId: 'kbyuFDidLLm280LIwVFiazOqjO3ty8KH',
-    redirectUrl: 'https://openidconnect.net/callback',
-    additionalParameters: {},
-    scopes: ['openid', 'profile', 'email', 'phone', 'address'],
+    issuer: 'https://accounts.fitbit.com/login',
 
-    // serviceConfiguration: {
-    //   authorizationEndpoint: 'https://samples.auth0.com/authorize',
-    //   tokenEndpoint: 'https://samples.auth0.com/oauth/token',
-    //   revocationEndpoint: 'https://samples.auth0.com/oauth/revoke'
-    // }
+    clientId: '23RFP5',
+    clientSecret: '3c72a622ee8c73cc24caa063fdf3567f',
+    redirectUrl: 'com.goodeva.hub://oauthredirect',
+    scopes: [
+      'activity',
+      'heartrate',
+      'location',
+      'nutrition',
+      'oxygen_saturation',
+      'profile',
+      'respiratory_rate',
+      'settings',
+      'sleep',
+      'social',
+      'temperature',
+      'weight',
+    ],
+    serviceConfiguration: {
+      authorizationEndpoint: 'https://www.fitbit.com/oauth2/authorize',
+      tokenEndpoint: 'https://api.fitbit.com/oauth2/token',
+      revocationEndpoint: 'https://api.fitbit.com/oauth2/revoke',
+    },
   },
 };
 
@@ -129,45 +142,44 @@ const App = () => {
     return false;
   }, [authState]);
 
+  const generateDate = (dateGet) => {
+    return moment(dateGet).utc().format('dddd, DD MMMM YYYY HH:mm:ss') + ' WIB';
+  };
+
   return (
     <Page>
       {authState.accessToken ? (
-        <Form>
-          <FormLabel>accessToken</FormLabel>
+        <Form style={{ margin: 10 }}>
+          <FormLabel>Access Token :</FormLabel>
           <FormValue>{authState.accessToken}</FormValue>
-          <FormLabel>accessTokenExpirationDate</FormLabel>
-          <FormValue>{authState.accessTokenExpirationDate}</FormValue>
-          <FormLabel>refreshToken</FormLabel>
+          <FormLabel>Access Token Expired at :</FormLabel>
+          <FormValue>
+            {generateDate(authState.accessTokenExpirationDate)}
+          </FormValue>
+          <FormLabel>Refresh Token</FormLabel>
           <FormValue>{authState.refreshToken}</FormValue>
-          <FormLabel>scopes</FormLabel>
-          <FormValue>{authState.scopes.join(', ')}</FormValue>
         </Form>
       ) : (
-        <Heading>
-          {authState.hasLoggedInOnce ? 'Goodbye.' : 'Hello, stranger.'}
-        </Heading>
+        <Text
+          style={{ marginLeft: 10, marginRight: 10, marginTop: 10, color: '#000' }}
+        >
+          Good bye!
+        </Text>
       )}
 
       <ButtonContainer>
         {!authState.accessToken ? (
-          <>
-            <Button
-              onPress={() => handleAuthorize('identityserver')}
-              text="Authorize IdentityServer"
-              color="#DA2536"
-            />
-            <Button
-              onPress={() => handleAuthorize('auth0')}
-              text="Authorize Auth0"
-              color="#DA2536"
-            />
-          </>
+          <Button
+            onPress={() => handleAuthorize('auth0')}
+            text="Sign in"
+            color="#0349fc"
+          />
         ) : null}
         {authState.refreshToken ? (
-          <Button onPress={handleRefresh} text="Refresh" color="#24C2CB" />
+          <Button onPress={handleRefresh} text="Refresh Token" color="#24C2CB" />
         ) : null}
         {showRevoke ? (
-          <Button onPress={handleRevoke} text="Revoke" color="#EF525B" />
+          <Button onPress={handleRevoke} text="Sign out" color="#EF525B" />
         ) : null}
       </ButtonContainer>
     </Page>

Example/README.md

@@ -1,40 +1,27 @@
-# React Native App Auth Example
+# React Native App Auth Goodeva Hub
+Sebelum menjalankan project, lebih baik kita setup terlebih dahulu project dengan beberapa tahapan sebagai berikut
 
-![Demo](demo.gif)
+## Step #1: First configure
 
-## Running the iOS app
+```sh
+$ yarn add react-native-app-auth
+```
 
-After cloning the repository, run the following:
+Untuk memastikan jalankan command berikut juga
 
 ```sh
-cd react-native-app-auth/Example
-yarn
-(cd ios && pod install)
-npx react-native run-ios
+$ npm install react-native-app-auth --save
 ```
 
-## Running the Android app
-
-After cloning the repository, run the following:
+## Step #2: Repackage project
+Sebelumnya harus install paket manager
 
 ```sh
-cd react-native-app-auth/Example
-yarn
-npx react-native run-android
+$ npm i react-native-rename
 ```
 
-### Notes
-* You have to have the emulator open before running the last command. If you have difficulty getting the emulator to connect, open the project from Android Studio and run it through there.
-* ANDROID: When integrating with a project that utilizes deep linking (e.g. [React Navigation deep linking](https://reactnavigation.org/docs/deep-linking/#set-up-with-bare-react-native-projects)), update the redirectUrl in your config and the `appAuthRedirectScheme` value in build.gradle to use a custom scheme so that it differs from the scheme used in your deep linking intent-filter [as seen here](https://github.com/FormidableLabs/react-native-app-auth/issues/494#issuecomment-797394994).
+Lalu kemudian buat rename package seperti berikult
 
-Example:
-```
-// build.gradle
-android {
-  defaultConfig {
-    manifestPlaceholders = [
-      appAuthRedirectScheme: 'io.identityserver.demo.auth'
-    ]
-  }
-}
-```
+```sh
+$ npx react-native-rename@latest "new_name" -b "bundle_identifier"
+```

Example/android/app/build.gradle

@@ -73,15 +73,15 @@ android {
 
     compileSdkVersion rootProject.ext.compileSdkVersion
 
-    namespace "com.example"
+    namespace "com.goodeva.hub"
     defaultConfig {
-        applicationId "com.example"
+        applicationId "com.goodeva.hub"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
         manifestPlaceholders = [
-          appAuthRedirectScheme: 'io.identityserver.demo'
+          appAuthRedirectScheme: 'com.goodeva.hub'
         ]
     }
     signingConfigs {

Example/android/app/src/debug/java/com/example/ReactNativeFlipper.java → Example/android/app/src/debug/java/com/goodeva/hub/ReactNativeFlipper.java

@@ -4,7 +4,7 @@
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
  */
-package com.example;
+package com.goodeva.hub;
 
 import android.content.Context;
 import com.facebook.flipper.android.AndroidFlipperClient;

Example/android/app/src/main/AndroidManifest.xml

@@ -20,6 +20,16 @@
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
+
+        <intent-filter android:autoVerify="true">
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.DEFAULT" />
+            <category android:name="android.intent.category.BROWSABLE" />
+            <data android:scheme="com.goodeva.hub" />
+            <data
+              android:scheme="http"
+              android:host="localhost" />
+        </intent-filter>
       </activity>
     </application>
 </manifest>

Example/android/app/src/main/java/com/example/MainActivity.java → Example/android/app/src/main/java/com/goodeva/hub/MainActivity.java

@@ -1,4 +1,4 @@
-package com.example;
+package com.goodeva.hub;
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
@@ -13,7 +13,7 @@ public class MainActivity extends ReactActivity {
    */
   @Override
   protected String getMainComponentName() {
-    return "Example";
+    return "goodeva-hub";
   }
 
   /**

Example/android/app/src/main/java/com/example/MainApplication.java → Example/android/app/src/main/java/com/goodeva/hub/MainApplication.java

@@ -1,4 +1,4 @@
-package com.example;
+package com.goodeva.hub;
 
 import android.app.Application;
 import com.facebook.react.PackageList;

Example/android/app/src/main/res/values/strings.xml

@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">Example</string>
+    <string name="app_name">Goodeva Hub</string>
 </resources>

Example/android/app/src/release/java/com/example/ReactNativeFlipper.java → Example/android/app/src/release/java/com/goodeva/hub/ReactNativeFlipper.java

@@ -4,7 +4,7 @@
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
  */
-package com.example;
+package com.goodeva.hub;
 
 import android.content.Context;
 import com.facebook.react.ReactInstanceManager;

Example/android/settings.gradle

@@ -1,4 +1,4 @@
-rootProject.name = 'Example'
+rootProject.name = 'goodeva-hub'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')

Example/app.json

@@ -1,4 +1,4 @@
 {
-  "name": "Example",
-  "displayName": "Example"
+  "name": "goodeva-hub",
+  "displayName": "goodeva-hub"
 }

Example/components/ButtonContainer.js

@@ -5,13 +5,9 @@ const ButtonContainer = props => <View style={styles.view} {...props} />;
 
 const styles = StyleSheet.create({
   view: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
     alignSelf: 'flex-end',
     flexDirection: 'row',
-    margin: 5
+    margin: 5,
   }
 });
 

Example/components/Form.js

@@ -1,12 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-const Form = props => <View style={styles.form} {...props} />;
-
-const styles = StyleSheet.create({
-  form: {
-    flex: 1
-  },
-});
+const Form = props => <View {...props} />;
 
 export default Form;

Example/components/FormLabel.js

@@ -9,6 +9,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     backgroundColor: 'transparent',
     marginBottom: 10,
+    color: '#000',
   },
 });
 

Example/components/FormValue.js

@@ -15,6 +15,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     backgroundColor: 'transparent',
     marginBottom: 20,
+    color: '#83878f'
   }
 });
 

Example/components/Page.js

@@ -1,13 +1,10 @@
 import React from 'react';
-import { ImageBackground, StyleSheet, SafeAreaView } from 'react-native';
+import { ImageBackground, StyleSheet, SafeAreaView, Text, View } from 'react-native';
 
 const Page = ({ children }) => (
-  <ImageBackground
-    source={require('../assets/background.jpg')}
-    style={[styles.background, { width: '100%', height: '100%' }]}
-  >
-    <SafeAreaView style={styles.safe}>{children}</SafeAreaView>
-  </ImageBackground>
+  <View>
+    <SafeAreaView>{children}</SafeAreaView>
+  </View>
 );
 
 const styles = StyleSheet.create({
@@ -18,9 +15,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingBottom: 10,
   },
-  safe: {
-    flex: 1,
-  }
 });
 
 export default Page;

Example/ios/Podfile

@@ -25,7 +25,7 @@ if linkage != nil
   use_frameworks! :linkage => linkage.to_sym
 end
 
-target 'Example' do
+target 'goodevahub' do
   config = use_native_modules!
 
   # Flags change depending on the env values.
@@ -45,7 +45,7 @@ target 'Example' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
-  target 'ExampleTests' do
+  target 'goodevahubTests' do
     inherit! :complete
     # Pods for testing
   end