How to: IndieWeb Web Sign In

I started with IndieWebify.me hoping it would give me some easy wins. It did, but I found the approach a bit fragmented. Having to click back and forth on links to learn the things a bit disjointed. I’ll try to round that out here.

Target Audience: You have a personal domain for your website, for example: bridgestew.com (personal) vs. bridgestew.netlify.com (hosted by third party). You are comfortable writing HTML markup or are able to generate the output described in this entry.

Setting up Web Sign In #

This was actually pretty easy and quite straightforward--as long as you are comfortable writing HTML. I have links to my various social profiles in the footer of this site. That’s actually a pretty common practice on different types of websites. I updated those links by adding rel="me" to them.

Example:

<ul>
<li>
<a href="https://twitter.com/bridgetstewart" rel="me">Twitter</a>
</li>
<li>
<a href="https://github.com/bridgestew" rel="me">Github</a>
</li>
<li>
<a href="https://www.linkedin.com/in/bridget-stewart-3244767/" rel="me">LinkedIn</a>
</li>
</ul>

The next step is to make sure there is a link to your website in the profile of the relevant social networks. Not all of them will provide support for you to sign in via IndieAuth--such as LinkedIn--but Twitter and Github support it at the time of this writing. Social sites will have different profile options, so you will have to determine how best to link back to your site. Here is an example for where to put it in a Twitter profile.

Twitter Edit Profile panel showing that the 4th input is where the link back to bridgestew.com goes.

On IndieWebify.me Step 2, you can test that this is set up properly by putting your site's URL (e.g. https://bridgestew.com) into the field and clicking "Test". A verification box will appear showing you what the results are:

Results of rel=me test demonstrating that Twitter and Github work perfectly while LinkedIn does not link back

As the example shows, not all social sites will give you a place to link back to your website. IndieAuth may not recognize that those social sites link back to your site, which might be due to the social site not supporting web login. If you can verify Twitter or Github, then you know you've done things correctly and you should be able to use Web Sign In for various IndieWeb features.

Conclusion #

As I said before, I've wanted to get involved in IndieWeb before and had difficulty doing so. It was encouraging to have the first step be easy enough for me to tackle with a low amount of effort.