From 45b9404ec107d805c77508334100b20193a0c78f Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sun, 16 Jul 2023 07:09:15 -0600
Subject: [PATCH] Add Sign-in with Mastodon

---
 app/Models/RemoteAuth.php                     |  19 ++
 app/Models/RemoteAuthInstance.php             |  13 +
 app/Services/Account/RemoteAuthService.php    | 183 ++++++++++++
 app/User.php                                  |   8 +-
 config/remote-auth.php                        |  56 ++++
 ...07_07_025757_create_remote_auths_table.php |  38 +++
 ...427_create_remote_auth_instances_table.php |  37 +++
 .../remote-auth/GettingStartedComponent.vue   | 262 ++++++++++++++++++
 .../components/remote-auth/StartComponent.vue | 113 ++++++++
 .../views/auth/remote/onboarding.blade.php    |  10 +
 resources/views/auth/remote/start.blade.php   |  10 +
 11 files changed, 742 insertions(+), 7 deletions(-)
 create mode 100644 app/Models/RemoteAuth.php
 create mode 100644 app/Models/RemoteAuthInstance.php
 create mode 100644 app/Services/Account/RemoteAuthService.php
 create mode 100644 config/remote-auth.php
 create mode 100644 database/migrations/2023_07_07_025757_create_remote_auths_table.php
 create mode 100644 database/migrations/2023_07_07_030427_create_remote_auth_instances_table.php
 create mode 100644 resources/assets/components/remote-auth/GettingStartedComponent.vue
 create mode 100644 resources/assets/components/remote-auth/StartComponent.vue
 create mode 100644 resources/views/auth/remote/onboarding.blade.php
 create mode 100644 resources/views/auth/remote/start.blade.php

