Add setup wizard to all oauth providers (#1801)

app/Extensions/OAuth/Schemas/AuthentikSchema.php

@@ -4,6 +4,10 @@ namespace App\Extensions\OAuth\Schemas;
 
 use Filament\Forms\Components\ColorPicker;
 use Filament\Forms\Components\TextInput;
+use Filament\Infolists\Components\TextEntry;
+use Filament\Schemas\Components\Wizard\Step;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\HtmlString;
 use SocialiteProviders\Authentik\Provider;
 
 final class AuthentikSchema extends OAuthSchema
@@ -20,11 +24,27 @@ final class AuthentikSchema extends OAuthSchema
 
     public function getServiceConfig(): array
     {
-        return [
+        return array_merge(parent::getServiceConfig(), [
             'base_url' => env('OAUTH_AUTHENTIK_BASE_URL'),
-            'client_id' => env('OAUTH_AUTHENTIK_CLIENT_ID'),
+        ]);
-            'client_secret' => env('OAUTH_AUTHENTIK_CLIENT_SECRET'),
+    }
-        ];
+
+    public function getSetupSteps(): array
+    {
+        return array_merge([
+            Step::make('Create Authentik Application')
+                ->schema([
+                    TextEntry::make('create_application')
+                        ->hiddenLabel()
+                        ->state(new HtmlString(Blade::render('<p>On your Authentik dashboard select <b>Applications</b>, then select <b>Create with Provider</b>.</p><p>On the creation step select <b>OAuth2/OpenID Provider</b> and on the configure step set <b>Redirect URIs/Origins</b> to the value below.</p>'))),
+                    TextInput::make('_noenv_callback')
+                        ->label('Callback URL')
+                        ->dehydrated()
+                        ->disabled()
+                        ->hintCopy()
+                        ->default(fn () => url('/auth/oauth/callback/authentik')),
+                ]),
+        ], parent::getSetupSteps());
     }
 
     public function getSettingsForm(): array

app/Extensions/OAuth/Schemas/BitbucketSchema.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Extensions\OAuth\Schemas;
+
+use Filament\Forms\Components\TextInput;
+use Filament\Infolists\Components\TextEntry;
+use Filament\Schemas\Components\Wizard\Step;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\HtmlString;
+
+final class BitbucketSchema extends OAuthSchema
+{
+    public function getId(): string
+    {
+        return 'bitbucket';
+    }
+
+    public function getSetupSteps(): array
+    {
+        return array_merge([
+            Step::make('Register new Bitbucket Consumer')
+                ->schema([
+                    TextEntry::make('create_application')
+                        ->hiddenLabel()
+                        ->state(new HtmlString(Blade::render('<p>Visit the <x-filament::link href="https://support.atlassian.com/bitbucket-cloud/docs/use-oauth-on-bitbucket-cloud" target="_blank">Bitbucket OAuth Documentation</x-filament::link> and follow the steps in <b>Create a consumer</b>.</p><p>For the <b>Callback URL</b> use the value below.</p>'))),
+                    TextInput::make('_noenv_callback')
+                        ->label('Callback URL')
+                        ->dehydrated()
+                        ->disabled()
+                        ->hintCopy()
+                        ->default(fn () => url('/auth/oauth/callback/bitbucket')),
+                ]),
+        ], parent::getSetupSteps());
+    }
+
+    public function getIcon(): string
+    {
+        return 'tabler-brand-bitbucket-f';
+    }
+
+    public function getHexColor(): string
+    {
+        return '#205081';
+    }
+}

app/Extensions/OAuth/Schemas/FacebookSchema.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Extensions\OAuth\Schemas;
+
+use Filament\Forms\Components\TextInput;
+use Filament\Infolists\Components\TextEntry;
+use Filament\Schemas\Components\Wizard\Step;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\HtmlString;
+
+final class FacebookSchema extends OAuthSchema
+{
+    public function getId(): string
+    {
+        return 'facebook';
+    }
+
+    public function getSetupSteps(): array
+    {
+        return array_merge([
+            Step::make('Register new Facebook Application')
+                ->schema([
+                    TextEntry::make('create_application')
+                        ->hiddenLabel()
+                        ->state(new HtmlString(Blade::render('<p>Visit the <x-filament::link href="https://developers.facebook.com/apps" target="_blank">Facebook Developer Dashboard</x-filament::link> and select or create a new app you will use for authentication. Make sure to have "Authenticate and request data from users with Facebook Login" as one of the Use Cases.</p><p>Once selected go to <b>Use Cases</b> and customize "Authenticate and request data from users with Facebook Login", from there go to <b>Settings</b> and add <b>Valid OAuth Redirect URIs</b> using the value below.</p>'))),
+                    TextInput::make('_noenv_callback')
+                        ->label('Valid OAuth Redirect URIs')
+                        ->dehydrated()
+                        ->disabled()
+                        ->hintCopy()
+                        ->default(fn () => url('/auth/oauth/callback/facebook')),
+                    TextEntry::make('get_app_info')
+                        ->hiddenLabel()
+                        ->state(new HtmlString(Blade::render('<p>To obtain the OAuth values go to <b>App Settings > Basic</b>.</p>'))),
+                ]),
+        ], parent::getSetupSteps());
+    }
+
+    public function getIcon(): string
+    {
+        return 'tabler-brand-facebook-f';
+    }
+
+    public function getHexColor(): string
+    {
+        return '#1877f2';
+    }
+}

app/Extensions/OAuth/Schemas/GoogleSchema.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Extensions\OAuth\Schemas;
+
+use Filament\Forms\Components\TextInput;
+use Filament\Infolists\Components\TextEntry;
+use Filament\Schemas\Components\Wizard\Step;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\HtmlString;
+
+final class GoogleSchema extends OAuthSchema
+{
+    public function getId(): string
+    {
+        return 'google';
+    }
+
+    public function getSetupSteps(): array
+    {
+        return array_merge([
+            Step::make('Register new OAuth client')
+                ->schema([
+                    TextEntry::make('create_application')
+                        ->hiddenLabel()
+                        ->state(new HtmlString(Blade::render('<p>Visit the <x-filament::link href="https://console.developers.google.com/" target="_blank">Google API Console</x-filament::link> and create or select the project you want to use.</p><p>Navigate or search <b>Credentials</b>, click on the <b>Create Credentials</b> button and select <b>OAuth client ID</b>. On the Application type select <b>Web Application</b>.</p><p>On <b>Authorized JavaScript origins</b> and <b>Authorized redirect URIs</b> add and use the values below.</p>'))),
+                    TextInput::make('_noenv_origin')
+                        ->label('Authorized JavaScript origins')
+                        ->dehydrated()
+                        ->disabled()
+                        ->hintCopy()
+                        ->default(fn () => url('')),
+                    TextInput::make('_noenv_callback')
+                        ->label('Authorized redirect URIs')
+                        ->dehydrated()
+                        ->disabled()
+                        ->hintCopy()
+                        ->default(fn () => url('/auth/oauth/callback/google')),
+                    TextEntry::make('register_application')
+                        ->hiddenLabel()
+                        ->state(new HtmlString('<p>When you filled all fields click on <b>Create</b>.</p>')),
+                ]),
+        ], parent::getSetupSteps());
+    }
+
+    public function getIcon(): string
+    {
+        return 'tabler-brand-google-f';
+    }
+
+    public function getHexColor(): string
+    {
+        return '#4285f4';
+    }
+}

app/Extensions/OAuth/Schemas/LinkedinSchema.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Extensions\OAuth\Schemas;
+
+use Filament\Forms\Components\TextInput;
+use Filament\Infolists\Components\TextEntry;
+use Filament\Schemas\Components\Wizard\Step;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\HtmlString;
+
+final class LinkedinSchema extends OAuthSchema
+{
+    public function getId(): string
+    {
+        return 'linkedin';
+    }
+
+    public function getSetupSteps(): array
+    {
+        return array_merge([
+            Step::make('Obtain Linkedin App OAuth Config')
+                ->schema([
+                    TextEntry::make('create_application')
+                        ->hiddenLabel()
+                        ->state(new HtmlString(Blade::render('<p><x-filament::link href="https://www.linkedin.com/developers/apps/new" target="_blank">Create</x-filament::link> or <x-filament::link href="https://www.linkedin.com/developers/apps" target="_blank">select</x-filament::link> the one you will be using for authentication.</p><p>Select the <b>Auth</b> tab and set <b>Authorized redirect URLs for your app</b> to the value below.</p>'))),
+                    TextInput::make('_noenv_callback')
+                        ->label('Authorized redirect URL')
+                        ->dehydrated()
+                        ->disabled()
+                        ->hintCopy()
+                        ->default(fn () => url('/auth/oauth/callback/linkedin')),
+                ]),
+        ], parent::getSetupSteps());
+    }
+
+    public function getIcon(): string
+    {
+        return 'tabler-brand-linkedin-f';
+    }
+
+    public function getHexColor(): string
+    {
+        return '#0a66c2';
+    }
+}

app/Extensions/OAuth/Schemas/SlackSchema.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Extensions\OAuth\Schemas;
+
+use Filament\Forms\Components\TextInput;
+use Filament\Infolists\Components\TextEntry;
+use Filament\Schemas\Components\Wizard\Step;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\HtmlString;
+
+final class SlackSchema extends OAuthSchema
+{
+    public function getId(): string
+    {
+        return 'slack';
+    }
+
+    public function getSetupSteps(): array
+    {
+        return array_merge([
+            Step::make('Register new Slack OAuth')
+                ->schema([
+                    TextEntry::make('create_application')
+                        ->hiddenLabel()
+                        ->state(new HtmlString(Blade::render('<p><x-filament::link href="https://api.slack.com/apps?new_app=1" target="_blank">Create</x-filament::link> a slack app or <x-filament::link href="https://api.slack.com/apps" target="_blank">select</x-filament::link> the one you will be using for authentication.</p><p>Navigate to the <b>OAuth & Permissions</b> section and configure the <b>Redirect URL</b> using the value below.</p>'))),
+                    TextInput::make('_noenv_callback')
+                        ->label('Redirect URL')
+                        ->dehydrated()
+                        ->disabled()
+                        ->hintCopy()
+                        ->default(fn () => url('/auth/oauth/callback/slack')),
+                ]),
+        ], parent::getSetupSteps());
+    }
+
+    public function getIcon(): string
+    {
+        return 'tabler-brand-slack';
+    }
+
+    public function getHexColor(): string
+    {
+        return '#6ecadc';
+    }
+}

app/Extensions/OAuth/Schemas/XSchema.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Extensions\OAuth\Schemas;
+
+use Filament\Forms\Components\TextInput;
+use Filament\Infolists\Components\TextEntry;
+use Filament\Schemas\Components\Wizard\Step;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\HtmlString;
+
+final class XSchema extends OAuthSchema
+{
+    public function getId(): string
+    {
+        return 'x';
+    }
+
+    public function getSetupSteps(): array
+    {
+        return array_merge([
+            Step::make('Register new X App')
+                ->schema([
+                    TextEntry::make('create_application')
+                        ->hiddenLabel()
+                        ->state(new HtmlString(Blade::render('<p>Visit the <x-filament::link href="https://developer.x.com/en/portal/dashboard" target="_blank">X Developer Dashboard</x-filament::link> and create or select the project app you want to use.</p><p>Go to the app\'s settings and set up <b>User authentication</b> if not yet. Make sure to select <b>Web App</b> as the type of app.</p><p>For the <b>Callback URI / Redirect URL</b> and <b>Website URL</b> set it using the value below.</p>'))),
+                    TextInput::make('_noenv_origin')
+                        ->label('Website URL')
+                        ->dehydrated()
+                        ->disabled()
+                        ->hintCopy()
+                        ->default(fn () => url('')),
+                    TextInput::make('_noenv_callback')
+                        ->label('Callback URI / Redirect URL')
+                        ->dehydrated()
+                        ->disabled()
+                        ->hintCopy()
+                        ->default(fn () => url('/auth/oauth/callback/x')),
+                    TextEntry::make('register_application')
+                        ->hiddenLabel()
+                        ->state(new HtmlString('<p>If you have already set this up go to your app\'s <b>Keys and tokens</b> and obtain the Client ID and Secret there.</p>')),
+                ]),
+        ], parent::getSetupSteps());
+    }
+
+    public function getIcon(): string
+    {
+        return 'tabler-brand-x';
+    }
+
+    public function getHexColor(): string
+    {
+        return '#1da1f2';
+    }
+}

app/Providers/Extensions/OAuthServiceProvider.php

@@ -4,11 +4,16 @@ namespace App\Providers\Extensions;
 
 use App\Extensions\OAuth\OAuthService;
 use App\Extensions\OAuth\Schemas\AuthentikSchema;
-use App\Extensions\OAuth\Schemas\CommonSchema;
+use App\Extensions\OAuth\Schemas\BitbucketSchema;
 use App\Extensions\OAuth\Schemas\DiscordSchema;
+use App\Extensions\OAuth\Schemas\FacebookSchema;
 use App\Extensions\OAuth\Schemas\GithubSchema;
 use App\Extensions\OAuth\Schemas\GitlabSchema;
+use App\Extensions\OAuth\Schemas\GoogleSchema;
+use App\Extensions\OAuth\Schemas\LinkedinSchema;
+use App\Extensions\OAuth\Schemas\SlackSchema;
 use App\Extensions\OAuth\Schemas\SteamSchema;
+use App\Extensions\OAuth\Schemas\XSchema;
 use Illuminate\Support\ServiceProvider;
 
 class OAuthServiceProvider extends ServiceProvider
@@ -19,14 +24,14 @@ class OAuthServiceProvider extends ServiceProvider
             $service = new OAuthService();
 
             // Default OAuth providers included with Socialite
-            $service->register(new CommonSchema('facebook', icon: 'tabler-brand-facebook-f', hexColor: '#1877f2'));
+            $service->register(new FacebookSchema());
-            $service->register(new CommonSchema('x', icon: 'tabler-brand-x-f', hexColor: '#1da1f2'));
+            $service->register(new XSchema());
-            $service->register(new CommonSchema('linkedin', icon: 'tabler-brand-linkedin-f', hexColor: '#0a66c2'));
+            $service->register(new LinkedinSchema());
-            $service->register(new CommonSchema('google', icon: 'tabler-brand-google-f', hexColor: '#4285f4'));
+            $service->register(new GoogleSchema());
             $service->register(new GithubSchema());
             $service->register(new GitlabSchema());
-            $service->register(new CommonSchema('bitbucket', icon: 'tabler-brand-bitbucket-f', hexColor: '#205081'));
+            $service->register(new BitbucketSchema());
-            $service->register(new CommonSchema('slack', icon: 'tabler-brand-slack', hexColor: '#6ecadc'));
+            $service->register(new SlackSchema());
 
             // Additional OAuth providers from socialiteproviders.com
             $service->register(new AuthentikSchema());

composer.lock

@@ -15231,7 +15231,7 @@
     ],
     "aliases": [],
     "minimum-stability": "stable",
-    "stability-flags": {},
+    "stability-flags": [],
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
@@ -15242,7 +15242,7 @@
         "ext-pdo": "*",
         "ext-zip": "*"
     },
-    "platform-dev": {},
+    "platform-dev": [],
     "platform-overrides": {
         "php": "8.2"
     },