{"id":26316739,"url":"https://github.com/forwardsoftware/react-auth","last_synced_at":"2025-03-15T13:16:39.704Z","repository":{"id":39919694,"uuid":"457333650","full_name":"forwardsoftware/react-auth","owner":"forwardsoftware","description":"Simplify your Auth flow when working with React apps","archived":false,"fork":false,"pushed_at":"2022-11-16T01:30:20.000Z","size":869,"stargazers_count":15,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-21T23:03:03.541Z","etag":null,"topics":["auth","authentication","react","react-native"],"latest_commit_sha":null,"homepage":"","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/forwardsoftware.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}},"created_at":"2022-02-09T11:40:16.000Z","updated_at":"2024-09-11T06:06:05.000Z","dependencies_parsed_at":"2022-09-10T16:32:35.068Z","dependency_job_id":null,"html_url":"https://github.com/forwardsoftware/react-auth","commit_stats":null,"previous_names":["forward-software/react-auth"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forwardsoftware%2Freact-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forwardsoftware%2Freact-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forwardsoftware%2Freact-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forwardsoftware%2Freact-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forwardsoftware","download_url":"https://codeload.github.com/forwardsoftware/react-auth/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243732253,"owners_count":20338839,"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":["auth","authentication","react","react-native"],"created_at":"2025-03-15T13:16:39.194Z","updated_at":"2025-03-15T13:16:39.689Z","avatar_url":"https://github.com/forwardsoftware.png","language":"TypeScript","readme":"# React Auth\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./assets/cover.jpeg\" width=\"100%\" /\u003e\n\u003c/div\u003e\n\n\u003e Simplify your Auth flow when working with React apps\n\n[![license](https://img.shields.io/github/license/Forward-Software/react-auth.svg)](https://github.com/Forward-Software/react-auth/blob/main/LICENSE) [![CI](https://github.com/Forward-Software/react-auth/actions/workflows/main.yml/badge.svg)](https://github.com/Forward-Software/react-auth/actions/workflows/main.yml) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/Forward-Software/react-auth.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/Forward-Software/react-auth/context:javascript) [![Coverage Status](https://coveralls.io/repos/github/Forward-Software/react-auth/badge.svg?branch=main)](https://coveralls.io/github/Forward-Software/react-auth?branch=main) [![Github Issues](https://img.shields.io/github/issues/Forward-Software/react-auth.svg)](https://github.com/Forward-Software/react-auth/issues)\n\n[![npm](https://img.shields.io/npm/v/@forward-software/react-auth)](https://npmjs.com/package/@forward-software/react-auth) [![NPM downloads](https://img.shields.io/npm/dm/@forward-software/react-auth.svg)](https://npmjs.com/package/@forward-software/react-auth)\n\nThis React package allows you to streamline the integration of user authentication flows in any React app by providing a single unified interface\n\n---\n\n## Install\n\n```sh\nyarn add @forward-software/react-auth\n```\n\n## Setup\n\n### Define an AuthClient class\n\nCreate a new `AuthClient` class which extends the `BaseAuthClient` provided by this library and implements the 4 required methods:\n\n- **onInit**, called when the AuthClient gets initialized\n- **onLogin**, invoked when the `login` method of the AuthClient gets called\n- **onRefresh**, invoked when the `refresh` method of the AuthClient gets called\n- **onLogout**, invoked when the `logout` method of the AuthClient gets called\n\n```ts\nimport { BaseAuthClient } from '@forward-software/react-auth';\n\n// The type for your credentials\ntype AuthCredentials = {\n  username: string;\n\n  password: string;\n};\n\n// The type for your tokens\ntype AuthTokens = {\n  authToken: string;\n\n  refreshToken: string;\n};\n\nclass AuthClient extends BaseAuthClient\u003cAuthTokens, AuthCredentials\u003e {\n  protected onInit(): Promise\u003cvoid\u003e {\n    // Implement the initialization logic for your client\n  }\n\n  protected onLogin(credentials?: AuthCredentials): Promise\u003cAuthTokens\u003e {\n    // Implement the logic required to exchange the provided credentials for user tokens\n  }\n\n  protected onRefresh(minValidity?: number): Promise\u003cAuthTokens\u003e {\n    // Implement the logic required to refresh the current user tokens\n  }\n\n  protected onLogout(): Promise\u003cvoid\u003e {\n    // Implement the logic required to invalidate the current user tokens\n  }\n}\n```\n\n### Instantiate an AuthClient\n\nCreate an instance of the `AuthClient` class defined\n\n```ts\nconst authClient = new AuthClient();\n```\n\n#### AuthClient Props\n\n- `isInitialized`, a boolean indicating if the AuthClient has been initialized\n- `isAuthenticated`, a boolean indicating if the login process has been successfull and the user is authenticated\n- `tokens`, the current tokens returned by the `login` or the `refresh` process\n\n#### AuthClient Methods\n\n##### Core\n\n- `init()`, initialize the AuthClient (**N.B.** this shouldn't be called if using `AuthProvider` - see below)\n- `login(credentials)`, start the login process\n- `refresh()`, refresh the current tokens\n- `logout()`, logout and invalidate the current tokens\n\n##### EventEmitter\n\n- `on(eventName, listenerFn)`, subscribe to `eventName` events emitted by the AuthClient\n- `off(eventName, listenerFn)`, unsubscribe from `eventName` events emitted by the AuthClient\n\n##### Observable\n\n- `subscribe(() =\u003e { })`, subscribe to AuthClient state changes\n- `getSnapshot()`, returns the current state of the AuthClient\n\n### React components\n\nSetup React components to interact with the AuthClient using the `createAuth` function exported by this library\n\n```ts\nimport { createAuth } from '@forward-software/react-auth';\n\nexport const { AuthProvider, useAuthClient } = createAuth(authClient);\n```\n\nthe `createAuth` function returns:\n\n- `AuthProvider`, the context Provider component that should wrap your app and provide access to your AuthClient\n- `useAuthClient`, the hook to retrieve and interact with your AuthClient\n\n#### AuthProvider\n\nThe context Provider component that should wrap your app and provide access to your AuthClient, this component also accepts 2 additional props\n\n- `ErrorComponent`, displayed when the AuthClient initialization fails\n- `LoadingComponent`, displayed while the AuthClient is being initialized\n\n## Examples\n\nThe `examples` folder contains some examples of how you can integrate this library in your React app.\n\n## Credits\n\nThis library has been inspired by [`react-keycloak`](https://github.com/react-keycloak/react-keycloak) and similar libraries.\n\n## License\n\nMIT\n\n---\n\nMade with ✨ \u0026 ❤️ by [ForWarD Software](https://github.com/Forward-Software) and [contributors](https://github.com/Forward-Software/react-auth/graphs/contributors)\n\nIf you found this project to be helpful, please consider contacting us to develop your React and React Native projects.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforwardsoftware%2Freact-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforwardsoftware%2Freact-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforwardsoftware%2Freact-auth/lists"}