PSingletary PSingletary

Tales of Adding oAuth "Login with Bluesky" to an OS Comments Tool

I recently embarked on the task of adding Bluesky Oauth Login to Coral by Vox Media (a popular comments tool) as an open source contribution.

In this talk I will give a brief overview of how that went, and what you should know before attempting to create your own atprotocol oauth clients.

2024-12-18_21-22-05_region_re.mp4

	export const getValidUrlRegex = (domainName?: string) => {
	return domainName
	? RegExp(
	/^(?:https?:\/\/)?(?:www\.)?(?:(?<subdomain>[a-z0-9-]+)\.)?/.source +
	RegExp(domainName).source +
	/\.(?:(?<tld>[a-z]{1,63}))?(?::(?<port>[0-9]{1,5}))??(?:[/#](?<path>[\w/\-._~:/?#[\]@!$&'()+,;=.])?)?$/
	.source,
	)
	: /^(?:https?:\/\/)?(?:www\.)?(?:(?<subdomain>[a-z0-9-]+)\.)?(?<domain>[a-z0-9-]+)\.(?:(?<tld>[a-z]{1,63}))?(?::(?<port>[0-9]{1,5}))??(?:[/#](?<path>[\w/\-._~:/?#[\]@!$&'()+,;=.])?)?$/;
	};

	#!/usr/bin/env ruby

	begin
	require 'minisky'
	rescue LoadError
	puts "Install minisky: '[sudo] gem install minisky'"
	exit 1
	end

	require 'time'

-import { Agent } from '@externdefs/bluesky-client/agent';
-import type { Records, RefOf } from '@externdefs/bluesky-client/atp-schema';
-const BSKY_USERNAME = '';
-const BSKY_PASSWORD = '';
-const agent = new Agent({ serviceUri: 'https://bsky.social' });
-await agent.login({ identifier: BSKY_USERNAME, password: BSKY_PASSWORD });
-const did = agent.session!.did;

	/*
	Twitch chat browsersource CSS for OBS
	Just set the URL as https://www.twitch.tv/%%TWITCHCHANNEL%%/chat?popout=true
	And paste this entire file into the CSS box
	Original by twitch.tv/starvingpoet modified by github.com/Bluscream

	General Settings
	*/
	body {
	color: #FFFFFF!important;

	import dotenv from 'dotenv'
	import { BskyAgent } from '@atproto/api'
	import { ProfileView } from '@atproto/api/dist/client/types/app/bsky/actor/defs'

	const bigLeagueMe = async () => {
	dotenv.config()
	// YOUR bluesky handle
	// Ex: user.bsky.social
	const handle = process.env.BSKYHANDLE \|\| ''

	bsky.app##+js(user-bsky-annoyances.js)
	main.bsky.dev##+js(user-bsky-annoyances.js)

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link rel="icon" type="image/x-icon" href="/favicon.ico">
	<title>Rebane's Discord Colored Text Generator</title>
	<meta charset="UTF-8">
	<meta name="description" content="Rebane's Discord Colored Text Generator">
	<meta name="author" content="rebane2001">
	<style>
	/*