{"id":18321103,"url":"https://github.com/workos/workos-remix","last_synced_at":"2025-04-05T22:32:16.424Z","repository":{"id":40764500,"uuid":"495524374","full_name":"workos/workos-remix","owner":"workos","description":null,"archived":true,"fork":false,"pushed_at":"2023-10-06T19:37:21.000Z","size":2140,"stargazers_count":8,"open_issues_count":7,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T20:50:19.787Z","etag":null,"topics":[],"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/workos.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}},"created_at":"2022-05-23T18:15:35.000Z","updated_at":"2025-03-06T04:34:01.000Z","dependencies_parsed_at":"2023-02-08T07:16:08.409Z","dependency_job_id":null,"html_url":"https://github.com/workos/workos-remix","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fworkos-remix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fworkos-remix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fworkos-remix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fworkos-remix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/workos","download_url":"https://codeload.github.com/workos/workos-remix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411234,"owners_count":20934650,"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","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":[],"created_at":"2024-11-05T18:18:20.838Z","updated_at":"2025-04-05T22:32:15.898Z","avatar_url":"https://github.com/workos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Remix with WorkOS\n\nRemix auth + Multi-Factor Authentication (MFA) example app. Powered by the [WorkOS Multi-factor authentication API](https://workos.com/docs/mfa/guide)\n\nBuilt using the following tools and libraries:\n- [Remix](https://remix.run) - fullstack React framework built on top of Web standards\n- [WorkOS MFA API](https://workos.com/docs/mfa/guide) + WorkOS SDK - WorkOS API that enables you to add SMS/TOTP (Time-based One Time Passwords) verification codes \n- [TailwindCSS](https://tailwindcss.com) - utility first CSS framework\n- [Prisma](https://prisma.io) - type-safe ORM\n- [Radix UI](https://radix-ui.com) - unstyled, accessible, React components\n  - [Alert Dialog](https://radix-ui.com/docs/primitives/components/alert-dialog)\n  - [Icons](https://icons.modulz.app/)\n  - [Dialog](https://radix-ui.com/docs/primitives/components/dialog)\n  - [Radio group](https://radix-ui.com/docs/primitives/components/radio-group)\n- [react-hot-toast](https://react-hot-toast.com/) - library for displaying toasts\n- [react-verification input](https://npmjs.com/package/react-verification-input) - masked input for submitting verification codes\n- TypeScript -  type-safe JS\n## Set up the  project locally\n\n1. Clone the repository and install the dependencies by running the following commands:\n\n```bash\ngit clone https://github.com/workos/remix-mfa\n\ncd remix-mfa\n\nnpm install\n\n```\n\n2. Rename the `.env.example` file to `.env` by running the following command:\n\n```bash\ncp .env.example .env\n```\n\n1. First, create a [WorkOS account](https://dashboard.workos.com/signup). Next, in the left sidebar, navigate to the \"API keys\" tab, create a new API key and add it to the `.env` file in your project .\n\n```bash\nWORKOS_API_KEY=''\n```\n\n\u003e *Note*: You can test WorkOS for free, you only get charged when you go to production \n\n4. Set the `SESSION_SECRET` environment variable. You can generate a random secret by running the following command:\n\n```bash\nopenssl rand -base64 32\n```\n\n5. Setup Prisma by running the following command:\n\n```bash\nnpx prisma db push\n```\n\nThey will create a `prisma/data.db` SQLite file\n\n6. Start the development server\n\n```bash\nnpm run dev\n```\n\nYou'll see the app running at `http://localhost:3000`. Navigate to the sign up page at `http://localhost:3000/signup` and create a new user. You'll then be logged in and you can go to the settings page where you can configure MFA.\n\n## Code Architecture\n\nYou'll see the following folder structure:\n\n```\nremix-with-workos/\n┣ app/\n┃ ┣ components/\n┃ ┃ ┣ auth/\n┃ ┃ ┣ layout/\n┃ ┃ ┣ settings/\n┃ ┃ ┗ shared/\n┃ ┣ hooks/\n┃ ┃ ┣ useMatchesData.ts\n┃ ┃ ┣ useOptionalUser.ts\n┃ ┃ ┗ useUser.ts\n┃ ┣ lib/\n┃ ┃ ┣ prisma.server.ts\n┃ ┃ ┗ workos.server.ts\n┃ ┣ models/\n┃ ┃ ┗ user.server.ts\n┃ ┣ routes/\n┃ ┃ ┣ index.tsx\n┃ ┃ ┣ login.tsx\n┃ ┃ ┣ logout.tsx\n┃ ┃ ┣ settings.tsx\n┃ ┃ ┣ settings.two-factor-authentication.tsx\n┃ ┃ ┗ signup.tsx\n┃ ┣ styles/\n┃ ┃ ┗ app.css\n┃ ┣ utils/\n┃ ┃ ┣ validation/\n┃ ┃ ┣ displayToast.server.ts\n┃ ┃ ┣ redirectSafely.server.ts\n┃ ┃ ┗ session.server.ts\n┃ ┣ entry.client.tsx\n┃ ┣ entry.server.tsx\n┃ ┗ root.tsx\n┣ prisma/\n┃ ┣ data.db\n┃ ┗ schema.prisma\n┣ public/\n┃ ┗ favicon.ico\n┣ styles/\n┃ ┗ app.css\n┣ .env.example\n┣ .eslintrc\n┣ .gitignore\n┣ .prettierrc\n┣ README.md\n┣ package-lock.json\n┣ package.json\n┣ postcss.config.js\n┣ remix.config.js\n┣ remix.env.d.ts\n┣ server.js\n┣ tailwind.config.js\n┣ tsconfig.json\n┗ vercel.json\n```\n\n- `/app` directory:\n  - `/app/components`:\n    - `components/auth`: directory containing auth-related components (login form, verification input, two-factor form)\n    - `/components/layout`: layout components (Navbar, Footer, etc.)\n    - `/components/settings`: components for the settings page (configuring MFA, deleting a user's account, changing password)\n    - `components/shared`: reusable, shared components (e.g button, form input, etc.)\n    - `components/hooks`: reusable React hooks used on the client\n  - `app/lib`: contains files where different libraries are instantiated\n  - `app/models`: contains database CRUD logic/operations\n  - `app/routes`: contains the different routes for the app.\n  - `app/styles`: generated tailwindcss utilities coming from `/styles`\n  - `app/utils`: utility functions\n  - `entry.client.tsx`: \n  - `entry.server.tsx`:\n  - `root.tsx`\n- `/prisma`:\n  - `data.db`: SQLite database\n  - `schema.prisma`: database schema (download the Prisma [VS code extension](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma) for syntax highlighting)\n- `tailwind.config.js` and `postcss.config.js`: tailwind configuration files\n\nThere's also linting using [ESLint](https://eslint.org) and code formatting using [Prettier](https://prettier.io)\n\nThis app is configured to deploy to [Vercel](https://vercel.com), but you can deploy to other platforms as well. Check out the Remix [deployment docs](https://remix.run/docs/en/v1/guides/deployment) to learn more\n\n## Going to production\n\nThis demo uses SQLite for simplicity purposes, however for you app you might go with a different database solution such as PostgreSQL, MySQL or MongoDB. To switch database providers, all you need to do is `provider` field in your `/prisma/schema.prisma` file.\n\n## Future improvements\n\nList of features \n\n- [ ] Create an email sending endpoint\n  - [ ] Send an email to the the logged in user when an authentication factor has been added\n  - [ ] Send an email to the logged in user when an authentication factor has been removed\n- [ ] Forgot password functionality\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkos%2Fworkos-remix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworkos%2Fworkos-remix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkos%2Fworkos-remix/lists"}