feat: create atproto oauth login

src/App.vue

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
 import NewVersion from '@/components/NewVersion.vue'
+import { useATProtoLogin } from '@/hooks/useATProtoLogin.hook'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 
 const { isReady } = useGitHubLogin()
+const { isATProtoReady } = useATProtoLogin()
 </script>
 
 <template>
   <div id="main-app" class="prose">
-    <router-view v-if="isReady" />
+    <router-view v-if="isReady && isATProtoReady" />
 
     <new-version />
   </div>

src/components/SignInAtproto.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { useATProtoLogin } from '@/hooks/useATProtoLogin.hook'
+
+const { handle, isLoggedIn, signIn, signOut } = useATProtoLogin()
+
+const inputHandle = ref('')
+
+const onSignIn = () => {
+  if (inputHandle.value) {
+    signIn(inputHandle.value)
+  }
+}
+</script>
+
+<template>
+  <div v-if="isLoggedIn" class="sign-in-atproto">
+    <span>{{ handle }}</span>
+    <button class="btn btn-sm" @click="signOut">Sign out</button>
+  </div>
+  <div v-else class="sign-in-atproto">
+    <input
+      v-model="inputHandle"
+      class="input input-sm"
+      type="text"
+      placeholder="yourhandle.bsky.social"
+      @keyup.enter="onSignIn"
+    />
+    <button class="btn btn-sm" @click="onSignIn">Sign in with Bluesky</button>
+  </div>
+</template>

src/components/WelcomeWorld.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import RepoList from "@/components/RepoList.vue"
+import SignInAtproto from "@/components/SignInAtproto.vue"
 import SignInGithub from "@/components/SignInGithub.vue"
 import ThemeSwap from "@/components/ThemeSwap.vue"
 import { useForm } from "@/hooks/useForm.hook"
@@ -23,6 +24,7 @@ const { userInput, repoInput, submit } = useForm()
 
     <div class="get-started">
       <sign-in-github />
+      <sign-in-atproto />
       <router-link
         :to="{
           name: 'FluxNoteView',

src/data/DataType.enum.ts

@@ -6,5 +6,6 @@ export enum DataType {
   BacklinkNote = 'BacklinkNote',
   RepetitionCard = 'RepetitionCard',
   History = 'History',
-  UserSettings = 'UserSettings'
+  UserSettings = 'UserSettings',
+  AtprotoSession = 'AtprotoSession'
 }

src/data/models/AtprotoSession.ts

@@ -0,0 +1,7 @@
+import { DataType } from '@/data/DataType.enum'
+import { Model } from '@/data/models/Model'
+
+export interface AtprotoSession extends Model<DataType.AtprotoSession> {
+  did: string
+  handle: string
+}

src/hooks/useATProtoLogin.hook.ts

@@ -0,0 +1,59 @@
+import { computed, ref } from 'vue'
+
+import { getAuthor } from '@/modules/atproto/getAuthor'
+import { restoreSession, sdkSignOut, signInWithHandle } from '@/modules/atproto/service/atprotoOAuth'
+import { clearSession, loadSession, saveSession } from '@/modules/atproto/service/atprotoSession'
+
+const did = ref<string | null>(null)
+const handle = ref<string | null>(null)
+
+let init = true
+
+const initializeAuth = async () => {
+  const session = await restoreSession()
+
+  if (session) {
+    const author = await getAuthor(session.did)
+    const resolvedHandle = author?.handle ?? ''
+
+    did.value = session.did
+    handle.value = resolvedHandle
+    await saveSession(session.did, resolvedHandle)
+  } else {
+    const stored = await loadSession()
+    did.value = stored?.did ?? ''
+    handle.value = stored?.handle ?? ''
+  }
+}
+
+export const useATProtoLogin = () => {
+  if (init) {
+    init = false
+    initializeAuth()
+  }
+
+  const isLoggedIn = computed(() => !!did.value)
+  const isATProtoReady = computed(() => did.value !== null)
+
+  const signIn = async (inputHandle: string): Promise<void> => {
+    await signInWithHandle(inputHandle)
+  }
+
+  const signOut = async (): Promise<void> => {
+    if (did.value) {
+      await sdkSignOut(did.value)
+    }
+    await clearSession()
+    did.value = ''
+    handle.value = ''
+  }
+
+  return {
+    did,
+    handle,
+    isLoggedIn,
+    isATProtoReady,
+    signIn,
+    signOut,
+  }
+}

src/hooks/useFollows.hook.ts

@@ -0,0 +1,21 @@
+import { Ref, ref, watch } from 'vue'
+
+import { getFollows } from '@/modules/atproto/service/getFollows'
+
+export const useFollows = (did: Ref<string | null>) => {
+  const follows = ref<Set<string>>(new Set())
+
+  watch(
+    did,
+    async (value) => {
+      if (value) {
+        follows.value = await getFollows(value)
+      } else {
+        follows.value = new Set()
+      }
+    },
+    { immediate: true },
+  )
+
+  return { follows }
+}

src/hooks/usePublicNoteList.hook.ts

@@ -3,7 +3,12 @@ import { PublicNoteListItem } from "@/modules/note/models/Note"
 import { computedAsync } from "@vueuse/core"
 import { computed, ref, Ref } from "vue"
 
