Adding RelMeAuth/IndieAuth to your personal site

Introduction

To log in to a site or service, you often have two choices: Either log in with a social media account like a Twitter, GitHub or Google account or register with your email address.

Social media services may go away some day – you don't control their domain. So it may happen that you are at some point locked out from the site or service, you were logging in to with that social media account. On the other hand, this method is quite easy.
Email addresses (at least on your own domain) stay the same. But registering with an email address is complicated and takes quite long.

What is RelMeAuth/IndieAuth?

RelMeAuth is a proposed web standard and combines the advantages of both methods.

When logging in to a site or service, you simply enter your domain name (web address). The site you are trying to login to then visits your website and grabs a list of the social media profiles you listed on the homepage of your website. You can use any of them to log in.

The big advantage: The site you are logging in to only stores your domain name. And because that is yours and you are in control of it, you will never lose access to the account you are logging in to. If you decide to use different social media accounts in the future, just put them on your homepage and they are immediately available for logging in with.

IndieAuth is a service that makes it easy for sites and services to offer login with RelMeAuth. The two terms "RelMeAuth" and "IndieAuth" are often used for the same thing.

Setting up RelMeAuth on your own personal site

The name "RelMeAuth" comes from the rel="me" attribute. It looks like this:

<a rel="me" href="https://twitter.com/example">Find me on Twitter</a>

As you can see, the only difference to a normal link is the rel="me" attribute that allows the IndieAuth service to find the links to your social media profiles.

If a visible link to your profiles doesn't make sense on your homepage, the alternative is an invisible <link> tag:

<link rel="me" href="https://twitter.com/example">

Let's add some to our site/snippets/header.php snippet:

<!doctype html>
<html lang="<?= site()->language() ? site()->language()->code() : 'en' ?>">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <title><?= $site->title()->html() ?> | <?= $page->title()->html() ?></title>
  <meta name="description" content="<?= $site->description()->html() ?>">

  <?= css('assets/css/index.css') ?>

  <link rel="me" href="https://twitter.com/example">
  <link rel="me" href="https://github.com/example">
  <link rel="me" href="https://facebook.com/example">
</head>

Last step: You need to add a link to your site on your social media profile. RelMeAuth needs that backlink to your site to verify your identity.

More information

You can learn more about RelMeAuth and IndieAuth on the IndieAuth website. If you have followed the tutorial, you can also try it out on the site by entering your domain name into the "Try It!" box.