add remote follow/remote interact UX

[petermolnar]

mastodon/pixelfed instances provide a "Remote Follow" page, where people can add their remote instances in order for the local instance to forward the subscription request.

I'm trying to find any documentation on it. Example:
https://mastodon.social/users/petermolnar/remote_follow
is a page to follow petermolnar@mastodon.social with the instance typed in the box that shows after "proceed to follow" .

[jee-r]

Hi, i also already looked for doc but I didn't find anything about it.
It looks like @aaronpk implemented this here on his amazing website maybe he could help us.

[snarfed]

interesting! took me a couple tries to understand the request, but i get it now. not a priority for me, but i'd probably accept a PR. feel free to tackle it if you're interested!

alternatively, you could link to your site's profile in any instance you choose, eg https://mastodon.technology/web/accounts/52904 is my snarfed.org bridgy fed profile. you can find it by searching for eg @petermolnar.net@petermolnar.net in Mastodon while logged in as a normal account. users could then click Follow there and use mastodon's page directly.

[kwaa]

I implemented a Remote Follow button on my personal blog. Maybe this will help? not really sure how to put it in Bridgy Fed though. Source / Demo

<script lang="ts">
  import IconPaperAirplane from '~icons/heroicons-outline/paper-airplane'
  let status: string = ''
  let statusText: string = ''
  let input: string = ''
  const follow = async (event: Event, account = new FormData(event.target as HTMLFormElement).get('account') as string) =>
    await fetch(
      account.startsWith('@')
        ? `https://${account.split('@')[2]}/.well-known/webfinger?resource=acct:${account.slice(1)}`
        : `https://${account.split('@')[1]}/.well-known/webfinger?resource=acct:${account}`,
      {
        headers: { Accept: 'application/jrd+json' }
      }
    )
      .then(res => {
        if (res.ok) {
          status = 'success'
          return res.json()
        } else {
          status = 'error'
          statusText = res.status + res.statusText
          throw Error(res.status + res.statusText)
        }
      })
      .then(
        ({ links }) => links.find((link: { rel: string }) => link.rel === 'http://ostatus.org/schema/1.0/subscribe').template
      )
      .then(template => (window.location.href = template.replace('{uri}', `dotdev@kwaa.moe`)))
      .catch(error => console.error(error))
  $: if (input)
    input.length < 5 ? (status = '') : input.includes('@') && input.includes('.') ? (status = 'success') : (status = 'warning')
</script>

<label for="remote-follow" class="btn modal-button normal-case mt-4 gap-2">
  <IconUserAdd />
  Remote follow
</label>

<input type="checkbox" id="remote-follow" class="modal-toggle" />
<label for="remote-follow" class="modal modal-bottom sm:modal-middle cursor-pointer">
  <div class="modal-box relative" for="">
    <form on:submit|preventDefault={follow} class="form-control gap-2">
      <div class="label py-0">
        <span class="label-text">Your fediverse account ID:</span>
      </div>
      <label class="input-group">
        <input
          bind:value={input}
          type="text"
          id="account"
          name="account"
          placeholder="username@instance.tld"
          class:input-success={status === 'success'}
          class:input-warning={status === 'warning'}
          class:input-error={status === 'error'}
          class="input input-bordered transition-all flex-1" />
        <button type="submit" class="btn btn-square">
          <IconPaperAirplane class="h-6 w-6 rotate-90" />
        </button>
      </label>
      {#if statusText}
        <div class="label py-0">
          <span class="label-text-alt text-error">
            {statusText}{#if statusText === '404'}: Couldn't find user{/if}
          </span>
        </div>
      {/if}
    </form>
  </div>
</label>

[snarfed]

Fun, thanks! Bridgy Fed is pretty different, we couldn't add this directly, but it's great to have another example.

[snarfed]

@gRegorLove had this useful summary:

Build the webfinger URL for the account that wants to subscribe; fetch the JSON; look for rel:http://ostatus.org/schema/1.0/subscribe; get the 'template' from the same object as that rel and that is the subscribe template url...
e.g. indieweb.social's template is: https://indieweb.social/authorize_interaction?uri={uri}
replace {uri} with your @-@ and redirect to the result
So: https://indieweb.social/authorize_interaction?uri=gregorlove.com@gregorlove.com, presumably
No idea how fragile that is / if every mastodon uses that same rel? 🤷

[snarfed]

Actually implementing this will take some in depth, full stack, cross site research and design! It's not something I plan to prioritize personally in the near future, but I'd love to see someone else drive the design and implementation, and I'd happily review proposals and merge PRs.

[snarfed]

@sebastiangreger has the best remote follow UI and complete fediverse profile on his web site, formatted like Mastodon/Twitter. Really good inspiration here. https://sebastiangreger.net/@sebastiangreger

More: https://sebastiangreger.net/2022/11/this-website-now-on-fediverse

[snarfed]

This is also useful, and confirms @gRegorLove's instructions above: https://socialhub.activitypub.rocks/t/what-is-the-current-spec-for-remote-follow/2020

[snarfed]

Done! All BF user pages now have a small remote follow UI, eg https://fed.brid.gy/user/snarfed.org

[snarfed]

More background on the webfinger rel template approach to remote follow:

• https://www.hughrundle.net/how-to-implement-remote-following-for-your-activitypub-project/
• https://ostatus.github.io/spec/OStatus%201.0%20Draft%202.html#anchor10
• https://socialhub.activitypub.rocks/t/represent-endpoint-for-remote-interaction/480
• https://socialhub.activitypub.rocks/t/what-is-the-current-spec-for-remote-follow/2020