refactor: added back support for did/PDS logins and passes the locale onto the oauth screen (#1187)

Author: fatfingers23

app/components/Header/AuthModal.client.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { authRedirect } from '~/utils/atproto/helpers'
+import { ensureValidAtIdentifier } from '@atproto/syntax'
 
 const handleInput = shallowRef('')
+const errorMessage = shallowRef('')
 const route = useRoute()
 const { user, logout } = useAtproto()
 
@@ -13,26 +15,41 @@ const localeSubPath = ['ko', 'pt', 'ja'].includes(currentLang) ? currentLang : '
 const atprotoLink = `https://atproto.com/${localeSubPath}`
 
 async function handleBlueskySignIn() {
-  await authRedirect('https://bsky.social', { redirectTo: route.fullPath })
+  await authRedirect('https://bsky.social', { redirectTo: route.fullPath, locale: locale.value })
 }
 
 async function handleCreateAccount() {
-  await authRedirect('https://npmx.social', { create: true, redirectTo: route.fullPath })
+  await authRedirect('https://npmx.social', {
+    create: true,
+    redirectTo: route.fullPath,
+    locale: locale.value,
+  })
 }
 
 async function handleLogin() {
   if (handleInput.value) {
-    await authRedirect(handleInput.value)
+    // URLS to PDSs are valid for oauth redirects
+    if (!handleInput.value.startsWith('https://')) {
+      try {
+        ensureValidAtIdentifier(handleInput.value)
+      } catch (error) {
+        errorMessage.value =
+          error instanceof Error ? error.message : $t('auth.modal.default_input_error')
+        return
+      }
+    }
+    await authRedirect(handleInput.value, {
+      redirectTo: route.fullPath,
+      locale: locale.value,
+    })
   }
 }
 
 watch(handleInput, newHandleInput => {
+  errorMessage.value = ''
   if (!newHandleInput) return
 
-  const normalized = newHandleInput
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9.-]/g, '')
+  const normalized = newHandleInput.trim().toLowerCase().replace(/@/g, '')
 
   if (normalized !== newHandleInput) {
     handleInput.value = normalized
@@ -81,6 +98,9 @@ watch(handleInput, newHandleInput => {
             v-bind="noCorrect"
             class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 hover:border-fg-subtle focus:border-accent focus-visible:(outline-2 outline-accent/70)"
           />
+          <p v-if="errorMessage" class="text-red-500 text-xs mt-1" role="alert">
+            {{ errorMessage }}
+          </p>
         </div>
 
         <details class="text-sm">

app/utils/atproto/helpers.ts

@@ -4,13 +4,14 @@ import type { LocationQueryRaw } from 'vue-router'
 interface AuthRedirectOptions {
   create?: boolean
   redirectTo?: string
+  locale?: string
 }
 
 /**
  * Redirect user to ATProto authentication
  */
 export async function authRedirect(identifier: string, options: AuthRedirectOptions = {}) {
-  let query: LocationQueryRaw = { handle: identifier }
+  let query: LocationQueryRaw = { handle: identifier, locale: options.locale || 'en' }
   if (options.create) {
     query = { ...query, create: 'true' }
   }

i18n/locales/en.json

@@ -796,7 +796,8 @@
       "create_account": "Create a new account",
       "connect_bluesky": "Connect with Bluesky",
       "what_is_atmosphere": "What is an Atmosphere account?",
-      "atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account."
+      "atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account.",
+      "default_input_error": "Please enter a valid handle, DID, or a full PDS URL"
     }
   },
   "header": {

lunaria/files/en-GB.json

@@ -796,7 +796,8 @@
       "create_account": "Create a new account",
       "connect_bluesky": "Connect with Bluesky",
       "what_is_atmosphere": "What is an Atmosphere account?",
-      "atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account."
+      "atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account.",
+      "default_input_error": "Please enter a valid handle, DID, or a full PDS URL"
     }
   },
   "header": {

lunaria/files/en-US.json

@@ -796,7 +796,8 @@
       "create_account": "Create a new account",
       "connect_bluesky": "Connect with Bluesky",
       "what_is_atmosphere": "What is an Atmosphere account?",
-      "atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account."
+      "atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account.",
+      "default_input_error": "Please enter a valid handle, DID, or a full PDS URL"
     }
   },
   "header": {

nuxt.config.ts

@@ -262,6 +262,7 @@ export default defineNuxtConfig({
         'semver',
         'validate-npm-package-name',
         '@atproto/lex',
+        '@atproto/syntax',
         'fast-npm-meta',
         '@floating-ui/vue',
       ],

server/api/auth/atproto.get.ts

@@ -13,6 +13,9 @@ import { ensureValidAtIdentifier } from '@atproto/syntax'
 // @ts-expect-error virtual file from oauth module
 import { clientUri } from '#oauth/config'
 
+//I did not have luck with other ones than these. I got this list from the PDS language picker
+const OAUTH_LOCALES = new Set(['en', 'fr-FR', 'ja-JP'])
+
 /**
  * Fetch the user's profile record to get their avatar blob reference
  * @param did
@@ -98,9 +101,13 @@ export default defineEventHandler(async event => {
         })
       }
 
+      const localeFromQuery = query.locale?.toString() ?? 'en'
+      const locale = OAUTH_LOCALES.has(localeFromQuery) ? localeFromQuery : 'en'
+
       const redirectUrl = await atclient.authorize(handle, {
         scope,
         prompt: create ? 'create' : undefined,
+        ui_locales: locale,
       })
       return sendRedirect(event, redirectUrl.toString())
     } catch (error) {