diff --git a/app/Models/RemoteAuth.php b/app/Models/RemoteAuth.php
new file mode 100644
index 000000000..98909f09b
--- /dev/null
+++ b/app/Models/RemoteAuth.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class RemoteAuth extends Model
+{
+    use HasFactory;
+
+    protected $guarded = [];
+
+    protected $casts = [
+        'verify_credentials' => 'array',
+        'last_successful_login_at' => 'datetime',
+        'last_verify_credentials_at' => 'datetime'
+    ];
+}
diff --git a/app/Models/RemoteAuthInstance.php b/app/Models/RemoteAuthInstance.php
new file mode 100644
index 000000000..bdc03fcb2
--- /dev/null
+++ b/app/Models/RemoteAuthInstance.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class RemoteAuthInstance extends Model
+{
+    use HasFactory;
+
+    protected $guarded = [];
+}
diff --git a/app/Services/Account/RemoteAuthService.php b/app/Services/Account/RemoteAuthService.php
new file mode 100644
index 000000000..b9936b7be
--- /dev/null
+++ b/app/Services/Account/RemoteAuthService.php
@@ -0,0 +1,183 @@
+<?php
+
+namespace App\Services\Account;
+
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
+use App\Models\RemoteAuthInstance;
+use Illuminate\Http\Client\ConnectionException;
+use Illuminate\Http\Client\RequestException;
+
+class RemoteAuthService
+{
+    const CACHE_KEY = 'pf:services:remoteauth:';
+
+    public static function getMastodonClient($domain)
+    {
+        if(RemoteAuthInstance::whereDomain($domain)->exists()) {
+            return RemoteAuthInstance::whereDomain($domain)->first();
+        }
+
+        try {
+            $url = 'https://' . $domain . '/api/v1/apps';
+            $res = Http::asForm()->throw()->timeout(10)->post($url, [
+                'client_name' => config('pixelfed.domain.app', 'pixelfed'),
+                'redirect_uris' => url('/auth/mastodon/callback'),
+                'scopes' => 'read',
+                'website' => 'https://pixelfed.org'
+            ]);
+
+            if(!$res->ok()) {
+                return false;
+            }
+        } catch (RequestException $e) {
+            return false;
+        } catch (ConnectionException $e) {
+            return false;
+        } catch (Exception $e) {
+            return false;
+        }
+
+        $body = $res->json();
+
+        if(!$body || !isset($body['client_id'])) {
+            return false;
+        }
+
+        $raw = RemoteAuthInstance::updateOrCreate([
+            'domain' => $domain
+        ], [
+            'client_id' => $body['client_id'],
+            'client_secret' => $body['client_secret'],
+            'redirect_uri' => $body['redirect_uri'],
+        ]);
+
+        return $raw;
+    }
+
+    public static function getToken($domain, $code)
+    {
+        $raw = RemoteAuthInstance::whereDomain($domain)->first();
+        if(!$raw || !$raw->active || $raw->banned) {
+            return false;
+        }
+
+        $url = 'https://' . $domain . '/oauth/token';
+        $res = Http::asForm()->post($url, [
+            'code' => $code,
+            'grant_type' => 'authorization_code',
+            'client_id' => $raw->client_id,
+            'client_secret' => $raw->client_secret,
+            'redirect_uri' => $raw->redirect_uri,
+            'scope' => 'read'
+        ]);
+
+        return $res;
+    }
+
+    public static function getVerifyCredentials($domain, $code)
+    {
+        $raw = RemoteAuthInstance::whereDomain($domain)->first();
+        if(!$raw || !$raw->active || $raw->banned) {
+            return false;
+        }
+
+        $url = 'https://' . $domain . '/api/v1/accounts/verify_credentials';
+
+        $res = Http::withToken($code)->get($url);
+
+        return $res->json();
+    }
+
+    public static function getFollowing($domain, $code, $id)
+    {
+        $raw = RemoteAuthInstance::whereDomain($domain)->first();
+        if(!$raw || !$raw->active || $raw->banned) {
+            return false;
+        }
+
+        $url = 'https://' . $domain . '/api/v1/accounts/' . $id . '/following?limit=80';
+        $key = self::CACHE_KEY . 'get-following:code:' . substr($code, 0, 16) . substr($code, -5) . ':domain:' . $domain. ':id:' .$id;
+
+        return Cache::remember($key, 3600, function() use($url, $code) {
+            $res = Http::withToken($code)->get($url);
+            return $res->json();
+        });
+    }
+
+    public static function isDomainCompatible($domain = false)
+    {
+        if(!$domain) {
+            return false;
+        }
+
+        return Cache::remember(self::CACHE_KEY . 'domain-compatible:' . $domain, 14400, function() use($domain) {
+            try {
+                $res = Http::timeout(20)->retry(3, 750)->get('https://beagle.pixelfed.net/api/v1/raa/domain?domain=' . $domain);
+                if(!$res->ok()) {
+                    return false;
+                }
+            } catch (RequestException $e) {
+                return false;
+            } catch (ConnectionException $e) {
+                return false;
+            } catch (Exception $e) {
+                return false;
+            }
+            $json = $res->json();
+
+            if(!in_array('compatible', $json)) {
+                return false;
+            }
+
+            return $res['compatible'];
+        });
+    }
+
+    public static function lookupWebfingerUses($wf)
+    {
+        try {
+            $res = Http::timeout(20)->retry(3, 750)->get('https://beagle.pixelfed.net/api/v1/raa/lookup?webfinger=' . $wf);
+            if(!$res->ok()) {
+                return false;
+            }
+        } catch (RequestException $e) {
+            return false;
+        } catch (ConnectionException $e) {
+            return false;
+        } catch (Exception $e) {
+            return false;
+        }
+        $json = $res->json();
+        if(!$json || !isset($json['count'])) {
+            return false;
+        }
+
+        return $json['count'];
+    }
+
+    public static function submitToBeagle($ow, $ou, $dw, $du)
+    {
+        try {
+            $url = 'https://beagle.pixelfed.net/api/v1/raa/submit';
+            $res = Http::throw()->timeout(10)->get($url, [
+                'ow' => $ow,
+                'ou' => $ou,
+                'dw' => $dw,
+                'du' => $du,
+            ]);
+
+            if(!$res->ok()) {
+                return;
+            }
+        } catch (RequestException $e) {
+            return;
+        } catch (ConnectionException $e) {
+            return;
+        } catch (Exception $e) {
+            return;
+        }
+
+        return;
+    }
+}
diff --git a/app/User.php b/app/User.php
index 23faf63f4..3e2097811 100644
--- a/app/User.php
+++ b/app/User.php
@@ -31,13 +31,7 @@ class User extends Authenticatable
      * @var array
      */
     protected $fillable = [
-        'name',
-        'username',
-        'email',
-        'password',
-        'app_register_ip',
-        'email_verified_at',
-        'last_active_at'
+        'name', 'username', 'email', 'password', 'app_register_ip', 'email_verified_at', 'register_source'
     ];
 
     /**
diff --git a/config/remote-auth.php b/config/remote-auth.php
new file mode 100644
index 000000000..6d1ac7948
--- /dev/null
+++ b/config/remote-auth.php
@@ -0,0 +1,56 @@
+<?php
+
+return [
+    'mastodon' => [
+        'enabled' => env('PF_LOGIN_WITH_MASTODON_ENABLED', false),
+
+        'contraints' => [
+            /*
+             *   Skip email verification
+             *
+             *   To improve the onboarding experience, you can opt to skip the email
+             *   verification process and automatically verify their email
+             */
+            'skip_email_verification' => env('PF_LOGIN_WITH_MASTODON_SKIP_EMAIL', true),
+        ],
+
+        'domains' => [
+            'default' => 'mastodon.social,mastodon.online,mstdn.social,mas.to',
+
+            /*
+             *   Custom mastodon domains
+             *
+             *   Define a comma separated list of custom domains to allow
+             */
+            'custom' => env('PF_LOGIN_WITH_MASTODON_DOMAINS'),
+
+            /*
+             *   Use only default domains
+             *
+             *   Allow Sign-in with Mastodon using only the default domains
+             */
+            'only_default' => env('PF_LOGIN_WITH_MASTODON_ONLY_DEFAULT', true),
+
+            /*
+             *   Use only custom domains
+             *
+             *   Allow Sign-in with Mastodon using only the custom domains
+             *   you define, in comma separated format
+             */
+            'only_custom' => env('PF_LOGIN_WITH_MASTODON_ONLY_CUSTOM', false),
+        ],
+
+        'max_uses' => [
+            /*
+             *   Max Uses
+             *
+             *   Using a centralized service operated by pixelfed.org that tracks mastodon imports,
+             *   you can set a limit of how many times a mastodon account can be imported across
+             *   all known and reporting Pixelfed instances to prevent the same masto account from
+             *   abusing this
+             */
+            'enabled' => env('PF_LOGIN_WITH_MASTODON_ENFORCE_MAX_USES', true),
+            'limit' => env('PF_LOGIN_WITH_MASTODON_MAX_USES_LIMIT', 3)
+        ]
+    ],
+];
diff --git a/database/migrations/2023_07_07_025757_create_remote_auths_table.php b/database/migrations/2023_07_07_025757_create_remote_auths_table.php
new file mode 100644
index 000000000..774965aa2
--- /dev/null
+++ b/database/migrations/2023_07_07_025757_create_remote_auths_table.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('remote_auths', function (Blueprint $table) {
+            $table->id();
+            $table->string('software')->nullable();
+            $table->string('domain')->nullable()->index();
+            $table->string('webfinger')->nullable()->unique()->index();
+            $table->unsignedInteger('instance_id')->nullable()->index();
+            $table->unsignedInteger('user_id')->nullable()->unique()->index();
+            $table->unsignedInteger('client_id')->nullable()->index();
+            $table->string('ip_address')->nullable();
+            $table->text('bearer_token')->nullable();
+            $table->json('verify_credentials')->nullable();
+            $table->timestamp('last_successful_login_at')->nullable();
+            $table->timestamp('last_verify_credentials_at')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('remote_auths');
+    }
+};
diff --git a/database/migrations/2023_07_07_030427_create_remote_auth_instances_table.php b/database/migrations/2023_07_07_030427_create_remote_auth_instances_table.php
new file mode 100644
index 000000000..690197b9b
--- /dev/null
+++ b/database/migrations/2023_07_07_030427_create_remote_auth_instances_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('remote_auth_instances', function (Blueprint $table) {
+            $table->id();
+            $table->string('domain')->nullable()->unique()->index();
+            $table->unsignedInteger('instance_id')->nullable()->index();
+            $table->string('client_id')->nullable();
+            $table->string('client_secret')->nullable();
+            $table->string('redirect_uri')->nullable();
+            $table->string('root_domain')->nullable()->index();
+            $table->boolean('allowed')->nullable()->index();
+            $table->boolean('banned')->default(false)->index();
+            $table->boolean('active')->default(true)->index();
+            $table->timestamp('last_refreshed_at')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('remote_auth_instances');
+    }
+};
diff --git a/resources/assets/components/remote-auth/GettingStartedComponent.vue b/resources/assets/components/remote-auth/GettingStartedComponent.vue
new file mode 100644
index 000000000..241730fe8
--- /dev/null
+++ b/resources/assets/components/remote-auth/GettingStartedComponent.vue
@@ -0,0 +1,262 @@
+<template>
+<div class="container remote-auth-getting-started">
+    <div class="row mt-5 justify-content-center">
+        <div class="col-12 col-xl-5 col-md-7">
+            <div v-if="!error" class="card shadow-none border" style="border-radius: 20px;">
+                <div v-if="!loaded && !existing && !maxUsesReached" class="card-body d-flex align-items-center flex-column" style="min-height: 400px;">
+                    <div class="w-100">
+                        <p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
+                        <hr />
+                    </div>
+                    <div class="w-100 d-flex align-items-center justify-content-center flex-grow-1 flex-column gap-1">
+                        <div class="position-relative w-100">
+                            <p class="pa-center">Please wait...</p>
+                            <instagram-loader></instagram-loader>
+                        </div>
+                        <div class="w-100">
+                            <hr>
+                            <p class="text-center mb-0">
+                                <a class="font-weight-bold" href="/login">Go back to login</a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div v-else-if="!loaded && !existing && maxUsesReached" class="card-body d-flex align-items-center flex-column" style="min-height: 660px;">
+                    <div class="w-100">
+                        <p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
+                        <hr />
+                    </div>
+                    <div class="w-100 d-flex align-items-center justify-content-center flex-grow-1 flex-column gap-1">
+
+                        <p class="lead text-center font-weight-bold mt-3">Oops!</p>
+
+                        <p class="mb-2 text-center">We cannot complete your request at this time</p>
+                        <p class="mb-3 text-center text-xs">It appears that you've signed-in on other Pixelfed instances and reached the max limit that we accept.</p>
+                    </div>
+
+                    <div class="w-100">
+                        <p class="text-center mb-0">
+                            <a class="font-weight-bold" href="/site/contact">Contact Support</a>
+                        </p>
+                        <hr>
+                        <p class="text-center mb-0">
+                            <a class="font-weight-bold" href="/login">Go back to login</a>
+                        </p>
+                    </div>
+                </div>
+
+                <div v-else-if="!loaded && existing" class="card-body d-flex align-items-center flex-column" style="min-height: 660px;">
+                    <div class="w-100">
+                        <p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
+                        <hr />
+                    </div>
+                    <div class="w-100 d-flex align-items-center justify-content-center flex-grow-1 flex-column gap-1">
+                        <b-spinner />
+                        <div class="text-center">
+                            <p class="lead mb-0">Welcome back!</p>
+                            <p class="text-xs text-muted">One moment please, we're logging you in...</p>
+                        </div>
+                    </div>
+                </div>
+
+                <register-form v-else :initialData="prefill" v-on:setCanReload="setCanReload" />
+            </div>
+            <div v-else class="card shadow-none border">
+                <div class="card-body d-flex align-items-center flex-column" style="min-height: 660px;">
+                    <div class="w-100">
+                        <p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
+                        <hr />
+                    </div>
+                    <div class="w-100 d-flex align-items-center justify-content-center flex-grow-1 flex-column gap-1">
+
+                        <p class="lead text-center font-weight-bold mt-3">Oops, something went wrong!</p>
+
+                        <p class="mb-3">We cannot complete your request at this time, please try again later.</p>
+
+                        <p class="text-xs text-muted mb-1">This can happen for a few different reasons:</p>
+
+                        <ul class="text-xs text-muted">
+                            <li>The remote instance cannot be reached</li>
+                            <li>The remote instance is not supported yet</li>
+                            <li>The remote instance has been disabled by admins</li>
+                            <li>The remote instance does not allow remote logins</li>
+                        </ul>
+                    </div>
+
+                    <div class="w-100">
+                        <hr>
+                        <p class="text-center mb-0">
+                            <a class="font-weight-bold" href="/login">Go back to login</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script type="text/javascript">
+    import { InstagramLoader } from 'vue-content-loader';
+    import RegisterForm from './partials/RegisterForm.vue';
+
+    export default {
+        components: {
+            InstagramLoader,
+            RegisterForm
+        },
+
+        data() {
+            return {
+                loaded: false,
+                error: false,
+                prefill: false,
+                existing: undefined,
+                maxUsesReached: undefined,
+                tab: 'loading',
+                canReload: false,
+            }
+        },
+
+        mounted() {
+            this.validateSession();
+
+            window.onbeforeunload = function () {
+                if(!this.canReload) {
+                    alert('You are trying to leave.');
+                    return false;
+                }
+            }
+        },
+
+        methods: {
+            validateSession() {
+                axios.post('/auth/raw/mastodon/s/check')
+                .then(res => {
+                    if(!res && !res.hasOwnProperty('action')) {
+                        swal('Oops!', 'An unexpected error occured, please try again later', 'error');
+                        return;
+                    }
+
+                    switch(res.data.action) {
+                        case 'onboard':
+                            this.getPrefillData();
+                            return;
+                        break;
+
+                        case 'redirect_existing_user':
+                            this.existing = true;
+                            this.canReload = true;
+                            window.onbeforeunload = undefined;
+                            this.redirectExistingUser();
+                            return;
+                        break;
+
+                        case 'max_uses_reached':
+                            this.maxUsesReached = true;
+                            this.canReload = true;
+                            window.onbeforeunload = undefined;
+                            return;
+                        break;
+
+                        default:
+                            this.error = true;
+                            return;
+                        break;
+                    }
+                })
+                .catch(error => {
+                    this.canReload = true;
+                    window.onbeforeunload = undefined;
+                    this.error = true;
+                })
+            },
+
+            setCanReload() {
+                this.canReload = true;
+                window.onbeforeunload = undefined;
+            },
+
+            redirectExistingUser() {
+                this.canReload = true;
+                setTimeout(() => {
+                    this.handleLogin();
+                }, 1500);
+            },
+
+            handleLogin() {
+                axios.post('/auth/raw/mastodon/s/login')
+                .then(res => {
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1500);
+                })
+                .catch(err => {
+                    this.canReload = false;
+                    this.error = true;
+                })
+            },
+
+            getPrefillData() {
+                axios.post('/auth/raw/mastodon/s/prefill')
+                .then(res => {
+                    this.prefill = res.data;
+                })
+                .catch(error => {
+                    this.error = true;
+                })
+                .finally(() => {
+                    setTimeout(() => {
+                        this.loaded = true;
+                    }, 1000);
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    @use '../../../../node_modules/bootstrap/scss/bootstrap';
+
+    .remote-auth-getting-started {
+        .text-xs {
+            font-size: 12px;
+        }
+
+        .gap-1 {
+            gap: 1rem;
+        }
+
+        .opacity-50 {
+            opacity: .3;
+        }
+
+        .server-btn {
+            @extend .btn;
+            @extend .btn-primary;
+            @extend .btn-block;
+            @extend .rounded-pill;
+            @extend .font-weight-light;
+
+            background: linear-gradient(#6364FF, #563ACC);
+        }
+
+        .other-server-btn {
+            @extend .btn;
+            @extend .btn-dark;
+            @extend .btn-block;
+            @extend .rounded-pill;
+            @extend .font-weight-light;
+        }
+
+        .pa-center {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%);
+            font-weight: 600;
+            font-size: 16px;
+        }
+    }
+</style>
diff --git a/resources/assets/components/remote-auth/StartComponent.vue b/resources/assets/components/remote-auth/StartComponent.vue
new file mode 100644
index 000000000..558fa13f3
--- /dev/null
+++ b/resources/assets/components/remote-auth/StartComponent.vue
@@ -0,0 +1,113 @@
+<template>
+<div class="container remote-auth-start">
+    <div class="row mt-5 justify-content-center">
+        <div class="col-12 col-md-5">
+            <div class="card shadow-none border" style="border-radius: 20px;">
+                <div v-if="!loaded" class="card-body d-flex justify-content-center flex-column" style="min-height: 662px;">
+                    <p class="lead text-center font-weight-bold mb-0">Sign-in with Mastodon</p>
+                    <div class="w-100">
+                        <hr>
+                    </div>
+                    <div class="d-flex justify-content-center align-items-center flex-grow-1">
+                        <b-spinner />
+                    </div>
+                </div>
+
+                <div v-else class="card-body" style="min-height: 662px;">
+                    <p class="lead text-center font-weight-bold">Sign-in with Mastodon</p>
+                    <hr>
+                    <p class="small text-center mb-3">Select your Mastodon server:</p>
+                    <button
+                        v-for="domain in domains"
+                        type="button"
+                        class="server-btn"
+                        @click="handleRedirect(domain)">
+                        Sign-in with <span class="font-weight-bold">{{ domain }}</span>
+                    </button>
+                    <hr>
+                    <p class="text-center">
+                        <button type="button" class="other-server-btn">Sign-in with a different server</button>
+                    </p>
+                    <div class="w-100">
+                        <hr>
+                        <p class="text-center mb-0">
+                            <a class="font-weight-bold" href="/login">Go back to login</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script type="text/javascript">
+    export default {
+        data() {
+            return {
+                loaded: false,
+                domains: []
+            }
+        },
+
+        mounted() {
+            this.fetchDomains();
+        },
+
+        methods: {
+            fetchDomains() {
+                axios.post('/auth/raw/mastodon/domains')
+                .then(res => {
+                    this.domains = res.data;
+                })
+                .finally(() => {
+                    setTimeout(() => {
+                        this.loaded = true;
+                    }, 500);
+                })
+            },
+
+            handleRedirect(domain) {
+                axios.post('/auth/raw/mastodon/redirect', { domain: domain })
+                .then(res => {
+                    if(!res || !res.data.hasOwnProperty('ready')) {
+                        return;
+                    }
+
+                    if(res.data.hasOwnProperty('action') && res.data.action === 'incompatible_domain') {
+                        swal('Oops!', 'This server is not compatible, please choose another or try again later!', 'error');
+                        return;
+                    }
+
+                    if(res.data.ready) {
+                        window.location.href = '/auth/raw/mastodon/preflight?d=' + domain + '&dsh=' + res.data.dsh;
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    @use '../../../../node_modules/bootstrap/scss/bootstrap';
+
+    .remote-auth-start {
+        .server-btn {
+            @extend .btn;
+            @extend .btn-primary;
+            @extend .btn-block;
+            @extend .rounded-pill;
+            @extend .font-weight-light;
+
+            background: linear-gradient(#6364FF, #563ACC);
+        }
+
+        .other-server-btn {
+            @extend .btn;
+            @extend .btn-dark;
+            @extend .btn-block;
+            @extend .rounded-pill;
+            @extend .font-weight-light;
+        }
+    }
+</style>
diff --git a/resources/views/auth/remote/onboarding.blade.php b/resources/views/auth/remote/onboarding.blade.php
new file mode 100644
index 000000000..82212a75d
--- /dev/null
+++ b/resources/views/auth/remote/onboarding.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.app')
+
+@section('content')
+<remote-auth-getting-started-component />
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{ mix('js/remote_auth.js')}}"></script>
+<script type="text/javascript">App.boot();</script>
+@endpush
diff --git a/resources/views/auth/remote/start.blade.php b/resources/views/auth/remote/start.blade.php
new file mode 100644
index 000000000..9369d7f73
--- /dev/null
+++ b/resources/views/auth/remote/start.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.app')
+
+@section('content')
+<remote-auth-start-component />
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{ mix('js/remote_auth.js')}}"></script>
+<script type="text/javascript">App.boot();</script>
+@endpush