Dynamic OauthDriver scope (#544)

* Dynamic OauthDriver scope

* support migration for mysql

* Refactor default scopes for integrations

* Small UI changes

* fix flet select tooltip

* fix linter

* Fix google token size in DB

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

api/app/Http/Controllers/Auth/OAuthController.php

@@ -93,6 +93,7 @@ class OAuthController extends Controller
             $oauthProvider->update([
                 'access_token' => $socialiteUser->token,
                 'refresh_token' => $socialiteUser->refreshToken,
+                'scopes' => $socialiteUser->approvedScopes
             ]);
 
             return $oauthProvider->user;
@@ -139,6 +140,7 @@ class OAuthController extends Controller
                 'refresh_token' => $socialiteUser->refreshToken,
                 'name' => $socialiteUser->getName(),
                 'email' => $socialiteUser->getEmail(),
+                'scopes' => $socialiteUser->approvedScopes
             ]
         );
         return $user;

api/app/Http/Controllers/Settings/OAuthProviderController.php

@@ -26,8 +26,10 @@ class OAuthProviderController extends Controller
         $userId = Auth::id();
         cache()->put("oauth-intention:{$userId}", $request->input('intention'), 60 * 5);
 
+        // Connecting an account for integrations purposes
+        // Adding full scopes to the driver
         return response()->json([
-            'url' => $service->getDriver()->getRedirectUrl(),
+            'url' => $service->getDriver()->fullScopes()->getRedirectUrl(),
         ]);
     }
 
@@ -47,6 +49,7 @@ class OAuthProviderController extends Controller
                     'refresh_token' => $driverUser->refreshToken,
                     'name' => $driverUser->getName(),
                     'email' => $driverUser->getEmail(),
+                    'scopes' => $driverUser->approvedScopes
                 ]
             );
 

api/app/Http/Resources/OAuthProviderResource.php

@@ -32,6 +32,7 @@ class OAuthProviderResource extends JsonResource
                 fn () => OAuthProviderUserResource::make($this->resource->user),
                 null,
             ),
+            'scopes' => $this->resource->scopes
         ];
     }
 }

api/app/Integrations/OAuth/Drivers/Contracts/OAuthDriver.php

@@ -7,7 +7,14 @@ use Laravel\Socialite\Contracts\User;
 interface OAuthDriver
 {
     public function getRedirectUrl(): string;
-    public function setRedirectUrl($url): self;
+    public function setRedirectUrl(string $url): self;
+    public function setScopes(array $scopes): self;
     public function getUser(): User;
     public function canCreateUser(): bool;
+
+    /**
+     * Set up all the scopes required by OpnForm for various integrations.
+     * This method configures the necessary permissions for the current OAuth driver.
+     */
+    public function fullScopes(): self;
 }

api/app/Integrations/OAuth/Drivers/OAuthGoogleDriver.php

@@ -11,6 +11,7 @@ use Laravel\Socialite\Two\GoogleProvider;
 class OAuthGoogleDriver implements OAuthDriver
 {
     private ?string $redirectUrl = null;
+    private ?array $scopes = [];
 
     protected GoogleProvider $provider;
 
@@ -22,7 +23,7 @@ class OAuthGoogleDriver implements OAuthDriver
     public function getRedirectUrl(): string
     {
         return $this->provider
-            ->scopes([Sheets::DRIVE_FILE])
+            ->scopes($this->scopes ?? [])
             ->stateless()
             ->redirectUrl($this->redirectUrl ?? config('services.google.redirect'))
             ->with([
@@ -46,10 +47,20 @@ class OAuthGoogleDriver implements OAuthDriver
         return true;
     }
 
-    public function setRedirectUrl($url): OAuthDriver
+    public function setRedirectUrl(string $url): OAuthDriver
     {
         $this->redirectUrl = $url;
         return $this;
     }
 
+    public function setScopes(array $scopes): OAuthDriver
+    {
+        $this->scopes = $scopes;
+        return $this;
+    }
+
+    public function fullScopes(): OAuthDriver
+    {
+        return $this->setScopes([Sheets::DRIVE_FILE]);
+    }
 }

api/app/Models/OAuthProvider.php

@@ -30,7 +30,8 @@ class OAuthProvider extends Model
      * @var array
      */
     protected $hidden = [
-        'access_token', 'refresh_token',
+        'access_token',
+        'refresh_token',
     ];
 
     protected function casts()
@@ -38,6 +39,7 @@ class OAuthProvider extends Model
         return [
             'provider' => OAuthProviderService::class,
             'token_expires_at' => 'datetime',
+            'scopes' => 'array'
         ];
     }
 

api/database/migrations/2024_08_27_124933_add_scopes_to_oauth_providers.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Query\Expression;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        $driver = DB::getDriverName();
+
+        Schema::table('oauth_providers', function (Blueprint $table) use ($driver) {
+            if ($driver === 'mysql') {
+                $table->json('scopes')->default(new Expression('(JSON_OBJECT())'));
+            } else {
+                $table->json('scopes')->default('{}');
+            }
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('oauth_providers', function (Blueprint $table) {
+            $table->dropColumn('scopes');
+        });
+    }
+};

api/database/migrations/2024_08_29_110048_update_oauth_providers_token_columns.php

@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('oauth_providers', function (Blueprint $table) {
+            $table->text('access_token')->change();
+            $table->text('refresh_token')->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('oauth_providers', function (Blueprint $table) {
+            $table->string('access_token')->change();
+            $table->string('refresh_token')->change();
+        });
+    }
+};

client/components/forms/FlatSelectInput.vue

@@ -33,6 +33,9 @@
             theme.FlatSelectInput.spacing.vertical,
             theme.FlatSelectInput.fontSize,
             theme.FlatSelectInput.option,
+            {
+              '!cursor-not-allowed !bg-gray-200': disableOptions.includes(option[optionKey]),
+            },
           ]"
           @click="onSelect(option[optionKey])"
         >
