# 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.

   ```bash
   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
   ```jsx
   import Portal from '@portal-hq/core'
   import GoogleStorage from '@portal-hq/google-storage'
   ```
3. Register your storage adapter and initialize the Portal class
   ```typescript
   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.

```bash
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](https://console.cloud.google.com/)
2. Go [here](https://console.cloud.google.com/apis) 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:

    ```xml
      <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](https://console.cloud.google.com/)

2. Go [here](https://console.cloud.google.com/apis) click `ENABLE APIS AND SERVICES`.

3. Find `Google Drive` and Enable it.

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

   <img width="775" alt="image" src="https://user-images.githubusercontent.com/165256/186524418-68a4265c-38da-4fb9-8678-1d03708f0fe5.png">

5. Select `OAuth Client ID`

   <img width="435" alt="image" src="https://user-images.githubusercontent.com/165256/186525491-cb0ce953-b37c-437b-a9b7-65fc5259ea29.png">

6. Select `Android` from the list

   <img width="546" alt="image" src="https://user-images.githubusercontent.com/165256/186525608-3fa02a72-58b7-4e05-ab87-cc42941e0931.png">

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:

   <img width="432" alt="image" src="https://user-images.githubusercontent.com/165256/186526691-bd22a99b-f208-4068-a59a-bb6dff013ae9.png">

   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`:

   <img width="546" alt="image" src="https://user-images.githubusercontent.com/165256/186527349-8230147a-4107-43b5-a4ba-ad312aa84820.png">

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

   <img width="503" alt="image" src="https://user-images.githubusercontent.com/165256/186527630-d212baaa-ea76-45f7-9953-cd5c9df37171.png">

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

   <img width="202" alt="image" src="https://user-images.githubusercontent.com/165256/186528116-7097c52c-f951-4cac-8a13-920fa8022ae9.png">

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**_