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>
2024-08-29 16:58:02 +05:30 · 2024-08-29 16:58:02 +05:30 · da0ea04475
parent 89513e3b4a
commit da0ea04475
12 changed files with 130 additions and 15 deletions
--- a/api/app/Http/Controllers/Auth/OAuthController.php
+++ b/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;
--- a/api/app/Http/Controllers/Settings/OAuthProviderController.php
+++ b/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
                ]
            );

--- a/api/app/Http/Resources/OAuthProviderResource.php
+++ b/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
        ];
    }
 }
--- a/api/app/Integrations/OAuth/Drivers/Contracts/OAuthDriver.php
+++ b/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;
 }
--- a/api/app/Integrations/OAuth/Drivers/OAuthGoogleDriver.php
+++ b/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]);
+    }
 }
--- a/api/app/Models/OAuthProvider.php
+++ b/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'
        ];
    }

--- a/api/database/migrations/2024_08_27_124933_add_scopes_to_oauth_providers.php
+++ b/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');
+        });
+    }
+};
--- a/api/database/migrations/2024_08_29_110048_update_oauth_providers_token_columns.php
+++ b/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();
+        });
+    }
+};
--- a/client/components/forms/FlatSelectInput.vue
+++ b/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">
-            {{ option[displayKey] }}
-          </p>
+          <UTooltip
+            :text="disableOptionsTooltip"
+            :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
      }

--- a/client/components/open/integrations/GoogleSheetsIntegration.vue
+++ b/client/components/open/integrations/GoogleSheetsIntegration.vue
@ -4,12 +4,17 @@
    :integration="props.integration"
    :form="form"
  >
-    <div class="my-5">
-      <select-input
+    <div class="mb-4">
+      <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)
--- a/client/pages/settings/connections.vue
+++ b/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"
--- a/client/stores/oauth_providers.js
+++ b/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,