@atproto/oauth-provider 0.5.0 → 0.5.2

package/src/account/account-store.ts

@@ -1,6 +1,7 @@
 import { isEmailValid } from '@hapi/address'
 import { isDisposableEmail } from 'disposable-email-domains-js'
 import { z } from 'zod'
+import { ensureValidHandle, normalizeHandle } from '@atproto/syntax'
 import { ClientId } from '../client/client-id.js'
 import { DeviceId } from '../device/device-id.js'
 import { localeSchema } from '../lib/locale.js'
@@ -16,12 +17,24 @@ import { Account } from './account.js'
 // @NOTE Change the length here to force stronger passwords (through a reset)
 export const oldPasswordSchema = z.string().min(1)
 export const newPasswordSchema = z.string().min(8)
-export const tokenSchema = z.string().regex(/^[A-Z2-7]{5}-[A-Z2-7]{5}$/)
+export const tokenSchema = z
+  .string()
+  .regex(/^[A-Z2-7]{5}-[A-Z2-7]{5}$/, 'Invalid token format')
 export const handleSchema = z
   .string()
-  .min(3)
-  .max(30)
-  .regex(/^[a-z0-9][a-z0-9-]+[a-z0-9](?:\.[a-z0-9][a-z0-9-]+[a-z0-9])+$/)
+  // @NOTE: We only check against validity towards ATProto's syntax. Additional
+  // rules may be imposed by the store implementation.
+  .superRefine((value, ctx) => {
+    try {
+      ensureValidHandle(value)
+    } catch (err) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: err instanceof Error ? err.message : 'Invalid handle',
+      })
+    }
+  })
+  .transform(normalizeHandle)
 export const emailSchema = z
   .string()
   .email()
@@ -34,13 +47,15 @@ export const emailSchema = z
   .refine((email) => !isDisposableEmail(email), {
     message: 'Disposable email addresses are not allowed',
   })
+  .transform((value) => value.toLowerCase())
+export const inviteCodeSchema = z.string().min(1)
 
 export const authenticateAccountDataSchema = z
   .object({
     locale: localeSchema,
     username: z.string(),
     password: oldPasswordSchema,
-    emailOtp: z.string().optional(),
+    emailOtp: tokenSchema.optional(),
   })
   .strict()
 
@@ -54,7 +69,7 @@ export const createAccountDataSchema = z
     handle: handleSchema,
     email: emailSchema,
     password: z.intersection(oldPasswordSchema, newPasswordSchema),
-    inviteCode: tokenSchema.optional(),
+    inviteCode: inviteCodeSchema.optional(),
   })
   .strict()
 

package/src/assets/app/components/forms/input-checkbox.tsx

