{"id":18298386,"url":"https://github.com/fusionauth/fusionauth-javascript-sdk","last_synced_at":"2025-04-05T13:33:26.549Z","repository":{"id":226473064,"uuid":"768392602","full_name":"FusionAuth/fusionauth-javascript-sdk","owner":"FusionAuth","description":"Javascript SDK for FusionAuth","archived":false,"fork":false,"pushed_at":"2024-09-09T14:26:38.000Z","size":924,"stargazers_count":9,"open_issues_count":6,"forks_count":2,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-09-09T17:34:41.414Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fusionauth.io","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/FusionAuth.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-07T01:58:22.000Z","updated_at":"2024-09-09T14:26:40.000Z","dependencies_parsed_at":"2024-09-09T17:18:33.467Z","dependency_job_id":null,"html_url":"https://github.com/FusionAuth/fusionauth-javascript-sdk","commit_stats":null,"previous_names":["fusionauth/fusionauth-javascript-sdk"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FusionAuth%2Ffusionauth-javascript-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FusionAuth%2Ffusionauth-javascript-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FusionAuth%2Ffusionauth-javascript-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FusionAuth%2Ffusionauth-javascript-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FusionAuth","download_url":"https://codeload.github.com/FusionAuth/fusionauth-javascript-sdk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223192692,"owners_count":17103564,"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-05T15:05:55.545Z","updated_at":"2024-11-05T15:05:56.167Z","avatar_url":"https://github.com/FusionAuth.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Table of Contents\n\n- [Development](#development)\n    - [Gotchas](#gotchas)\n- [Manual testing](#manual-testing)\n- [E2E testing](#e2e-testing)\n- [Architecture](#architecture)\n- [Release Process](#release-process)\n- [Upgrade Policy](#upgrade-policy)\n\n# FusionAuth Web SDKs\n\nThis is the FusionAuth Web SDKs monorepo. This repo manages FusionAuth [React](https://fusionauth.io/docs/sdks/react-sdk), [Angular](https://fusionauth.io/docs/sdks/angular-sdk), and [Vue](https://fusionauth.io/docs/sdks/vue-sdk) SDKs.\n\nEach SDK in this repo offers the following APIs:\n- Redirect to/from a login, register, or logout page.\n- Manage authentication state using reactive properties in a given framework (React, Vue, Angular).\n- Fetch user info from fusionauth.\n- Refresh access token.\n    - This can be done automatically with the `shouldAutoRefresh` config option or by invoking a function.\n- UI elements.\n\n## Development\n\nInstall dependencies with `yarn install`.\n\nThe SDKs share a core package that contains framework agnostic functionality. Building the core package is a step included in the build script for each SDK (for example `build:sdk-react`).\n\nYou may use the FusionAuth Quickstarts to consume the package and test changes. See [React Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-react-web), [Angular Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-angular-web), \u0026 [Vue Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-vue-web)\n\nThere is more than one way to test your changes locally, but [yalc](https://github.com/wclr/yalc) has served devs of this project well, as long as you are aware of the [gotchas](#gotchas).\n\nYou may use the `yalc-pub:sdk` scripts in the root package.json. For example, `yarn yalc-pub:sdk-react`. These build the SDKs and publish to your yalc store so they may be consumed locally.\n\nHere's a potential iteration:\n- Make your changes in one of the SDKs. (Consider adding something like `console.log('Hello 👋')` where you know you’ll see it, to confirm your changes have been consumed.)\n- Build the SDK and publish a local build of the package. You may use: `yarn yalc-pub:sdk-angular`\n- cd into the app that will consume the local package.\n- `yalc add @fusionauth/angular-sdk`\n- Start the app and observe your changes.\n\n### Gotchas\n\nIf your changes are not being consumed as you expected, consider the following:\n\n- Delete `node_modules` and removing all previous yalc installations (`rm -rf node_modules \u0026\u0026 yalc remove --all`). Then reinstall dependencies and re-install from yalc. We've found this to provide consistent iterations, whereas `yalc push` has proved flakey for developers of this project.\n- If your consuming application uses an application framework like Angular, Nuxt, or Next, consider deleting any cache directories (such as `.angular` or `.nuxt`) between iterations.\n- Be aware of what node version you are using to publish and consume the package--mismatched node versions can cause yalc to flake with indication.\n\nIf you decide to use something like `yarn link` instead of `yalc`, be aware of how your dependencies are being consumed via the symlink. `yalc` copies your assets directly, so it's a more realistic representation of the production build than a symlink.\n\n## Manual testing\n\nThe SDKs provide the following functionality:\n- Login\n- Register new user\n- Logout\n- A logged in user automatically becomes logged out when their access token expires\n- User info can be fetched\n- A pending state when the request to fetch user info is unresolved\n- Failure to fetch user info provides a helpful error to the consuming application\n- Access token can be automatically and continuously refreshed\n- Redirect callback is invoked after login or register\n\n## E2E testing\nThe [Playwright](https://playwright.dev/docs/intro) end-to-end tests verify the proper functionality of several authentication and authorization endpoints in the FA SDK.\n\nPrerequisites\n- Ensure Playwright has been installed as a dependency \n- On a seperate server run the FA SDK consuming quickstart application.\n\nConfiguration\n\nThe Playwright configuration (playwright.config.ts) includes settings for running tests in parallel, specifying browser environments, and defining the base URL the tests will perform on.\n\nRunning the Tests\n\nPrior to running the tests you will want to check the Server Command that is used to start up a local instance of the FA SDK consuming quickstart application. Additionally you will want to note the port number this application will run on.\n\nTo run the tests, enter the following command with the FA SDK consuming quickstart application server start command and port number:\n\n`SERVER_COMMAND=\"your-server-start-command\" PORT=your-port-number yarn test:e2e`\n\nExample: `SERVER_COMMAND=\"npm run start\" PORT=9011 yarn test:e2e`\n\nStructure\n\nThe e2e tests are structured to use the Page Object Model (POM) design pattern. A POM is a design pattern in test automation that creates an object repository for web UI elements found in the pages directory. This makes tests more maintainable and reusable. \n    Example: In common.page.ts, methods for navigation and authentication are defined.\nTests import these page objects to perform actions, ensuring that if the UI changes, only the page object needs updating, not all the tests.\n\n## Architecture\n\nWe use a monorepo because our SDKs share core functionality, which is contained in the @fusionauth-sdk/core package. This private module is bundled into the distributed SDK packages, allowing us to maintain core logic in a single place.\n\nFor React and Vue, our build tool is [`Vite`](https://vitejs.dev/guide/).\n\nAngular differs slightly because [`@angular-devkit/build-angular:ng-packagr`](https://github.com/ng-packagr/ng-packagr), the builder for Angular libraries, doesn't support bundling dependencies from outside the Angular workspace. Our solution is to copy the core package's `src` directory into the Angular workspace without transpiling it, letting Angular's library builder handle it as if it were not an external dependency. This copied directory functions like a `dist`: it is git-ignored, and changes should be made in `packages/core`. The build process will then consume the updates. See [GitHub issue #84](https://github.com/FusionAuth/fusionauth-javascript-sdk/issues/84) for more details.\n\n## Release Process\n\nThe SDKs use [GitHub Actions](https://docs.github.com/en/actions) to automate the release process. Each SDK has a publish workflow defined in `.github/workflows`. \n\nSteps to create a release:\n1. Checkout a new branch.\n2. Bump the version number of the SDK to be released. Follow [semantic versioning](https://semver.org/).\n3. Update documentation.\n    - Add a section for the new version to the SDKs changelog at `changes.md`.\n    - Edit the README for the SDK to be released if needed. It matters to users of the SDK, so please keep it up-to-date!\n    - Update the generated docs for the SDK to be released with the `docs` script in its package.json.\n4. Manually test the SDK to verify that the functionality described in [manual testing](#manual-testing) is correct.\n5. Merge the release branch into `main`.\n6. Dispatch the workflow to publish the new version.\n\n## Upgrade Policy\n\nThis library may periodically receive updates with bug fixes, security patches, tests, code samples, or documentation changes.\n\nThese releases may also update dependencies, language engines, and operating systems, as we\\'ll follow the deprecation and sunsetting policies of the underlying technologies that the libraries use.\n\nThis means that after a dependency (e.g. language, framework, or operating system) is deprecated by its maintainer, this library will also be deprecated by us, and may eventually be updated to use a newer version.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusionauth%2Ffusionauth-javascript-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffusionauth%2Ffusionauth-javascript-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusionauth%2Ffusionauth-javascript-sdk/lists"}