@@ -50,9 +53,15 @@
               :theme="theme"
             />
           </template>
-          <p class="flex-grow">
+          <UTooltip
-            {{ option[displayKey] }}
+            :text="disableOptionsTooltip"
-          </p>
+            :prevent="!disableOptions.includes(option[optionKey])"
+            class="w-full"
+          >
+            <p class="flex-grow">
+              {{ option[displayKey] }}
+            </p>
+          </UTooltip>
         </div>
       </template>
       <div
@@ -98,7 +107,9 @@ export default {
     emitKey: {type: String, default: "value"},
     displayKey: {type: String, default: "name"},
     loading: {type: Boolean, default: false},
-    multiple: {type: Boolean, default: false},
+    multiple: { type: Boolean, default: false },
+    disableOptions: { type: Array, default: () => [] },
+    disableOptionsTooltip: {type: String, default: "Not allowed"},
   },
   setup(props, context) {
     return {
@@ -111,7 +122,7 @@ export default {
   computed: {},
   methods: {
     onSelect(value) {
-      if (this.disabled) {
+      if (this.disabled || this.disableOptions.includes(value)) {
         return
       }
 

client/components/open/integrations/GoogleSheetsIntegration.vue

@@ -4,12 +4,17 @@
     :integration="props.integration"
     :form="form"
   >
-    <div class="my-5">
+    <div class="mb-4">
-      <select-input
+      <p class="text-gray-500 mb-4">
+        Adds new entry to spreadsheets on each form submission.
+      </p>
+      <FlatSelectInput
         v-if="providers.length"
         v-model="integrationData.oauth_id"
         name="provider"
         :options="providers"
+        :disable-options="disableProviders"
+        disable-options-tooltip="Re-connect account to fix permissions"
         display-key="email"
         option-key="id"
         emit-key="id"
@@ -19,8 +24,8 @@
         <template #help>
           <InputHelp>
             <span>
-              Add an entry to spreadsheets on each form submission.
               <NuxtLink
+                class="text-blue-500"
                 :to="{ name: 'settings-connections' }"
               >
                 Click here
@@ -29,7 +34,7 @@
             </span>
           </InputHelp>
         </template>
-      </select-input>
+      </FlatSelectInput>
 
       <v-button
         v-else
@@ -44,6 +49,7 @@
 </template>
 
 <script setup>
+import FlatSelectInput from '~/components/forms/FlatSelectInput.vue'
 import IntegrationWrapper from './components/IntegrationWrapper.vue'
 
 const props = defineProps({
@@ -55,6 +61,7 @@ const props = defineProps({
 
 const providersStore = useOAuthProvidersStore()
 const providers = computed(() => providersStore.getAll.filter(provider => provider.provider == 'google'))
+const disableProviders = computed(() => providersStore.getAll.filter(provider => !provider.scopes.includes(providersStore.googleDrivePermission)).map((provider) => provider.id))
 
 function connect () {
   providersStore.connect('google', true)

client/pages/settings/connections.vue

@@ -8,7 +8,7 @@
         <small class="text-gray-600">Manage your external connections.</small>
       </div>
       <UButton
-        label="Connect new account"
+        label="Connect account"
         icon="i-heroicons-plus"
         :loading="loading"
         @click="providerModal = true"

client/stores/oauth_providers.js

@@ -7,6 +7,8 @@ export const useOAuthProvidersStore = defineStore("oauth_providers", () => {
   const contentStore = useContentStore()
   const alert = useAlert()
 
+  const googleDrivePermission = 'https://www.googleapis.com/auth/drive.file'
+
   const services = computed(() => {
     return [
       {
@@ -92,6 +94,7 @@ export const useOAuthProvidersStore = defineStore("oauth_providers", () => {
 
   return {
     ...contentStore,
+    googleDrivePermission,
     services,
     getService,
     fetchOAuthProviders,