@atproto/oauth-provider-ui 0.0.2 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atproto/oauth-provider-ui
 
+## 0.1.0
+
+### Minor Changes
+
+- [#3659](https://github.com/bluesky-social/atproto/pull/3659) [`371e04aad`](https://github.com/bluesky-social/atproto/commit/371e04aad2a3e8ae3fe185ce15fc8eb051cab78e) Thanks [@matthieusieben](https://github.com/matthieusieben)! - New build system
+
+### Patch Changes
+
+- [#3667](https://github.com/bluesky-social/atproto/pull/3667) [`8b98fec88`](https://github.com/bluesky-social/atproto/commit/8b98fec8857aacddeed9efb5c755474951e6d9d4) Thanks [@matthieusieben](https://github.com/matthieusieben)! - Hide client id pathname if it is exaclty `/oauth-client-metadata.json`
+
 ## 0.0.2
 
 ### Patch Changes

package/{src/authorization-page.html → authorization-page.html}

@@ -26,30 +26,27 @@
        */
     </script>
     <style>
-      /*
-       * PDS branding configuration (colors), in R G B format.
-       *
-       * The variables here are meant to override the default values defined in
-       * main.css. These values are typically generated by the backend and
-       * injected into the HTML. The colors suffixed with "-c" denote the
-       * "contrast" color of the corresponding color name. These are also
-       * automatically generated by the backend from the branding colors.
-       *
-       * The default colors can be seen by commenting out a color name (and
-       * corresponding "-c" contrast color) below:
-       */
       :root {
-        --color-brand: 10 122 255;
-        --color-brand-c: 255 255 255;
-        --color-error: 244 11 66;
-        --color-error-c: 255 255 255;
-        --color-warning: 251 86 7;
-        --color-warning-c: 255 255 255;
-        --color-success: 2 195 154;
-        --color-success-c: 0 0 0;
+        --branding-color-primary: 10 122 255;
+        --branding-color-primary-contrast: 255 255 255;
+        --branding-color-primary-hue: 212.57142857142856;
+
+        --branding-color-error: 244 11 66;
+        --branding-color-error-contrast: 255 255 255;
+        --branding-color-error-hue: 345.83690987124464;
+
+        --branding-color-warning: 251 86 7;
+        --branding-color-warning-contrast: 255 255 255;
+        --branding-color-warning-hue: 19.426229508196723;
+
+        --branding-color-success: 2 195 154;
+        --branding-color-success-contrast: 0 0 0;
+        --branding-color-success-hue: 167.2538860103627;
       }
     </style>
     <script type="module">
+      import { API_ENDPOINT_PREFIX } from '@atproto/oauth-provider-api'
+
       /*
        * PDS branding configuration
        */
@@ -106,8 +103,6 @@
 
       document.cookie = `csrf-${requestUri}=xyz; path=/`
 
-      window.__availableLocales = ['en', 'fr']
-
       window.__customizationData = {
         availableUserDomains,
         inviteCodeRequired: false,
@@ -129,7 +124,6 @@
         clientTrusted: false,
         requestUri,
         loginHint,
-        newSessionsRequireConsent: true,
         sessions: [],
         scopeDetails: [
           { scope: 'atproto' },
@@ -143,11 +137,17 @@
       async function mockFetch(...args) {
         const [input, init] = args
 
-        if (typeof input === 'string' && init.method === 'POST') {
-          const url = new URL(input, window.location)
-          switch (url.pathname) {
-            case '/oauth/authorize/sign-up':
-            case '/oauth/authorize/sign-in':
+        const method = init?.method ?? 'GET'
+        const url =
+          typeof input === 'string'
+            ? new URL(input, window.location)
+            : input instanceof URL
+              ? input
+              : undefined
+        if (url) {
+          switch (`${method} ${url.pathname}`) {
+            case `POST ${API_ENDPOINT_PREFIX}/sign-up`:
+            case `POST ${API_ENDPOINT_PREFIX}/sign-in`:
               return new Response(
                 JSON.stringify({
                   consentRequired: false,
@@ -160,11 +160,14 @@
                     picture: 'https://cat.com/cat.jpg',
                   },
                 }),
-                { status: 200 },
+                {
+                  status: 200,
+                  headers: { 'Content-Type': 'application/json' },
+                },
               )
-            case '/oauth/authorize/verify-handle-availability':
-            case '/oauth/authorize/reset-password-request':
-            case '/oauth/authorize/reset-password-confirm':
+            case `POST ${API_ENDPOINT_PREFIX}/verify-handle-availability`:
+            case `POST ${API_ENDPOINT_PREFIX}/reset-password-request`:
+            case `POST ${API_ENDPOINT_PREFIX}/reset-password-confirm`:
               return new Response(null, { status: 204 })
           }
         }
@@ -178,6 +181,6 @@
         configurable: true,
       })
     </script>
-    <script src="./authorization-page.tsx" type="module"></script>
+    <script src="./src/authorization-page.tsx" type="module"></script>
   </body>
 </html>

package/{src/error-page.html → error-page.html}

@@ -26,27 +26,22 @@
        */
     </script>
     <style>
-      /*
-       * PDS branding configuration (colors), in R G B format.
-       *
-       * The variables here are meant to override the default values defined in
-       * main.css. These values are typically generated by the backend and
-       * injected into the HTML. The colors suffixed with "-c" denote the
-       * "contrast" color of the corresponding color name. These are also
-       * automatically generated by the backend from the branding colors.
-       *
-       * The default colors can be seen by commenting out a color name (and
-       * corresponding "-c" contrast color) below:
-       */
       :root {
-        --color-brand: 10 122 255;
-        --color-brand-c: 255 255 255;
-        --color-error: 244 11 66;
-        --color-error-c: 255 255 255;
-        --color-warning: 251 86 7;
-        --color-warning-c: 255 255 255;
-        --color-success: 2 195 154;
-        --color-success-c: 0 0 0;
+        --branding-color-primary: 10 122 255;
+        --branding-color-primary-contrast: 255 255 255;
+        --branding-color-primary-hue: 212.57142857142856;
+
+        --branding-color-error: 244 11 66;
+        --branding-color-error-contrast: 255 255 255;
+        --branding-color-error-hue: 345.83690987124464;
+
+        --branding-color-warning: 251 86 7;
+        --branding-color-warning-contrast: 255 255 255;
+        --branding-color-warning-hue: 19.426229508196723;
+
+        --branding-color-success: 2 195 154;
+        --branding-color-success-contrast: 0 0 0;
+        --branding-color-success-hue: 167.2538860103627;
       }
     </style>
     <script type="module">
@@ -57,7 +52,7 @@
       const name = 'Bluesky'
       const links = [
         {
-          title: { en: 'Home' },
+          title: { en: 'Home', fr: 'Accueil' },
           href: 'https://bsky.social/',
           rel: 'canonical', // prevents the login page from being indexed by search engines
         },
@@ -104,8 +99,6 @@
 
       const requestUri = 'foo-bar'
 
-      window.__availableLocales = ['en', 'fr']
-
       window.__customizationData = {
         availableUserDomains,
         inviteCodeRequired: false,
@@ -120,6 +113,6 @@
         error_description: 'bar',
       }
     </script>
-    <script src="./error-page.tsx" type="module"></script>
+    <script src="./src/error-page.tsx" type="module"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atproto/oauth-provider-ui",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "license": "MIT",
   "description": "Sign-in & Sign-up UI for the @atproto/oauth-provider",
   "homepage": "https://atproto.com",
@@ -9,17 +9,22 @@
     "url": "https://github.com/bluesky-social/atproto",
     "directory": "packages/oauth/oauth-provider-ui"
   },
+  "engines": {
+    "node": ">=18.7.0"
+  },
   "type": "commonjs",
-  "main": "dist/lib/index.js",
-  "types": "dist/lib/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/lib/index.d.ts",
-      "default": "./dist/lib/index.js"
+    "./bundle-manifest.json": {
+      "default": "./dist/bundle-manifest.json"
+    },
+    "./hydration-data": {
+      "types": "./src/hydration-data.d.ts"
     }
   },
-  "engines": {
-    "node": ">=18.7.0"
+  "optionalDependencies": {
+    "@atproto-labs/rollup-plugin-bundle-manifest": "0.2.0",
+    "@atproto/oauth-provider-api": "0.1.0",
+    "@atproto/oauth-types": "0.2.5"
   },
   "devDependencies": {
     "@hcaptcha/react-hcaptcha": "^1.11.2",
@@ -28,46 +33,32 @@
     "@lingui/react": "^5.2.0",
     "@lingui/swc-plugin": "^5.4.0",
     "@lingui/vite-plugin": "^5.2.0",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-dynamic-import-vars": "^2.1.5",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-swc": "^0.4.0",
-    "@swc/core": "^1.10.18",
-    "@swc/helpers": "^0.5.15",
+    "@tailwindcss/vite": "^4.1.3",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react-swc": "^3.8.0",
-    "@web/rollup-plugin-import-meta-assets": "^2.2.1",
-    "autoprefixer": "^10.4.17",
+    "clsx": "^2.1.1",
     "postcss": "^8.4.38",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
-    "rollup": "^4.13.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.1.3",
     "typescript": "^5.6.3",
     "vite": "^6.2.0",
+    "@atproto-labs/rollup-plugin-bundle-manifest": "0.2.0",
     "@atproto-labs/fetch": "0.2.2",
-    "@atproto-labs/rollup-plugin-bundle-manifest": "0.1.2",
-    "@atproto/oauth-provider-api": "0.0.1",
-    "@atproto/oauth-types": "0.2.4"
-  },
-  "postcss": {
-    "plugins": {
-      "tailwindcss": {},
-      "autoprefixer": {}
-    }
+    "@atproto/oauth-provider-api": "0.1.0",
+    "@atproto/oauth-types": "0.2.5"
   },
   "scripts": {
-    "po:extract": "lingui extract --clean",
-    "po:compile": "lingui compile --typescript",
-    "prebuild:frontend": "pnpm run po:compile",
-    "build:frontend": "rollup --config rollup.config.js",
-    "build:backend": "tsc --build tsconfig.backend.json",
-    "dev:ui": "vite",
-    "dev:frontend": "rollup --config rollup.config.js --watch",
-    "dev:catalogs": "pnpm run po:extract --debounce 250 --watch > /dev/null",
-    "dev:messages": "pnpm run po:compile --debounce 500 --watch"
+    "i18n:extract": "lingui extract --clean",
+    "i18n:compile": "lingui compile --typescript",
+    "i18n": "pnpm i18n:extract && pnpm i18n:compile",
+    "prebuild": "pnpm run i18n",
+    "build": "vite build -- ignore additional npm args",
+    "dev:ui": "vite --port 5174",
+    "dev:src": "vite build --watch",
+    "dev:catalogs": "pnpm run i18n:extract --debounce 250 --watch > /dev/null",
+    "dev:messages": "pnpm run i18n:compile --debounce 500 --watch"
   }
 }

package/src/authorization-page.tsx

@@ -1,45 +1,38 @@
-import './styles.css'
+import './style.css'
 
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ErrorBoundary } from 'react-error-boundary'
-import type {
-  AuthorizeData,
-  AvailableLocales,
-  CustomizationData,
-} from '@atproto/oauth-provider-api'
-import { readBackendData } from './lib/backend-data.ts'
+import type { HydrationData } from './hydration-data.d.ts'
 import { LocaleProvider } from './locales/locale-provider.tsx'
 import { AuthorizeView } from './views/authorize/authorize-view.tsx'
 import { ErrorView } from './views/error/error-view.tsx'
 
-export const availableLocales =
-  readBackendData<AvailableLocales>('__availableLocales')
-export const customizationData = readBackendData<CustomizationData>(
-  '__customizationData',
-)
-export const authorizeData = readBackendData<AuthorizeData>('__authorizeData')
+const {
+  __authorizeData: authorizeData,
+  __sessions: sessions,
+  __customizationData: customizationData,
+} = window as typeof window & HydrationData['authorization-page']
 
-if (authorizeData) {
-  // When the user is logging in, make sure the page URL contains the
-  // "request_uri" in case the user refreshes the page.
-  const url = new URL(window.location.href)
-  if (
-    url.pathname === '/oauth/authorize' &&
-    !url.searchParams.has('request_uri')
-  ) {
-    url.search = ''
-    url.searchParams.set('client_id', authorizeData.clientId)
-    url.searchParams.set('request_uri', authorizeData.requestUri)
-    window.history.replaceState(history.state, '', url.pathname + url.search)
-  }
+// When the user is logging in, make sure the page URL contains the
+// "request_uri" in case the user refreshes the page.
+// @TODO Actually do this on the backend through a redirect.
+const url = new URL(window.location.href)
+if (
+  url.pathname === '/oauth/authorize' &&
+  !url.searchParams.has('request_uri')
+) {
+  url.search = ''
+  url.searchParams.set('client_id', authorizeData.clientId)
+  url.searchParams.set('request_uri', authorizeData.requestUri)
+  window.history.replaceState(history.state, '', url.pathname + url.search)
 }
 
 const container = document.getElementById('root')!
 
 createRoot(container).render(
   <StrictMode>
-    <LocaleProvider availableLocales={availableLocales}>
+    <LocaleProvider userLocales={authorizeData.uiLocales?.split(' ')}>
       <ErrorBoundary
         fallbackRender={({ error }) => (
           <ErrorView error={error} customizationData={customizationData} />
@@ -48,6 +41,7 @@ createRoot(container).render(
         <AuthorizeView
           customizationData={customizationData}
           authorizeData={authorizeData}
+          sessions={sessions}
         />
       </ErrorBoundary>
     </LocaleProvider>

package/src/components/forms/button.tsx

@@ -1,11 +1,11 @@
+import { clsx } from 'clsx'
 import { JSX } from 'react'
-import { clsx } from '../../lib/clsx.ts'
 import { Override } from '../../lib/util.ts'
 
 export type ButtonProps = Override<
   JSX.IntrinsicElements['button'],
   {
-    color?: 'brand' | 'grey'
+    color?: 'primary' | 'grey'
     loading?: boolean
     transparent?: boolean
     square?: boolean
@@ -33,18 +33,18 @@ export function Button({
       disabled={disabled || loading === true}
       {...props}
       className={clsx(
-        'rounded-lg truncate cursor-pointer touch-manipulation tracking-wide overflow-hidden',
-        square ? 'p-2' : 'py-2 px-6',
-        color === 'brand'
+        'cursor-pointer touch-manipulation overflow-hidden truncate rounded-md tracking-wide',
+        square ? 'p-2' : 'px-6 py-2',
+        color === 'primary'
           ? clsx(
               'accent-slate-100',
               transparent
-                ? 'bg-transparent text-brand'
-                : 'bg-brand text-brand-c',
+                ? 'text-primary bg-transparent'
+                : 'bg-primary text-primary-contrast',
             )
           : color === 'grey'
             ? clsx(
-                'accent-brand',
+                'accent-primary',
                 'text-slate-600 dark:text-slate-300',
                 'hover:bg-gray-200 dark:hover:bg-gray-700',
                 transparent ? 'bg-transparent' : 'bg-gray-100 dark:bg-gray-800',

package/src/components/forms/fieldset.tsx

@@ -41,7 +41,7 @@ export function Fieldset({
         <legend
           id={labelId}
           key="title"
-          className="mb-1 text-slate-600 dark:text-slate-400 text-sm font-medium"
+          className="mb-1 text-sm font-medium text-slate-600 dark:text-slate-400"
         >
           {label}
         </legend>

package/src/components/forms/form-card-async.tsx

@@ -88,7 +88,7 @@ export function FormCardAsync({
       }
       actions={
         <Button
-          color="brand"
+          color="primary"
           type="submit"
           loading={loading}
           disabled={disabled}

package/src/components/forms/form-card.tsx

@@ -37,7 +37,7 @@ export function FormCard({
       {(actions || cancel) && (
         <div
           key="buttons"
-          className="flex flex-wrap flex-row-reverse items-center justify-end space-x-reverse space-x-2"
+          className="flex flex-row-reverse flex-wrap items-center justify-end space-x-2 space-x-reverse"
         >
           {actions}
           <div className="flex-auto" />

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

@@ -1,6 +1,6 @@
+import { clsx } from 'clsx'
 import { JSX, ReactNode, useContext, useRef } from 'react'
 import { useRandomString } from '../../hooks/use-random-string.ts'
-import { clsx } from '../../lib/clsx.ts'
 import { mergeRefs } from '../../lib/ref.ts'
 import { Override } from '../../lib/util.ts'
 import { FieldsetContext } from './fieldset.tsx'
@@ -51,7 +51,7 @@ export function InputCheckbox({
           }
           ref={mergeRefs([ref, inputRef])}
           id={inputId}
-          className="accent-brand outline-none"
+          className="accent-primary outline-hidden"
           type="checkbox"
         />
       }
@@ -68,7 +68,7 @@ export function InputCheckbox({
         <label
           ref={labelRef}
           htmlFor={inputId}
-          className="block w-full leading-[1.6] select-none cursor-pointer"
+          className="block w-full cursor-pointer select-none leading-[1.6]"
         >
           {children}
         </label>

package/src/components/forms/input-container.tsx

@@ -1,5 +1,5 @@
+import { clsx } from 'clsx'
 import { JSX, ReactNode, useState } from 'react'
-import { clsx } from '../../lib/clsx.ts'
 import { Override } from '../../lib/util.ts'
 
 export type InputContainerProps = Override<
@@ -50,22 +50,22 @@ export function InputContainer({
         className={clsx(
           // Layout
           'px-1',
-          'w-full min-h-12',
+          'min-h-12 w-full',
           'flex items-center justify-stretch',
           // Border
           'rounded-lg',
-          bellow ? 'rounded-br-none rounded-bl-none' : undefined,
-          'outline-none',
-          'border-solid border-2 border-transparent',
-          'focus:border-brand has-[:focus]:border-brand',
+          bellow ? 'rounded-bl-none rounded-br-none' : undefined,
+          'outline-hidden',
+          'border-2 border-solid border-transparent',
+          'focus:border-primary has-focus:border-primary',
           'hover:border-gray-400 hover:focus:border-gray-400',
           'dark:hover:border-gray-500 dark:hover:focus:border-gray-500',
           // Background
-          'bg-gray-100 focus:bg-slate-200 has-[:focus]:bg-slate-200',
-          'dark:bg-slate-800 dark:focus:bg-slate-700 dark:has-[:focus]:bg-slate-700',
+          'has-focus:bg-slate-200 bg-gray-100 focus:bg-slate-200',
+          'dark:has-focus:bg-slate-700 dark:bg-slate-800 dark:focus:bg-slate-700',
           // Font
           'text-slate-600 dark:text-slate-300',
-          'accent-brand',
+          'accent-primary',
         )}
       >
         {icon && (
@@ -73,7 +73,7 @@ export function InputContainer({
             className={clsx(
               'shrink-0 grow-0',
               'mx-1',
-              hasFocus ? 'text-brand' : 'text-slate-500',
+              hasFocus ? 'text-primary' : 'text-slate-500',
             )}
           >
             {icon}
@@ -82,13 +82,13 @@ export function InputContainer({
 
         {children}
 
-        <div className="ml-1 grow-0 shrink-0 flex items-center">{append}</div>
+        <div className="ml-1 flex shrink-0 grow-0 items-center">{append}</div>
       </div>
       {bellow && (
         <div
           className={clsx(
             // Layout
-            'px-3 py-2 space-x-2',
+            'space-x-2 px-3 py-2',
             'flex flex-row items-center gap-1',
             // Border
             'rounded-br-2 rounded-bl-2',

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

@@ -1,5 +1,5 @@
+import { clsx } from 'clsx'
 import { JSX, ReactNode, useContext, useRef } from 'react'
-import { clsx } from '../../lib/clsx.ts'
 import { mergeRefs } from '../../lib/ref.ts'
 import { Override } from '../../lib/util.ts'
 import { FieldsetContext } from './fieldset.tsx'
@@ -67,7 +67,7 @@ export function InputText({
         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"
+        className="outline-hidden w-full text-ellipsis bg-transparent bg-clip-padding text-base text-inherit dark:placeholder-gray-500"
         onFocus={(event) => {
           onFocus?.(event)
           if (!event.defaultPrevented) focusedRef.current = true

package/src/components/forms/wizard-card.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/react/macro'
+import { clsx } from 'clsx'
 import { JSX, ReactNode, useCallback } from 'react'
 import { DisabledStep, Step, useStepper } from '../../hooks/use-stepper.ts'
-import { clsx } from '../../lib/clsx.ts'
 import { Override } from '../../lib/util.ts'
 
 export type DoneFn = (...a: any) => unknown
@@ -108,7 +108,7 @@ export function WizardCard<TDone extends DoneFn>({
         </Trans>
       </p>
 
-      {stepTitle && <h2 className="font-medium text-xl mb-4">{stepTitle}</h2>}
+      {stepTitle && <h2 className="mb-4 text-xl font-medium">{stepTitle}</h2>}
 
       {stepContent}
     </div>

package/src/components/layouts/layout-title-page.tsx

@@ -1,5 +1,5 @@
+import { clsx } from 'clsx'
 import { JSX, ReactNode } from 'react'
-import { clsx } from '../../lib/clsx.ts'
 import { Override } from '../../lib/util.ts'
 import { LocaleSelector } from '../../locales/locale-selector.tsx'
 
@@ -27,8 +27,8 @@ export function LayoutTitlePage({
       className={clsx(
         className,
         'flex flex-col items-center',
-        'md:flex md:flex-row md:justify-stretch md:items-center',
-        'min-h-screen min-w-screen',
+        'md:flex md:flex-row md:items-center md:justify-stretch',
+        'min-w-screen min-h-screen',
         'bg-white text-slate-900',
         'dark:bg-slate-900 dark:text-slate-100',
       )}
@@ -40,19 +40,20 @@ export function LayoutTitlePage({
           'px-6 pt-4',
           'w-full',
           'md:max-w-lg',
-          'flex flex-row md:flex-col',
+          'flex flex-row items-start',
+          'md:flex-col md:items-end',
           'md:self-stretch',
-          'md:w-1/2 md:max-w-fix md:p-4',
+          'md:max-w-fix md:w-1/2 md:p-4',
           'md:text-right',
           'md:dark:border-r md:dark:border-slate-700',
           'md:bg-slate-100 md:dark:bg-slate-800',
         )}
       >
-        <div className="flex-grow grid content-center md:justify-items-end">
+        <div className="grid grow content-center md:justify-items-end">
           {title && (
             <h1
               key="title"
-              className="text-xl md:text-2xl lg:text-5xl md:my-4 font-semibold text-brand"
+              className="text-primary text-xl font-semibold md:my-4 md:text-2xl lg:text-5xl"
             >
               {title}
             </h1>
@@ -61,7 +62,7 @@ export function LayoutTitlePage({
           {subtitle && (
             <p
               key="subtitle"
-              className="hidden md:block max-w-xs text-slate-600 dark:text-slate-400"
+              className="hidden max-w-xs text-slate-600 md:block dark:text-slate-400"
             >
               {subtitle}
             </p>