Simple vanilia JS vite project with ATProto OAuth out of the box
baileytownsend.dev
1import './style.css'
2import { atprotoLoopbackClientMetadata, BrowserOAuthClient } from '@atproto/oauth-client-browser'
3import {showError, showLoggedInPage, showLoginForm} from "./ui.js";
4import { Agent } from '@atproto/api'
5import clientMetadataUrl from '/oauth-client-metadata.json?url'
6
7// For localhost development
8const scopes = ['atproto', 'transition:generic']
9const redirectUri = 'http://127.0.0.1:5173/callback'
10const devClientId = `http://localhost?redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scopes.join(' '))}`
11
12
13const client = await BrowserOAuthClient.load({
14 handleResolver: 'https://bsky.social',
15 // clientId: `${location.origin}${clientMetadataUrl}`
16 clientId: import.meta.env.VITE_OAUTH_DOMAIN ? `https://${import.meta.env.VITE_OAUTH_DOMAIN}${clientMetadataUrl}` : devClientId
17})
18
19
20window.oauthClient = client
21
22try {
23 const result = await client.init()
24 //If a result is set and there is a session, the user is authenticated or was a successful callback
25 if (result) {
26 const {session, state} = result
27 if (state != null) {
28 console.log(
29 `${session.sub} was successfully authenticated (state: ${state})`,
30 )
31 } else {
32 console.log(`${session.sub} was restored (last active session)`)
33 }
34 if (session) {
35 //This is what actually makes authenticated atproto requests
36 window.atpAgent = new Agent(session)
37 //Shows the logged in ui page
38 await showLoggedInPage(session)
39 }
40 } else {
41 //Shows the login form
42 showLoginForm()
43 }
44}
45catch (error) {
46 console.error('OAuth client initialization error:', error)
47 showError(error.message)
48}