bluesky-oauth-kit
Version:
A complete OAuth backend implementation for Bluesky
98 lines (88 loc) • 4.04 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">
<title>Bluesky OAuth Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.blue.min.css">
<style>
@import url(https://fonts.bunny.net/css?family=caveat:600);
body {
padding: calc(env(safe-area-inset-top) + 30px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 30px) calc(env(safe-area-inset-left) + 20px);
text-align: center;
}
.playfair {
font-family: 'Caveat', sans-serif;
letter-spacing: 0.75px;
font-weight: 600;
font-size: 1.5em;
}
header > a {
display: block;
margin-bottom: 5px;
}
article, pre, code { text-align: left; }
#logout {
position: fixed;
top: 10px;
right: 10px;
display: none;
}
@media (prefers-color-scheme: dark) {
svg path {
fill: #fff;
}
}
</style>
</head>
<body>
<div class="container">
<button id="logout" onclick="logout()">Logout</button>
<header>
<a class="cp" href="/">
<svg preserveAspectRatio="none" viewBox="0 0 600 530" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#208bfe"/>
</svg>
</a>
<p class="playfair">A Bluesky OAuth Example</p>
<br><br>
</header>
<div id="home">
<h1>Home</h1>
<article>
<p>This is your example app. Requests made from this page are protected.</p>
<p>Here are your Bluesky token contents, from <kbd>/oauth/userinfo</kbd>:</p>
<pre><code id="token"></code></pre>
<p>Here is your Bluesky Profile fetched via <kbd>@atproto/api</kbd>, from <kbd>/profile</kbd>:</p>
<pre><code id="profile"></code></pre>
</article>
</div>
</div>
<script src="vanilla.js"></script>
<script>
(async function() {
try {
const data = await fetchWithAuth('/oauth/userinfo');
document.querySelector('code#token').innerHTML = JSON.stringify(data, null, 2);
document.querySelector('#logout').style.display = 'block';
} catch (error) {
console.error('Error fetching data:', error);
document.querySelector('code#token').innerHTML = JSON.stringify(error, null, 2);
}
try {
// Fetch profile again
const profile = await fetchWithAuth('/profile');
console.log('Profile via API:', profile);
document.querySelector('code#profile').innerHTML = JSON.stringify(profile.data, null, 2);
} catch (error) {
console.error('Error fetching data:', error);
document.querySelector('code#profile').innerHTML = JSON.stringify(error, null, 2);
}
})();
</script>
</body>
</html>