-export function usePublicNoteList(did?: Ref<string | undefined>) {
+interface UsePublicNoteListOptions {
+  did?: Ref<string | undefined>
+  followsFilter?: Ref<Set<string>>
+}
+
+export function usePublicNoteList(options?: UsePublicNoteListOptions) {
   const isLoading = ref(false)
   const notes = ref<PublicNoteListItem[]>([])
   const cursor = ref<string | null | undefined>(null)
@@ -12,7 +17,7 @@ export function usePublicNoteList(did?: Ref<string | undefined>) {
   const onLoadMore = async () => {
     isLoading.value = true
 
-    const path = did?.value ? `/${did.value}/notes` : "/notes"
+    const path = options?.did?.value ? `/${options.did.value}/notes` : "/notes"
     const noteAPI = new URL(path, "https://api.litenote.li212.fr")
 
     if (cursor.value) {
@@ -39,8 +44,14 @@ export function usePublicNoteList(did?: Ref<string | undefined>) {
   const getAuthor = (did: string) =>
     authors.value.has(did) ? authors.value.get(did)?.handle : ""
 
+  const filteredNotes = computed(() => {
+    const filter = options?.followsFilter?.value
+    if (!filter || filter.size === 0) return notes.value
+    return notes.value.filter((n) => filter.has(n.did))
+  })
+
   return {
-    notes,
+    notes: filteredNotes,
     isLoading,
     canLoadMore,
     onLoadMore,

src/modules/atproto/service/atprotoOAuth.ts

@@ -0,0 +1,30 @@
+import { BrowserOAuthClient } from '@atproto/oauth-client-browser'
+
+const CLIENT_ID = import.meta.env.DEV
+  ? 'http://localhost'
+  : 'https://remanso.space/client-metadata.json'
+
+let clientPromise: Promise<BrowserOAuthClient> | null = null
+
+export const getOAuthClient = (): Promise<BrowserOAuthClient> => {
+  if (!clientPromise) {
+    clientPromise = BrowserOAuthClient.load({ clientId: CLIENT_ID })
+  }
+  return clientPromise
+}
+
+export const signInWithHandle = async (handle: string): Promise<void> => {
+  const client = await getOAuthClient()
+  await client.signInRedirect(handle, { scope: 'atproto transition:generic' })
+}
+
+export const restoreSession = async () => {
+  const client = await getOAuthClient()
+  const result = await client.init()
+  return result?.session ?? null
+}
+
+export const sdkSignOut = async (sub: string): Promise<void> => {
+  const client = await getOAuthClient()
+  await client.revoke(sub)
+}

src/modules/atproto/service/atprotoSession.ts

@@ -0,0 +1,23 @@
+import { data } from '@/data/data'
+import { DataType } from '@/data/DataType.enum'
+import { AtprotoSession } from '@/data/models/AtprotoSession'
+
+const SESSION_ID = `${DataType.AtprotoSession}-current`
+
+export const loadSession = (): Promise<AtprotoSession | null> => {
+  return data.get<DataType.AtprotoSession, AtprotoSession>(SESSION_ID)
+}
+
+export const saveSession = async (did: string, handle: string): Promise<void> => {
+  const session: AtprotoSession = {
+    _id: SESSION_ID,
+    $type: DataType.AtprotoSession,
+    did,
+    handle,
+  }
+  await data.update<DataType.AtprotoSession, AtprotoSession>(session)
+}
+
+export const clearSession = (): Promise<boolean> => {
+  return data.remove(SESSION_ID)
+}

src/modules/atproto/service/getFollows.ts

@@ -0,0 +1,24 @@
+export const getFollows = async (did: string): Promise<Set<string>> => {
+  const follows = new Set<string>()
+  let cursor: string | undefined
+
+  do {
+    const url = new URL('https://public.api.bsky.app/xrpc/app.bsky.graph.getFollows')
+    url.searchParams.set('actor', did)
+    url.searchParams.set('limit', '100')
+    if (cursor) {
+      url.searchParams.set('cursor', cursor)
+    }
+
+    const response = await fetch(url)
+    const result: { follows: { did: string }[]; cursor?: string } = await response.json()
+
+    for (const follow of result.follows) {
+      follows.add(follow.did)
+    }
+
+    cursor = result.cursor
+  } while (cursor)
+
+  return follows
+}

src/views/PublicNoteListByDidView.vue

@@ -9,7 +9,7 @@ import { computed } from "vue"
 const props = defineProps<{ did: string }>()
 const did = computed(() => props.did)
 
-const { notes, isLoading, canLoadMore, onLoadMore } = usePublicNoteList(did)
+const { notes, isLoading, canLoadMore, onLoadMore } = usePublicNoteList({ did })
 
 const author = computedAsync(async () => getAuthor(did.value))
 </script>

src/views/PublicNoteListView.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import BackButton from "@/components/BackButton.vue"
 import PublicNoteList from "@/components/PublicNoteList.vue"
+import SignInAtproto from "@/components/SignInAtproto.vue"
+import { useATProtoLogin } from "@/hooks/useATProtoLogin.hook"
+import { useFollows } from "@/hooks/useFollows.hook"
 import { usePublicNoteList } from "@/hooks/usePublicNoteList.hook"
 
+const { did, isLoggedIn } = useATProtoLogin()
+const { follows } = useFollows(did)
 const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
-  usePublicNoteList()
+  usePublicNoteList({ followsFilter: follows })
 </script>
 
 <template>
@@ -12,6 +17,10 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
     <div class="header">
       <back-button class="back-button" :fallback="{ name: 'Home' }" />
       <h1>Remanso notes</h1>
+      <sign-in-atproto />
+    </div>
+    <div v-if="isLoggedIn && follows.size > 0" class="follows-badge">
+      Showing follows only
     </div>
     <div v-if="isLoading"></div>
     <div v-else>
@@ -74,4 +83,11 @@ const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
     overflow-y: auto;
   }
 }
+
+.follows-badge {
+  font-size: 0.8rem;
+  opacity: 0.7;
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
 </style>