@portal-hq/gdrive-storage v4.1.0-beta-3

Portal Google Drive backup storage

The @portal-hq/gdrive-storage package contains a storage adapter intended for use with the @portal-hq/core package.

This storage adapter allows end users to save backup MPC shares to their Google Drive.

Basic usage

1. Install the package in your React Native project.

   yarn add @portal-hq/gdrive-storage
   
   # OR #
   
   npm install --save @portal-hq/gdrive-storage

2. Import the package into the component where you initialize the Portal class

   import Portal from '@portal-hq/core'
   import GoogleStorage from '@portal-hq/google-storage'

3. Register your storage adapter and initialize the Portal class

   const storage = new GoogleStorage({
     // Required for Android
     androidClientId: 'YOUR_ANDROID_CLIENT_ID',
     // Required for iOS
     iosClientId: 'YOUR_IOS_CLIENT_ID',
     // Optional
     folder: 'YOUR_CUSTOM_STORAGE_LOCATION',
   })
   const portal = new Portal({
     // ...your other config options
     backup: {
       gdrive: storage,
     },
   })

Dependency linking

Because this package uses the @react-native-google-signin/google-signin and @robinbobin/react-native-google-drive-api-wrapper packages (which contain native modules) there is some additional linking required to make it work with your React Native project.

Explicitly install the @react-native-google-signin/google-signin and @robinbobin/react-native-google-drive-api-wrapper packages in your project.

yarn add @react-native-google-signin/google-signin

# OR #

npm install --save @react-native-google-signin/google-signin

Setting up Google Drive Backups

For iOS

1. Create a new project here
2. Go here click ENABLE APIS AND SERVICES.
3. Find Google Drive and Enable it.
4. Click on Create Credentials and select Google Drive API and User Data for the type of data we are accessing.
5. Set up the OAuth Consent screen and add emails for testing
6. Click on Credentials on the left navigation bar and then CREATE CREDENTIALS -> OAuth Client ID
7. For Application Type select iOS and enter the applications names.
8. Get your Bundle ID from the react-native / iOS project.
9. Download your .plist and copy your REVERSED_CLIENT_ID to the URL Scheme section of your info.plist in xcode.
10. Rename the downloaded plist file to GoogleService-Info.plist and save to your /ios/ directory.
11. Save your clientId for usage in the PortalStorageProvider

12. Add the below to your info.plist:

      <key>CFBundleURLTypes</key>
      <array>
        <dict>
          <key>CFBundleTypeRole</key>
          <string>Editor</string>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>REVERSE_CLIENT_ID</string>
          </array>
        </dict>
      </array>

For Android

To get Android working, you'll need to create 2 (two) OAuth Client IDs. One will be of type Android and the other of type Web

1. Create a new project here

2. Go here click ENABLE APIS AND SERVICES.

3. Find Google Drive and Enable it.

4. To get started, go to Credentials and click Create Credentials

5. Select OAuth Client ID

6. Select Android from the list

7. Fill in the form as instructed, with Name, Package name, and SHA-1 from your keystore. Note that when testing you'll want to use your debug.keystore at /android/app/debug.keystore. However later on you'll need to switch this value when pushing it to the store. (See https://stackoverflow.com/questions/41194413/google-sign-in-for-android-release-vs-debug)

8. After successfully creating your Android OAuth Client ID, download the JSON:

   This will create a google-service.json file on your local machine.

9. Move the google-service.json file into the /android/app directory.

10. Go back to the Credentials screen and repeat step 2.

11. This time select Web Application:

12. All that you will need to input here is the Name. Then after you click Create, copy the value from Your Client ID.

13. Paste this into where you implement <PortalStorageProvider /> like so:

14. Now run a clean build / install, and you should be able to log into Google!

Once this is done, you can continue to develop your project like normal