{"id":21211833,"url":"https://github.com/passageidentity/passage-flex-react-native","last_synced_at":"2025-07-10T09:31:14.454Z","repository":{"id":254483809,"uuid":"842991953","full_name":"passageidentity/passage-flex-react-native","owner":"passageidentity","description":"Passkey Flex for React Native - Add native passkey authentication to your own React Native authentication flows with Passage by 1Password","archived":false,"fork":false,"pushed_at":"2024-10-24T17:10:11.000Z","size":1777,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-26T14:30:52.012Z","etag":null,"topics":["1password","android","authentication","biometrics","cross-platform","expo","ios","javascript","passage","passage-sdk","passkey-flex","passkeys","passwordless","react-native","typescript","webauthn"],"latest_commit_sha":null,"homepage":"https://docs.passage.id/flex","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/passageidentity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-08-15T14:47:02.000Z","updated_at":"2024-10-24T17:10:11.000Z","dependencies_parsed_at":"2024-08-23T19:46:09.272Z","dependency_job_id":"b5a47846-000f-46b1-b0b5-a3fdbd8f4478","html_url":"https://github.com/passageidentity/passage-flex-react-native","commit_stats":null,"previous_names":["passageidentity/passage-flex-react-native"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/passageidentity%2Fpassage-flex-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/passageidentity%2Fpassage-flex-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/passageidentity%2Fpassage-flex-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/passageidentity%2Fpassage-flex-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/passageidentity","download_url":"https://codeload.github.com/passageidentity/passage-flex-react-native/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225629755,"owners_count":17499295,"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":["1password","android","authentication","biometrics","cross-platform","expo","ios","javascript","passage","passage-sdk","passkey-flex","passkeys","passwordless","react-native","typescript","webauthn"],"created_at":"2024-11-20T21:05:37.179Z","updated_at":"2024-11-20T21:06:43.104Z","avatar_url":"https://github.com/passageidentity.png","language":"TypeScript","readme":"![passage-flex-react-native](https://storage.googleapis.com/passage-docs/github-md-assets/passage-flex-react-native.png)\n\n![NPM Version](https://img.shields.io/npm/v/%40passageidentity%2Fpassage-flex-react-native?link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40passageidentity%2Fpassage-flex-react-native) [![React Native](https://img.shields.io/badge/React_Native-%2320232a.svg?logo=react\u0026logoColor=%2361DAFB)](#) \t[![Expo](https://img.shields.io/badge/Expo-000020?logo=expo\u0026logoColor=fff)](#) ![NPM Type Definitions](https://img.shields.io/npm/types/%40passageidentity%2Fpassage-flex-react-native) ![GitHub License](https://img.shields.io/github/license/passageidentity/passage-flex-react-native)\n ![Static Badge](https://img.shields.io/badge/Built_by_1Password-grey?logo=1password)\n\n\n## About\n\n[Passage by 1Password](https://1password.com/product/passage) unlocks the passwordless future with a simpler, more secure passkey authentication experience. Passage handles the complexities of the [WebAuthn API](https://blog.1password.com/what-is-webauthn/), and allows you to implement passkeys with ease. \n\nUse [Passkey Flex](https://docs.passage.id/flex) to add passkeys to an existing authentication experience.\n\nUse [Passkey Complete](https://docs.passage.id/complete) as a standalone passwordless auth solution.\n\nUse [Passkey Ready](https://docs.passage.id/passkey-ready) to determine if your users are ready for passkeys.\n\n\n\n### In passage-flex-react-native\n\nUse passage-flex-react-native to implement Passkey Flex in your Swift application to add native passkey authentication in your own authentication flows.\n\n\n| Product | Compatible |\n| --- | --- |\n| ![Passkey Flex](https://storage.googleapis.com/passage-docs/github-md-assets/passage-passkey-flex-icon.png) Passkey **Flex** | ✅\n| ![Passkey Complete](https://storage.googleapis.com/passage-docs/github-md-assets/passage-passkey-complete-icon.png) Passkey **Complete** | ✖️ For Passkey Complete, check out [passage-react-native](https://github.com/passageidentity/passage-react-native)\n| ![Passkey Ready](https://storage.googleapis.com/passage-docs/github-md-assets/passage-passkey-ready-icon.png) Passkey **Ready** | ✖️ For Passkey Ready, check out [Authentikit for Android](https://github.com/passageidentity/passage-android/tree/main/authentikit) and [Authentikit for iOS](https://github.com/passageidentity/passage-authentikit-ios) |\n\n## Getting Started\n\n### Check Prerequisites\n\n\n\u003cp\u003e\nYou'll need a free Passage account and a Passkey Flex app set up in \u003ca href=\"https://console.passage.id/\"\u003ePassage Console\u003c/a\u003e to get started.\u003cbr /\u003e\n\u003csub\u003e\u003ca href=\"https://docs.passage.id/home#passage-console\"\u003eLearn more about Passage Console →\u003c/a\u003e\u003c/sub\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\nAdd an Android and/or iOS app in the Native Apps section for your Passkey Flex app.\n\u003c/p\u003e\n\n\u003cp\u003e\n\u003ci\u003eNote: When you add your Native App info, you can generate the associated domain file for that app if you haven’t already created it yourself, as shown:\u003c/i\u003e \u003cbr /\u003e\u003cimg width=\"600\" src=\"https://docs.passage.id/_next/image?url=%2Fimages%2Fv1-doc-images%2Fios-download-config-file.png\u0026w=3840\u0026q=75\" /\u003e\n\u003c/p\u003e\n\n\n### Install\n```shell\nnpm i --save @passageidentity/passage-flex-react-native\n```\n\n### Configure\n\n\u003e [!IMPORTANT]\n\u003e In order for passkeys to work, you’ll need to associate your native app(s) with the public web domain you assigned to your Passkey Flex app.\n\u003e \n\u003e Android requires an `assetlinks.json` file configured and hosted \u003cbr /\u003e\u003csub\u003eLearn more about \u003ca href=\"https://developer.android.com/identity/sign-in/credential-manager#add-support-dal\"\u003eAdding support for Digital Asset Links →\u003c/a\u003e\u003c/sub\u003e\n\u003e\n\u003e Apple requires an `apple-app-site-association` file configured and hosted \u003cbr /\u003e\u003csub\u003eLearn more about \u003ca href=\"https://developer.apple.com/documentation/Xcode/supporting-associated-domains\"\u003eSupporting associated domains →\u003c/a\u003e\u003c/sub\u003e\n\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eExpo Configuration\u003c/b\u003e\u003c/summary\u003e\n\n  \u003cbr /\u003e\n  \n  Add the `passage-flex-react-native` expo plugin in `app.json`:\n      \n```json\n\"plugins\": [\n      \"@passageidentity/passage-flex-react-native\"\n]\n```\n    \n  Add `ASSOCIATED_DOMAIN` value to your app's `.env` file:\n      \n```\nASSOCIATED_DOMAIN=example.com\n```\n      \nRun the following:\n```\nnpx expo prebuild\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eBare React Native Configuration\u003c/b\u003e\u003c/summary\u003e\n  \u003cbr /\u003e\n  See our \u003ca href=\"https://docs.passage.id/complete/cross-platform-passkey-configuration/cross-platform-ios-configuration\"\u003ePasskey Complete documentation\u003c/a\u003e for setting up a React Native app for passkeys and Passkey Flex.\n\u003c/details\u003e\n\n\n### Import\n```tsx\nimport { PassageFlex } from '@passageidentity/passage-flex-react-native';\n```\n\n### Initialize\n```tsx\nconst passageFlex = new PassageFlex('YOUR_PASSAGE_APP_ID');\n```\n\n### Go Passwordless\n\nCheck out the [API Reference](#api-reference) below, along with more details about Passkey Flex on our [Passkey Flex Documentation](https://docs.passage.id/flex) page.\n\n# API Reference\n\n### passageFlex.passkey.register\n\nTo register a new user passkey, use the `passageFlex.passkey.register` method.\n\nThis is a three step process:\n1. Your app should POST a user identifier (like an email) to your backend, which should request a transaction id from the Passage server to return to your app.\n2. Your app should then call `passageFlex.passkey.register(transactionId)` to prompt your user to create a passkey. On success, the `register` method will return a nonce.\n3. Lastly, your app should send this nonce to your backend to verify the user has been registered successfully. At this point, your backend could return an access token.\n\nExample:\n\n```tsx\nconst onPressRegister = async () =\u003e {\n  // 1. Get transaction id string from your backend.\n  const transactionId = await getRegisterTransactionId(\"newuser@email.com\");\n  // 2. Prompt user to create a passkey and get a Passage nonce value on success.\n  const nonce = await passageFlex.passkey.register(transactionId);\n  // 3. You can send this nonce to your backend to complete user registration.\n  const accessToken = await getAccessToken(nonce);\n};\n```\n\n### passageFlex.passkey.authenticate\n\nTo log in a user using a passkey, use the `passageFlex.passkey.authenticate` method.\n\nThis is a three step process:\n1. Your app should POST a user identifier (like an email) to your backend, which should request a transaction id from the Passage server to return to your app.\n2. Your app should then call `passageFlex.passkey.authenticate(transactionId)` to prompt your user to log in with a passkey. On success, the `authenticate` method will return a nonce.\n3. Lastly, your app should send this nonce to your backend to verify the user has been authenticated successfully. At this point, your backend could return an access token.\n\n\nExample:\n\n```tsx\nconst onPressLogIn = async () =\u003e {\n  // 1. Get transaction id string from your backend.\n  const transactionId = await getLogInTransactionId(\"existinguser@email.com\");\n  // 2. Prompt user to create a passkey and get a Passage nonce value on success.\n  const nonce = await passageFlex.passkey.authenticate(transactionId);\n  // 3. You can send this nonce to your backend to complete user authentication.\n  const accessToken = await getAccessToken(nonce);\n};\n```\n\n### passageFlex.passkey.isSupported\n\nYou can check if a user’s device supports passkeys by calling `passageFlex.passkey.isSupported`:\n\n```tsx\nconst deviceSupportsPasskeys = passageFlex.passkey.isSupported();\n```\n\n## Support \u0026 Feedback\n\nWe are here to help! Find additional docs, the best ways to get in touch with our team, and more within our [support resources](https://github.com/passageidentity/.github/blob/main/SUPPORT.md). \n\n\u003cbr /\u003e\n\n---\n\n\u003cp align=\"center\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://storage.googleapis.com/passage-docs/github-md-assets/passage-by-1password-dark.png\"\u003e\n      \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://storage.googleapis.com/passage-docs/github-md-assets/passage-by-1password-light.png\"\u003e\n      \u003cimg alt=\"Passage by 1Password Logo\" src=\"https://storage.googleapis.com/passage-docs/github-md-assets/passage-by-1password-light.png\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003csub\u003ePassage is a product by \u003ca href=\"https://1password.com/product/passage\"\u003e1Password\u003c/a\u003e, the global leader in access management solutions with nearly 150k business customers.\u003c/sub\u003e\u003cbr /\u003e\n    \u003csub\u003eThis project is licensed under the MIT license. See the \u003ca href=\"LICENSE\"\u003eLICENSE\u003c/a\u003e file for more info.\u003c/sub\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpassageidentity%2Fpassage-flex-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpassageidentity%2Fpassage-flex-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpassageidentity%2Fpassage-flex-react-native/lists"}