{"id":19714707,"url":"https://github.com/quavedev/accounts-passwordless-react","last_synced_at":"2025-05-07T20:05:51.476Z","repository":{"id":119413252,"uuid":"412291531","full_name":"quavedev/accounts-passwordless-react","owner":"quavedev","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-05T17:32:44.000Z","size":21,"stargazers_count":5,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T20:04:58.485Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/quavedev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-10-01T01:57:23.000Z","updated_at":"2024-12-29T11:10:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"3c48df4d-3089-4829-afa2-b8ec70366f03","html_url":"https://github.com/quavedev/accounts-passwordless-react","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/quavedev%2Faccounts-passwordless-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Faccounts-passwordless-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Faccounts-passwordless-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Faccounts-passwordless-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quavedev","download_url":"https://codeload.github.com/quavedev/accounts-passwordless-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252949272,"owners_count":21830151,"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-11T22:35:03.253Z","updated_at":"2025-05-07T20:05:51.457Z","avatar_url":"https://github.com/quavedev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# quave:accounts-passwordless-react\n\n`quave:accounts-passwordless-react` is a Meteor package that provides a plug-and-play Passwordless authentication system.\n\n## Why\n\nIt is designed to simplify the process of adding a password less authentication to Meteor apps.\n\nWe are using the `accounts-passwordless` package from Meteor.\n\nWe believe we are not reinventing the wheel in this package but what we are doing is like putting together the wheels in the vehicle :).\n\n## Installation\n\n```sh\nmeteor add quave:accounts-passwordless-react\n```\n\n## Usage\n\nYou need to add the `Passwordless` component to the route where you want to expose the form to login with the token.\n\nThe only required property is `onEnterToken` as you need to send the user to a different location or update the UI after the authentication is done.\n\n```jsx\nimport React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { Passwordless } from 'meteor/quave:accounts-passwordless-react';\n\nexport const Access = () =\u003e {\n  const history = useHistory();\n\n  const onEnterToken = () =\u003e {\n    history.push('/');\n    openAlert('Welcome!');\n  };\n  \n  return (\n    \u003cPasswordless\n      onEnterToken={onEnterToken}\n    /\u003e\n  );\n};\n```\n\n### Tailwind\n\nBy default, we provide [tailwindcss](https://tailwindcss.com/) classes, you should include `safelist` property in your `tailwind.config.js`\n\n```js\n  safelist: [\n    '-mx-1.5',\n    '-my-1.5',\n    'appearance-none',\n    'bg-green-100',\n    'bg-green-50',\n    'bg-indigo-600',\n    'bg-red-50',\n    'bg-white',\n    'block',\n    'border',\n    'border-gray-300',\n    'border-transparent',\n    'cursor-pointer',\n    'flex',\n    'focus:border-indigo-500',\n    'focus:outline-none',\n    'focus:ring-2',\n    'focus:ring-indigo-500',\n    'focus:ring-offset-2',\n    'focus:ring-offset-red-50',\n    'focus:ring-red-600',\n    'font-medium',\n    'hover:bg-indigo-700',\n    'hover:bg-red-100',\n    'hover:text-indigo-500',\n    'inline-flex',\n    'justify-center',\n    'justify-end',\n    'ml-auto',\n    'mt-0',\n    'mt-1',\n    'mt-8',\n    'p-1.5',\n    'p-4',\n    'pl-3',\n    'placeholder-gray-400',\n    'px-3',\n    'px-4',\n    'py-2',\n    'py-8',\n    'ring-green-600',\n    'ring-offset-green-50',\n    'rounded-md',\n    'shadow',\n    'shadow-sm',\n    'sm:max-w-md',\n    'sm:mx-auto',\n    'sm:px-10',\n    'sm:rounded-lg',\n    'sm:text-sm',\n    'sm:w-full',\n    'space-y-6',\n    'sr-only',\n    'text-gray-700',\n    'text-green-500',\n    'text-green-800',\n    'text-indigo-600',\n    'text-red-500',\n    'text-red-800',\n    'text-sm',\n    'text-white',\n    'w-full',\n  ],\n```\n\nor this comment somewhere in your code to avoid purging these classes:\n\n```js\n// classnames tailwind passwordless:\n// appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-sm font-medium text-gray-700 mt-0 flex justify-end text-indigo-600 hover:text-indigo-500 cursor-pointer justify-center px-4 border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-offset-2 bg-red-50 bg-green-50 p-4 text-red-800 text-green-800 ml-auto pl-3 -mx-1.5 -my-1.5 inline-flex p-1.5 text-red-500 text-green-500 hover:bg-red-100 bg-green-100 focus:ring-offset-red-50 ring-offset-green-50 focus:ring-red-600 ring-green-600 sr-only mt-8 sm:mx-auto sm:w-full sm:max-w-md bg-white py-8 shadow sm:rounded-lg sm:px-10 space-y-6 mt-1\n```\n\n### Additional options\n\nYou can customize all the texts, for example, if you have a system with multiple languages you could have a `getText` function as a helper to get the proper text based on the language.\n\n```jsx\nimport React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { Passwordless } from 'meteor/quave:accounts-passwordless-react';\nimport { getText } from '../../infra/texts';\n\nexport const Access = () =\u003e {\n  const history = useHistory();\n\n  const onEnterToken = () =\u003e {\n    history.push(RoutePaths.HOME);\n    openAlert('Welcome!');\n  };\n  \n  return (\n    \u003cPasswordless\n      onEnterToken={onEnterToken}\n      extra={{ language }}\n      emailLabel={getText('emailLabel')}\n      tokenLabel={getText('tokenLabel')}\n      emailLinkLabel={getText('emailLinkLabel')}\n      tokenLinkLabel={getText('tokenLinkLabel')}\n      requestButtonLabel={getText('requestButtonLabel')}\n      enterButtonLabel={getText('enterButtonLabel')}\n      emailValidationErrorMessage={getText('emailValidationErrorMessage')}\n      tokenValidationErrorMessage={getText('tokenValidationErrorMessage')}\n      twoFactorCodeLabel={getText('twoFactorCodeLabel')}\n      twoFactorCodeValidationErrorMessage={getText('twoFactorCodeValidationErrorMessage')}\n      getSuccessRequestTokenMessage={({ isNewUser }) =\u003e\n        getText('successRequestTokenMessage', { isNewUser })\n      }\n    /\u003e\n  );\n};\n```\n\nWe do support even more options, you can see all of them in the [code](https://github.com/quavedev/accounts-passwordless-react/blob/main/Passwordless.js#L108).\n\nBy default TailwindCSS classes are added for you but you can override them. You can set up TailwindCSS as in this [example](https://github.com/meteor/examples/tree/main/tailwindcss).\n\n#### UI props\n\n```javascript\n  inputProps = {},\n  emailInputProps = {},\n  tokenInputProps = {},\n  twoFactorCodeInputProps = {},\n  labelProps = {},\n  linkProps = {},\n  buttonProps = {},\n  containerClassName = 'mt-8 sm:mx-auto sm:w-full sm:max-w-md',\n  wrapperClassName = 'bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10',\n  formClassName = 'space-y-6',\n```\n\n#### Event Handlers props\n```javascript\n  onRequestToken = noop,\n  onRequestError = defaultErrorHandler,\n  onInvalidEmail = noop,\n  onEnterToken = noop,\n  onEnterError = defaultErrorHandler,\n  onInvalidToken = noop,\n```\n\n#### Accounts data props\n```javascript\n  userData = {}, // will be merged with the user data when a new user is created\n  extra, // will be send in the Accounts.requestLoginTokenForUser call as option\n```\n\n#### Components props\n```javascript\n  ErrorComponent = Error,\n  SuccessComponent = Success,\n```\n\nIf you don't want to use this UI to display messages you can provide `null` for both.\n\n### Two-Factor Authentication (2FA)\n\nThis package supports Two-Factor Authentication (2FA) when used with the [accounts-2fa](https://docs.meteor.com/packages/accounts-2fa) package. When 2FA is enabled for a user, they will be prompted to enter their 2FA code after successfully entering their email and token.\n\nThe flow works as follows:\n1. User enters their email and receives a token\n2. User enters the token\n3. If 2FA is enabled for the user, a new field appears requesting their 2FA code\n4. User enters the code from their authenticator app\n5. Authentication completes if the code is valid\n\nExample with 2FA handling:\n\n```jsx\nimport React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { Passwordless } from 'meteor/quave:accounts-passwordless-react';\n\nexport const Access = () =\u003e {\n  const history = useHistory();\n\n  const onEnterToken = () =\u003e {\n    history.push('/');\n    openAlert('Welcome!');\n  };\n  \n  return (\n    \u003cPasswordless\n      onEnterToken={onEnterToken}\n      twoFactorCodeLabel=\"Enter your 2FA code\"\n      twoFactorCodeValidationErrorMessage=\"Invalid 2FA code\"\n    /\u003e\n  );\n};\n```\n\n#### Additional 2FA Props\n```javascript\n  twoFactorCodeLabel = '2FA Code', // Label for the 2FA code input field\n  twoFactorCodeValidationErrorMessage = 'Invalid 2FA code.', // Error message for invalid 2FA code\n  twoFactorCodeInputProps = {}, // Additional props to be passed to the 2FA code input field\n```\n\n### License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquavedev%2Faccounts-passwordless-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquavedev%2Faccounts-passwordless-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquavedev%2Faccounts-passwordless-react/lists"}