@@ -22,11 +22,13 @@ export function InputCheckbox({
   id,
   ref,
   disabled,
+  title,
+  'aria-label': ariaLabel = title,
   'aria-labelledby': ariaLabelledBy,
   ...props
 }: InputCheckboxProps) {
   const htmlFor = useRandomString('input-checkbox-')
-  const containerRef = useRef<HTMLDivElement>(null)
+  const labelRef = useRef<HTMLLabelElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const ctx = useContext(FieldsetContext)
 
@@ -34,12 +36,13 @@ export function InputCheckbox({
 
   return (
     <InputContainer
-      ref={containerRef}
       className={clsx('cursor-pointer', className)}
       icon={
         <input
           {...props}
           disabled={disabled ?? ctx.disabled}
+          title={title}
+          aria-label={ariaLabel}
           aria-labelledby={
             children
               ? // Prefer the local "<label>" element (through "htmlFor") over the wrapping "<fieldset>" to describe the checkbox.
@@ -53,15 +56,17 @@ export function InputCheckbox({
         />
       }
       tabIndex={-1}
-      onClick={(event) => {
-        if (event.target === containerRef.current && !event.defaultPrevented) {
-          inputRef.current?.click()
-          inputRef.current?.focus()
-        }
+      onClick={({ target }) => {
+        // Native behavior of clicking the label should toggle the checkbox.
+        if (target === labelRef.current) return
+        if (target === inputRef.current) return
+
+        inputRef.current?.click()
       }}
     >
       {children && (
         <label
+          ref={labelRef}
           htmlFor={inputId}
           className="block w-full leading-[1.6] select-none cursor-pointer"
         >

package/src/assets/app/components/forms/input-email-address.tsx

@@ -26,6 +26,7 @@ export function InputEmailAddress({
   spellCheck = 'false',
   value,
   defaultValue = value,
+  title,
   ...props
 }: InputEmailAddressProps) {
   const { t } = useLingui()
@@ -46,10 +47,8 @@ export function InputEmailAddress({
 
   return (
     <InputText
-      aria-label={t`Email`}
-      placeholder={t`Email`}
-      title={t`Email`}
       {...props}
+      title={title ?? t`Email address`}
       type="email"
       autoCapitalize={autoCapitalize}
       autoCorrect={autoCorrect}

package/src/assets/app/components/forms/input-password.tsx

@@ -25,6 +25,7 @@ export function InputPassword({
   value,
   defaultValue = value,
   ref,
+  title,
   dir = 'auto',
   autoCapitalize = 'none',
   autoCorrect = 'off',
@@ -48,10 +49,8 @@ export function InputPassword({
 
   return (
     <InputText
-      placeholder={t`Password`}
-      aria-label={t`Password`}
-      title={t`Password`}
       {...props}
+      title={title ?? t`Password`}
       ref={mergeRefs([ref, inputRef])}
       dir={dir}
       autoCapitalize={autoCapitalize}

package/src/assets/app/components/forms/input-text.tsx

@@ -26,7 +26,10 @@ export function InputText({
   onBlur,
   ref,
   disabled,
+  title,
+  'aria-label': ariaLabel = title,
   'aria-labelledby': ariaLabelledBy,
+  placeholder = ariaLabel,
   ...props
 }: InputTextProps) {
   const ctx = useContext(FieldsetContext)
@@ -59,6 +62,9 @@ export function InputText({
       <input
         {...props}
         disabled={disabled ?? ctx.disabled}
+        title={title}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy ?? ctx.labelId}
         ref={mergeRefs([ref, inputRef])}
         className="w-full bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder-gray-500 text-ellipsis"

package/src/assets/app/components/utils/error-message.tsx

@@ -1,9 +1,12 @@
 import { Trans } from '@lingui/react/macro'
 import { ReactNode, memo } from 'react'
 import {
+  AccessDeniedError,
   EmailTakenError,
   HandleUnavailableError,
   InvalidCredentialsError,
+  InvalidInviteCodeError,
+  InvalidRequestError,
   RequestExpiredError,
   SecondAuthenticationFactorRequiredError,
   UnknownRequestUriError,
@@ -17,12 +20,19 @@ export type ApiErrorMessageProps = {
 export const ErrorMessage = memo(function ErrorMessage({
   error,
 }: ApiErrorMessageProps): ReactNode {
+  // Matches the order of the error checks in the API's parseError method (must
+  // be from most specific to least specific to avoid unreachable code paths).
+
+  if (error instanceof SecondAuthenticationFactorRequiredError) {
+    return <Trans>A second authentication factor is required</Trans>
+  }
+
   if (error instanceof InvalidCredentialsError) {
     return <Trans>Wrong identifier or password</Trans>
   }
 
-  if (error instanceof EmailTakenError) {
-    return <Trans>This email is already used</Trans>
+  if (error instanceof InvalidInviteCodeError) {
+    return <Trans>The invite code is not valid</Trans>
   }
 
   if (error instanceof HandleUnavailableError) {
@@ -43,8 +53,8 @@ export const ErrorMessage = memo(function ErrorMessage({
     }
   }
 
-  if (error instanceof SecondAuthenticationFactorRequiredError) {
-    return <Trans>A second authentication factor is required</Trans>
+  if (error instanceof EmailTakenError) {
+    return <Trans>This email is already used</Trans>
   }
 
   if (
@@ -54,6 +64,22 @@ export const ErrorMessage = memo(function ErrorMessage({
     return <Trans>This sign-in session has expired</Trans>
   }
 
+  if (error instanceof InvalidRequestError) {
+    return (
+      <Trans>
+        The data you submitted is invalid. Please check the form and try again.
+      </Trans>
+    )
+  }
+
+  if (error instanceof AccessDeniedError) {
+    return (
+      <Trans>
+        This authorization request has been denied. Please try again.
+      </Trans>
+    )
+  }
+
   if (error instanceof JsonErrorResponse) {
     return <Trans>Unexpected server response</Trans>
   }

package/src/assets/app/lib/api.ts

@@ -50,7 +50,7 @@ export type SessionResponse = {
 export class Api extends JsonClient<{
   '/verify-handle-availability': {
     input: VerifyHandleAvailabilityData
-    output: void
+    output: { available: true }
   }
   '/sign-up': {
     input: SignUpData
@@ -62,11 +62,11 @@ export class Api extends JsonClient<{
   }
   '/reset-password-request': {
     input: InitiatePasswordResetData
-    output: void
+    output: { success: true }
   }
   '/reset-password-confirm': {
     input: ConfirmResetPasswordData
-    output: void
+    output: { success: true }
   }
 }> {
   constructor(csrfToken: string) {
@@ -97,6 +97,9 @@ export class Api extends JsonClient<{
     if (InvalidCredentialsError.is(json)) {
       return new InvalidCredentialsError(json)
     }
+    if (InvalidInviteCodeError.is(json)) {
+      return new InvalidInviteCodeError(json)
+    }
     if (HandleUnavailableError.is(json)) {
       return new HandleUnavailableError(json)
     }
@@ -151,6 +154,25 @@ export class InvalidRequestError<
   }
 }
 
+export type InvalidInviteCodePayload = InvalidRequestPayload & {
+  error_description: `This invite code is invalid.${string}`
+}
+export class InvalidInviteCodeError<
+  P extends InvalidInviteCodePayload = InvalidInviteCodePayload,
+> extends InvalidRequestError<P> {
+  constructor(payload: P) {
+    super(payload)
+  }
+
+  static is(json: unknown): json is InvalidInviteCodePayload {
+    return (
+      super.is(json) &&
+      json.error_description != null &&
+      json.error_description.startsWith('This invite code is invalid.')
+    )
+  }
+}
+
 export type RequestExpiredPayload = AccessDeniedPayload & {
   error_description: 'This request has expired'
 }

package/src/assets/app/locales/an/messages.po

@@ -17,11 +17,11 @@ msgstr ""
 msgid "<0/> is asking for permission to access your account (<1/>)."
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:221
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:219
 msgid "2FA Confirmation"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:47
+#: src/assets/app/components/utils/error-message.tsx:27
 msgid "A second authentication factor is required"
 msgstr ""
 
@@ -45,7 +45,7 @@ msgstr ""
 msgid "An application on your device"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:61
+#: src/assets/app/components/utils/error-message.tsx:87
 msgid "An unknown error occurred"
 msgstr ""
 
@@ -78,8 +78,6 @@ msgstr ""
 msgid "By clicking <0>Authorize</0>, you allow this application to perform the following actions in accordance with their <1>terms of service</1> and <2>privacy policy</2>:"
 msgstr ""
 
-#. placeholder {0}: tosLink ? ( <LinkAnchor className="text-brand underline" link={tosLink}> <Trans>Terms of Service</Trans> </LinkAnchor> ) : ( <Trans>Terms of Service</Trans> )
-#. placeholder {1}: ppLink ? ( <LinkAnchor className="text-brand underline" link={ppLink}> <Trans>Privacy Policy</Trans> </LinkAnchor> ) : ( <Trans>Privacy Policy</Trans> )
 #: src/assets/app/views/authorize/sign-up/sign-up-disclaimer.tsx:30
 msgid "By creating an account you agree to the {0} and the {1} of this service."
 msgstr ""
@@ -89,8 +87,7 @@ msgstr ""
 msgid "Cancel"
 msgstr ""
 
-#. placeholder {0}: secondFactor.hint
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:234
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:232
 msgid "Check your {0} email for a login code and enter it here."
 msgstr ""
 
@@ -110,7 +107,7 @@ msgstr ""
 msgid "Confirm your password to continue"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:225
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:223
 msgid "Confirmation code"
 msgstr ""
 
@@ -130,19 +127,17 @@ msgstr ""
 msgid "Description"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:112
-#: src/assets/app/components/forms/input-email-address.tsx:49
-#: src/assets/app/components/forms/input-email-address.tsx:50
-#: src/assets/app/components/forms/input-email-address.tsx:51
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:114
 msgid "Email"
 msgstr ""
 
 #: src/assets/app/views/authorize/reset-password/reset-password-request-form.tsx:55
 #: src/assets/app/views/authorize/reset-password/reset-password-request-form.tsx:60
+#: src/assets/app/components/forms/input-email-address.tsx:51
 msgid "Email address"
 msgstr ""
 
-#: src/assets/app/components/forms/input-new-password.tsx:48
+#: src/assets/app/components/forms/input-new-password.tsx:44
 msgid "Enter a password"
 msgstr ""
 
@@ -158,7 +153,7 @@ msgstr ""
 msgid "Enter your email address"
 msgstr ""
 
-#: src/assets/app/components/forms/input-new-password.tsx:49
+#: src/assets/app/components/forms/input-new-password.tsx:45
 msgid "Enter your new password"
 msgstr ""
 
@@ -175,6 +170,10 @@ msgstr ""
 msgid "Error"
 msgstr ""
 
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:102
+msgid "example-com-xxxxx-xxxxx"
+msgstr ""
+
 #: src/assets/app/components/utils/password-strength-label.tsx:25
 msgid "Extra"
 msgstr ""
@@ -183,11 +182,10 @@ msgstr ""
 msgid "Forgot Password"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:180
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:178
 msgid "Forgot?"
 msgstr ""
 
-#. placeholder {0}: account.preferred_username || account.email || account.sub
 #: src/assets/app/views/authorize/accept/accept-view.tsx:40
 msgid "Grant access to your <0>{0}</0> account"
 msgstr ""
@@ -212,13 +210,12 @@ msgstr ""
 msgid "Interface language selector"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:277
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:275
 msgid "Invalid"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:95
-#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:99
-#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:100
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:96
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:101
 msgid "Invite code"
 msgstr ""
 
@@ -272,9 +269,7 @@ msgstr ""
 msgid "Only letters, numbers, and hyphens"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:126
-#: src/assets/app/components/forms/input-password.tsx:51
-#: src/assets/app/components/forms/input-password.tsx:52
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:128
 #: src/assets/app/components/forms/input-password.tsx:53
 msgid "Password"
 msgstr ""
@@ -295,11 +290,11 @@ msgstr ""
 msgid "Password updated!"
 msgstr ""
 
-#: src/assets/app/components/forms/input-new-password.tsx:50
+#: src/assets/app/components/forms/input-new-password.tsx:46
 msgid "Password with at least {MIN_PASSWORD_LENGTH} characters"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:194
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:192
 msgid "Please verify the domain name of the website before entering your password. Never enter your password on a domain you do not trust."
 msgstr ""
 
@@ -309,8 +304,8 @@ msgstr ""
 msgid "Privacy Policy"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:208
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:213
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:206
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:211
 msgid "Remember this account on this device"
 msgstr ""
 
@@ -326,11 +321,11 @@ msgstr ""
 msgid "Reset Password"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:178
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:176
 msgid "Reset your password"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:198
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:196
 msgid "Select domain"
 msgstr ""
 
@@ -338,7 +333,7 @@ msgstr ""
 msgid "Select from an existing account"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:204
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:202
 msgid "Session"
 msgstr ""
 
@@ -348,7 +343,6 @@ msgstr ""
 msgid "Sign in"
 msgstr ""
 
-#. placeholder {0}: account.name
 #: src/assets/app/views/authorize/sign-in/sign-in-picker.tsx:75
 msgid "Sign in as {0}"
 msgstr ""
@@ -383,45 +377,55 @@ msgstr ""
 msgid "Terms of Service"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:42
+#: src/assets/app/components/utils/error-message.tsx:52
 msgid "That handle cannot be used"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:33
+#: src/assets/app/components/utils/error-message.tsx:69
+msgid "The data you submitted is invalid. Please check the form and try again."
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:43
 msgid "The domain name is not allowed"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:35
+#: src/assets/app/components/utils/error-message.tsx:45
 msgid "The handle contains inappropriate language"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:40
+#: src/assets/app/components/utils/error-message.tsx:50
 msgid "The handle is already in use"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:31
+#: src/assets/app/components/utils/error-message.tsx:41
 msgid "The handle is invalid"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:25
+#: src/assets/app/components/utils/error-message.tsx:35
+msgid "The invite code is not valid"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:77
+msgid "This authorization request has been denied. Please try again."
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:57
 msgid "This email is already used"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:38
+#: src/assets/app/components/utils/error-message.tsx:48
 msgid "This handle is reserved"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:54
+#: src/assets/app/components/utils/error-message.tsx:64
 msgid "This sign-in session has expired"
 msgstr ""
 
 #: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:166
-#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:167
-#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:168
 msgid "Type your desired username"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:58
+#: src/assets/app/components/utils/error-message.tsx:84
 msgid "Unexpected server response"
 msgstr ""
 
@@ -430,23 +434,18 @@ msgid "Uniquely identify you"
 msgstr ""
 
 #: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:143
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:144
 msgid "Username or email address"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:272
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:270
 msgid "Valid"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:154
-msgid "Valid email address or username"
-msgstr ""
-
 #: src/assets/app/views/authorize/sign-up/sign-up-view.tsx:135
 msgid "Verify you are human"
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:191
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:189
 msgid "Warning"
 msgstr ""
 
@@ -458,7 +457,7 @@ msgstr ""
 msgid "Weak"
 msgstr ""
 
-#: src/assets/app/components/utils/error-message.tsx:21
+#: src/assets/app/components/utils/error-message.tsx:31
 msgid "Wrong identifier or password"
 msgstr ""
 
@@ -466,7 +465,7 @@ msgstr ""
 msgid "You are being redirected..."
 msgstr ""
 
-#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:237
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:235
 msgid "You can change this username to any domain name you control after your account is set up."
 msgstr ""
 
@@ -482,8 +481,7 @@ msgstr ""
 msgid "Your account"
 msgstr ""
 
-#. placeholder {0}: segment.length ? ( <strong className="text-gray-800 dark:text-gray-200"> {preview} </strong> ) : ( <span aria-hidden className="bg-gray-300 dark:bg-slate-600 rounded-md p-2 w-24" /> )
-#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:219
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:217
 msgid "Your full username will be: {0}"
 msgstr ""