{"id":24068788,"url":"https://github.com/corbado/passkeys-react-hono","last_synced_at":"2025-09-06T06:45:30.032Z","repository":{"id":270110016,"uuid":"909365604","full_name":"corbado/passkeys-react-hono","owner":"corbado","description":"Add passkeys to your React and Hono application using the Corbado passkey-first authentication solution.","archived":false,"fork":false,"pushed_at":"2025-05-27T15:07:03.000Z","size":198,"stargazers_count":77,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-27T16:25:11.646Z","etag":null,"topics":["faceid","fido2","hono","javascript","passkey","passkeys","react","touchid","typescript","webauthn"],"latest_commit_sha":null,"homepage":"","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/corbado.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}},"created_at":"2024-12-28T13:40:11.000Z","updated_at":"2025-05-27T15:07:12.000Z","dependencies_parsed_at":"2025-03-25T08:29:30.604Z","dependency_job_id":"75f9ed76-83c6-4f64-a13c-88cdaf1b154d","html_url":"https://github.com/corbado/passkeys-react-hono","commit_stats":null,"previous_names":["corbado/ts-react-ts-hono","corbado/passkeys-react-hono"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/corbado/passkeys-react-hono","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbado%2Fpasskeys-react-hono","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbado%2Fpasskeys-react-hono/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbado%2Fpasskeys-react-hono/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbado%2Fpasskeys-react-hono/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corbado","download_url":"https://codeload.github.com/corbado/passkeys-react-hono/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbado%2Fpasskeys-react-hono/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273868152,"owners_count":25182423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"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":["faceid","fido2","hono","javascript","passkey","passkeys","react","touchid","typescript","webauthn"],"created_at":"2025-01-09T13:47:29.264Z","updated_at":"2025-09-06T06:45:30.016Z","avatar_url":"https://github.com/corbado.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"1070\" alt=\"GitHub Repo Cover\" src=\"https://github.com/corbado/corbado-php/assets/18458907/aa4f9df6-980b-4b24-bb2f-d71c0f480971\"\u003e\n\n# Typescript React.js and Hono Passkey Example App\n\nThis is a sample implementation of the [Corbado passkeys-first authentication solution](https://www.corbado.com) using\nReact and Hono. The following packages are being used:\n\n- [Corbado React.js](https://github.com/corbado/javascript/tree/develop/packages/react)\n- [Corbado Node.js](https://github.com/corbado/corbado-nodejs)\n\n[![integration-guides](https://github.com/user-attachments/assets/7859201b-a345-4b68-b336-6e2edcc6577b)](https://app.corbado.com/integration-guides/react-hono)\n\n## File structure\n\n- `frontend`: Separate directory for the Vue.js frontend\n- `frontend/.env.example`: Example file for environment variables\n- `frontend/src/pages`: Contains all pages used in the frontend\n- `frontend/src/app.tsx`: Contains configuration like providers and routes\n- `frontend/src/context/user.tsx`: Global store for user data from our own backend\n- `backend`: Separate directory for the Hono backend\n- `backend/.env.example`: Example file for environment variables\n- `backend/src/app.ts`: Configuration file for the Hono app\n- `backend/src/utils`: Collection of utility functions, e.g. helper functions for authentication\n- `backend/src/routes`: Directory configuring the routes for the app\n- `backend/src/middleware`: Middleware, e.g. for authentication\n- `backend/src/db`: Database configuration and queries\n\n\n## Setup\n\n### Prerequisites\n\nPlease follow the steps in [Getting started](https://docs.corbado.com/overview/getting-started) to create and configure\na project in the [Corbado developer panel](https://app.corbado.com/).\n\nYou need to have [Node](https://nodejs.org/en/download) and `npm` installed to run it.\n\n### Configure environment variables\n\nUse the values you obtained in [Prerequisites](#prerequisites) to configure the following variables inside a `.env`\nfile you create in frontend and backend directories respectively:\n\n#### Backend\n\nThe backend needs an api secret to authenticate with the Corbado backend API.\n\n```dotenv\nCORBADO_PROJECT_ID=pro-XXX\nCORBADO_API_SECRET=corbado1_XXX\nCORBADO_FRONTEND_API=https://{$CORBADO_PROJECT_ID}.frontendapi.cloud.corbado.io\nCORBADO_BACKEND_API=https://backendapi.cloud.corbado.io\n```\n\n#### Frontend\n\nThe frontend needs the project ID and the backend base URL.\n\n```dotenv\nVITE_CORBADO_PROJECT_ID=pro-XXX\nVITE_BACKEND_BASE_URL=http://localhost:3001\n```\n\n## Usage\n\n### Run the project locally\n\nRun the following command in the root directory\n\n```bash\n(cd backend \u0026\u0026 npm install)\n(cd frontend \u0026\u0026 npm install)\n```\n\nto install all dependencies.\n\nFinally, you can run the project locally with the provided start script or individually for frontend and backend.\n\n#### Using the start script\n\n```bash\n./start.sh\n```\n\n#### Running frontend and backend individually\n\nIn one terminal session, run the following command in the `frontend` directory:\n```bash\nnpm run dev\n```\n\nIn another terminal session, run the following command in the `backend` directory:\n```bash\nnpm run dev\n```\n\n## Passkeys support\n\n- Community for Developer Support: https://bit.ly/passkeys-community\n- Passkeys Debugger: https://www.passkeys-debugger.io/\n- Passkey Subreddit: https://www.reddit.com/r/passkey/\n\n## Telemetry\n\nThis example application uses telemetry. By gathering telemetry data, we gain a more comprehensive understanding of how our SDKs, components, and example applications are utilized across various scenarios. This information is crucial in helping us prioritize features that are beneficial and impactful for the majority of our users. Read our [official documentation](https://docs.corbado.com/corbado-complete/other/telemetry) for more details.\n\nTo disable telemetry, add the following line to your `frontend/.env` file:\n\n```sh\nVITE_CORBADO_TELEMETRY_DISABLED=true\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorbado%2Fpasskeys-react-hono","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorbado%2Fpasskeys-react-hono","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorbado%2Fpasskeys-react-hono/lists"}