various changes to authproto

Author: essential-randomness

.changeset/expose-logged-in-client.md

@@ -0,0 +1,5 @@
+---
+"@fujocoded/authproto": minor
+---
+
+Add loggedInClient to Astro.locals and expose the full OAuthSession for the new lex package.

.changeset/login-input-attributes.md

@@ -0,0 +1,7 @@
+---
+"@fujocoded/authproto": patch
+---
+
+Add input attributes to Login component for better mobile UX (placeholder, inputmode, autocorrect, autocapitalize, autocomplete, spellcheck).  
+Allow user to pass down form props to form.
+Partially based on https://tangled.org/strings/did:plc:4gt3dbmp4pydjiemob4konzm/3mihke6jals22

astro-authproto/README.md

@@ -72,8 +72,7 @@ In this package, you'll find:
 - [Server adapter](https://docs.astro.build/en/guides/on-demand-rendering/#server-adapters) to set up sessions
 - (Optional) [session driver](https://docs.astro.build/en/reference/configuration-reference/#sessiondriver) to allow users to log in or log out
 
-> [!IMPORTANT]
-> `deno` requires a workaround due to a CJS/ESM import issue within
+> [!IMPORTANT] > `deno` requires a workaround due to a CJS/ESM import issue within
 > `@atproto/oauth-client-node`. For now, avoid using `deno` and use other package managers.
 
 > [!IMPORTANT]
@@ -92,8 +91,8 @@ npx astro add @fujocoded/authproto
 This will automatically install `@fujocoded/authproto` and add the integration to your `astro.config.mjs` file.
 
 > [!TIP]
-> 
-> You can take a look at all the [possible configuration options below](#configuration-options).
+>
+> You can take a look at [all the settings you can tweak below](#configuring-authproto).
 
 ### Manual Installation
 
@@ -123,10 +122,12 @@ export default defineConfig({
 
 > [!TIP]
 >
-> You can take a look at all the [possible configuration options below](#configuration-options).
+> You can take a look at [all the settings you can tweak below](#configuring-authproto).
 
 # Using `@fujocoded/authproto`
 
+## Add your login form
+
 Add the `<Login />` component to your site, like this:
 
 ```jsx
@@ -138,14 +139,14 @@ import { Login } from "@fujocoded/authproto/components";
 <Login />
 ```
 
-> [!TIP]
-> 
-> You might run into a naming collision issue if you also have a page named `login`. You can fix this by replacing `{ Login }` with `{ Login as LoginComponent }`.
-
 It'll look like a plain form:
 
 <!-- screenshot -->
 
+See [Customizing the login form](#customizing-the-login-form) for ways to change how it looks and where it sends people after they log in.
+
+## Make a page only visible to logged in users
+
 To make a page only visible to logged in users:
 
 ```jsx
@@ -167,18 +168,31 @@ if (!loggedInUser) {
 
 ... And you've got authentication working on your Astro site!
 
+> [!TIP]
+>
+> If you also have a page file named `login.astro`, you'll see the TypeScript error `Import declaration conflicts with local declaration of 'Login'` on the import line. Fix it by renaming the import:
+>
+> ```js
+> import { Login as LoginComponent } from "@fujocoded/authproto/components";
+> ```
+
 # Okay how do I _actually_ do stuff with this?
 
 Check out the example sites included under the [examples folder](./__examples__/).
 
-# Configuration options
+# Configuring authproto
+
+These settings go inside the `authproto({ ... })` call in your
+`astro.config.mjs`.
 
 - `applicationName`, required. The name of your application. For example, you
   can set this to `"My personal guestbook"`!
 - `applicationDomain`, required. It should be a domain that your site is on, or
   you can just put in `"localhost:4321"` for now.
-- `defaultDevUser`, optional. The default handle that gets filled out in the
-  `<Login />` component during development.
+- `defaultDevUser`, optional. A handle that gets pre-filled into the
+  [login form](#customizing-the-login-form) while you're developing your site
+  locally (never in production). Saves you from re-typing your handle every
+  time you restart the dev server.
 - `driver`, optional. The driver used to store data about OAuth sessions. This
   takes Astro's [session driver options](https://docs.astro.build/en/reference/configuration-reference/#sessiondriver).
   You can also set this with `name: "astro:db"` to utilize [Astro's DB
@@ -200,6 +214,34 @@ Check out the example sites included under the [examples folder](./__examples__/
     permissions to include other services. This should be an array of strings,
     like this: `["scope1", "scope2"]`
 
+# Customizing the login form
+
+You can change how `<Login />` looks and behaves by passing it these options:
+
+- `redirect`, optional. Where to send the user after they successfully log in
+  or log out.
+- `placeholder`, optional. The hint text shown inside the input when it's
+  empty. Defaults to `"handle.bsky.social"`.
+- Any standard HTML `<form>` attribute: `class`, `class:list`, `id`,
+  `aria-*`, `data-*`, `style`, and so on. These get applied directly to the
+  form, so you can style it, label it for screen readers, or use any field other libraries may require.
+  - NOTE: `action` and `method` are set by the component — they're what makes
+    login and logout work, so they can't be changed.
+
+> [!TIP]
+>
+> During development, you can pre-fill the input with a default handle by
+> setting [`defaultDevUser`](#configuring-authproto) in your `astro.config.mjs`.
+
+```jsx
+<Login
+  class="my-login-form"
+  aria-label="Sign in with your Atmosphere account"
+  redirect="/dashboard"
+  placeholder="you.bsky.social"
+/>
+```
+
 # Support Us
 
 You can check out more of our plugins here:

astro-authproto/src/components/Login.astro

@@ -1,44 +1,44 @@
 ---
+import type { HTMLAttributes } from "astro/types";
 import { defaultDevUser } from "fujocoded:authproto/config";
 
-interface Props {
+interface Props extends Omit<HTMLAttributes<"form">, "action" | "method"> {
   /** Optional redirect URL after successful login/logout */
   redirect?: string;
+  placeholder?: string;
 }
 
-const { redirect: redirectUrl } = Astro.props;
+const {
+  redirect: redirectUrl,
+  placeholder = "handle.bsky.social",
+  ...formAttrs
+} = Astro.props;
 const currentUser = Astro.locals.loggedInUser;
 const currentError =
   Astro.locals.authproto?.errorDescription ?? Astro.locals.authproto?.errorCode;
-
-// @ts-expect-error
-const { class: cssClass, "class:list": cssClassList } = Astro.props;
 ---
 
 {
   currentUser ? (
     // If there's a current user, show the log out button
-    <form
-      action="/oauth/logout"
-      method="post"
-      class={cssClass}
-      class:list={cssClassList}
-    >
+    <form {...formAttrs} action="/oauth/logout" method="post">
       {redirectUrl && (
         <input type="hidden" name="redirect" value={redirectUrl} />
       )}
       <button type="submit">Logout</button>
     </form>
   ) : (
     // If there's no current user, show the login button
-    <form
-      action="/oauth/login"
-      method="post"
-      class={cssClass}
-      class:list={cssClassList}
-    >
+    <form {...formAttrs} action="/oauth/login" method="post">
       <input
+        type="text"
         name="atproto-id"
+        placeholder={placeholder}
+        inputmode="email"
+        autocorrect="off"
+        autocapitalize="off"
+        autocomplete="username"
+        spellcheck="false"
         value={import.meta.env.DEV ? defaultDevUser : undefined}
       />
       {redirectUrl && (

astro-authproto/src/routes/middleware.ts

@@ -23,6 +23,7 @@ export const onRequest: MiddlewareHandler = async (
 
   if (!session || !userDid) {
     locals.loggedInUser = null;
+    locals.loggedInClient = null;
     return next();
   }
 
@@ -36,10 +37,12 @@ export const onRequest: MiddlewareHandler = async (
         handle: await didToHandle(loggedInClient.did),
         fetchHandler: loggedInClient.fetchHandler.bind(loggedInClient),
       };
+      locals.loggedInClient = loggedInClient;
     }
   } catch (e) {
     await session.delete("atproto-did");
     locals.loggedInUser = null;
+    locals.loggedInClient = null;
   }
 
   return next();

astro-authproto/src/types.d.ts

@@ -13,6 +13,7 @@ declare global {
         handle: string;
         fetchHandler: import("@atproto/oauth-client-node").OAuthSession["fetchHandler"];
       } | null;
+      loggedInClient: import("@atproto/oauth-client-node").OAuthSession | null;
       authproto: {
         attemptedHandle?: string;
         errorDescription?: string;