{"id":50606908,"url":"https://github.com/remcostoeten/auth-drawer","last_synced_at":"2026-06-06T00:02:28.207Z","repository":{"id":361612635,"uuid":"1228157834","full_name":"remcostoeten/auth-drawer","owner":"remcostoeten","description":"Configurable React auth drawer and modal — OAuth, triggers, motion, and copy from one AuthConfig. Includes docs, configurator, and debug lab. Bring your own backend.","archived":false,"fork":false,"pushed_at":"2026-05-31T13:32:26.000Z","size":2134,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-31T14:20:27.897Z","etag":null,"topics":["authentication","drawer","framer-motion","monorepo","oauth","react","tailwindcss","typescript","ui-components","vite"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/remcostoeten.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-03T17:08:57.000Z","updated_at":"2026-05-30T21:40:55.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/remcostoeten/auth-drawer","commit_stats":null,"previous_names":["remcostoeten/auth-drawer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/remcostoeten/auth-drawer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcostoeten%2Fauth-drawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcostoeten%2Fauth-drawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcostoeten%2Fauth-drawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcostoeten%2Fauth-drawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remcostoeten","download_url":"https://codeload.github.com/remcostoeten/auth-drawer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcostoeten%2Fauth-drawer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33964367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","drawer","framer-motion","monorepo","oauth","react","tailwindcss","typescript","ui-components","vite"],"created_at":"2026-06-06T00:02:27.299Z","updated_at":"2026-06-06T00:02:28.198Z","avatar_url":"https://github.com/remcostoeten.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./showcase/public/favicon.svg\" alt=\"\" width=\"56\" height=\"56\" /\u003e\n\u003c/p\u003e\n\n# Auth Drawer\n\nConfigurable React auth drawer and modal for product teams that want a polished\nsign-in surface without rebuilding OAuth buttons, credential forms, drawer\nmotion, validation states, and auth-provider glue for every app.\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@remcostoeten/auth-drawer\"\u003e\u003cstrong\u003enpm package\u003c/strong\u003e\u003c/a\u003e\n  ·\n  \u003ca href=\"https://auth-drawer.remcostoeten.nl/docs\"\u003e\u003cstrong\u003elive docs\u003c/strong\u003e\u003c/a\u003e\n  ·\n  \u003ca href=\"./API.md\"\u003e\u003cstrong\u003eAPI reference\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## What It Is\n\n`@remcostoeten/auth-drawer` is a provider-agnostic auth UI primitive. It ships a\ntyped adapter boundary, accessible drawer/modal presentation, OAuth provider\ncontrols, email/password flows, password reset affordances, session hooks, and\nconfiguration for copy, layout, triggers, and motion.\n\nUse it when you already have an auth backend and need a reliable front-end auth\nsurface that can be dropped into different apps without forking UI code.\n\n## Highlights\n\n- Drawer or modal presentation with responsive mobile behavior.\n- Email/password sign-in, registration, forgot-password, and optional live\n  password-match feedback.\n- OAuth buttons for GitHub, Google, Apple, Discord, TikTok, plus overflow\n  handling for larger provider sets.\n- Typed adapters for Better Auth, Supabase, Auth.js/NextAuth, Clerk, Firebase,\n  custom JWT/REST APIs, Passport sessions, and mock demos.\n- `AuthProvider`, `useAuth`, and trigger-store APIs for global session state and\n  controlled drawer opening.\n- Configurable copy, provider list, layout, backdrop, animation, width, desktop\n  position, and trigger behavior.\n- Live Next.js showcase with docs search, configurator, API tables, and themed\n  playground examples.\n\n## Demos\n\nThe regular demo opens the stock drawer from the docs CTA and submits against\nthe mock adapter used by the showcase.\n\n![Regular Auth Drawer flow](./docs/assets/auth-drawer-regular.gif)\n\nThe Windows XP playground shows the same auth primitive mounted inside a themed\nlogin experience.\n\n![Windows XP Auth Drawer flow](./docs/assets/auth-drawer-windows-xp.gif)\n\nTry the routes locally:\n\n```bash\nbun install\nbun --cwd showcase run dev\n```\n\n- Docs and configurator: `http://localhost:3000/docs`\n- Regular playground lab: `http://localhost:3000/?view=playground`\n- Windows XP example: `http://localhost:3000/playground/windows-xp`\n- Medium-style paywall example: `http://localhost:3000/playground/medium-paywall-example`\n\n## Install\n\n```bash\nnpm install @remcostoeten/auth-drawer\n```\n\nPeer dependencies:\n\n```bash\nnpm install react react-dom framer-motion lucide-react\n```\n\nStyles ship with the package import. For most apps there is no separate CSS file\nto wire.\n\n## Quick Start\n\n```tsx\nimport { AuthDrawer, AuthProvider } from \"@remcostoeten/auth-drawer\";\nimport { createBetterAuthAdapter } from \"@remcostoeten/auth-drawer/adapters/better-auth\";\nimport { createAuthClient } from \"better-auth/react\";\n\nconst client = createAuthClient();\nconst adapter = createBetterAuthAdapter({ client });\n\nexport function App() {\n  return (\n    \u003cAuthProvider adapter={adapter}\u003e\n      \u003cHeader /\u003e\n      \u003cAuthDrawer adapter={adapter} /\u003e\n      \u003cdiv id=\"auth-drawer-portal\" /\u003e\n    \u003c/AuthProvider\u003e\n  );\n}\n```\n\nUse the provider hook from anywhere inside the tree:\n\n```tsx\nimport { useAuth } from \"@remcostoeten/auth-drawer\";\n\nfunction Header() {\n  const { user, signOut, openDrawer } = useAuth();\n\n  return user ? (\n    \u003cbutton onClick={signOut}\u003eSign out\u003c/button\u003e\n  ) : (\n    \u003cbutton onClick={openDrawer}\u003eSign in\u003c/button\u003e\n  );\n}\n```\n\n\u003e [!TIP]\n\u003e Add `\u003cdiv id=\"auth-drawer-portal\" /\u003e` near your app root. The drawer can render\n\u003e without it, but the portal keeps the overlay above page content and makes\n\u003e scroll locking predictable.\n\n## Adapters\n\nImport only the adapter you need:\n\n```tsx\nimport { createSupabaseAdapter } from \"@remcostoeten/auth-drawer/adapters/supabase\";\nimport { createBetterAuthAdapter } from \"@remcostoeten/auth-drawer/adapters/better-auth\";\nimport { createNextAuthAdapter } from \"@remcostoeten/auth-drawer/adapters/next-auth\";\nimport { createClerkAdapter } from \"@remcostoeten/auth-drawer/adapters/clerk\";\nimport { createMockAdapter } from \"@remcostoeten/auth-drawer/adapters/mock\";\n```\n\nAvailable adapter entry points:\n\n| Auth backend | Import path |\n| --- | --- |\n| Better Auth | `@remcostoeten/auth-drawer/adapters/better-auth` |\n| Supabase | `@remcostoeten/auth-drawer/adapters/supabase` |\n| Auth.js / NextAuth | `@remcostoeten/auth-drawer/adapters/next-auth` |\n| Clerk | `@remcostoeten/auth-drawer/adapters/clerk` |\n| Firebase Auth | `@remcostoeten/auth-drawer/adapters/firebase` |\n| Custom JWT / REST | `@remcostoeten/auth-drawer/adapters/custom-jwt` |\n| Passport sessions | `@remcostoeten/auth-drawer/adapters/passport` |\n| Mock adapter | `@remcostoeten/auth-drawer/adapters/mock` |\n\nProvider-specific setup guides live in the docs and in the `specs/` directory.\n\n## Configuration\n\nMost teams start with defaults and override only the parts that matter:\n\n```tsx\n\u003cAuthDrawer\n  adapter={adapter}\n  config={{\n    ui: {\n      auth: {\n        providers: [\"github\", \"google\", \"discord\"],\n        allowRegister: true,\n      },\n      presentation: {\n        mode: \"drawer\",\n        desktopPosition: \"center\",\n      },\n      copy: {\n        login: {\n          title: \"Welcome back\",\n          submit: \"Sign in\",\n        },\n      },\n    },\n  }}\n/\u003e\n```\n\nThe full API reference is in [API.md](./API.md), and the live configurator can\ngenerate a starter config from the docs UI.\n\n## Monorepo Layout\n\n```text\npackages/auth-drawer/        Published React package\nshowcase/                    Next.js docs, configurator, and playground\nexamples/better-auth-nextjs/ Runnable Better Auth integration\nexamples/custom-jwt-nextjs/  Runnable custom JWT (REST) integration\nspecs/                       Adapter and provider implementation notes\ndocs/internal/               Project planning and release notes\n```\n\n## Development\n\nInstall dependencies once from the repo root:\n\n```bash\nbun install\n```\n\nCommon commands:\n\n```bash\nbun run dev          # run workspace dev tasks\nbun run build        # build package and showcase\nbun run typecheck    # typecheck workspaces\nbun run test         # package tests\nbun run lint         # lint workspaces\n```\n\nRun a focused target:\n\n```bash\nbun --cwd packages/auth-drawer run test\nbun --cwd packages/auth-drawer run build\nbun --cwd showcase run dev\n```\n\n## Publishing Boundary\n\nThe npm package ships from `packages/auth-drawer` and includes `dist`, `styles`,\n`README.md`, `CHANGELOG.md`, and `LICENSE`. The showcase is a separate Next.js\nworkspace used for docs and visual testing; it is not part of the published\npackage.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcostoeten%2Fauth-drawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremcostoeten%2Fauth-drawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcostoeten%2Fauth-drawer/lists"}