{"id":13998429,"url":"https://github.com/react-keycloak/react-native-keycloak","last_synced_at":"2025-07-23T06:31:35.153Z","repository":{"id":37356540,"uuid":"280219551","full_name":"react-keycloak/react-native-keycloak","owner":"react-keycloak","description":"React Native components for Keycloak","archived":false,"fork":false,"pushed_at":"2023-02-03T12:32:00.000Z","size":2225,"stargazers_count":174,"open_issues_count":35,"forks_count":48,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-14T17:00:50.561Z","etag":null,"topics":["android","hacktoberfest","ios","keycloak","keycloak-js","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/react-keycloak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":"reactkeycloak","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":[]}},"created_at":"2020-07-16T17:44:46.000Z","updated_at":"2025-05-12T22:44:59.000Z","dependencies_parsed_at":"2023-02-18T06:46:03.455Z","dependency_job_id":null,"html_url":"https://github.com/react-keycloak/react-native-keycloak","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/react-keycloak/react-native-keycloak","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-keycloak%2Freact-native-keycloak","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-keycloak%2Freact-native-keycloak/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-keycloak%2Freact-native-keycloak/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-keycloak%2Freact-native-keycloak/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-keycloak","download_url":"https://codeload.github.com/react-keycloak/react-native-keycloak/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-keycloak%2Freact-native-keycloak/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266631348,"owners_count":23959419,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["android","hacktoberfest","ios","keycloak","keycloak-js","react","react-native"],"created_at":"2024-08-09T19:01:39.933Z","updated_at":"2025-07-23T06:31:34.824Z","avatar_url":"https://github.com/react-keycloak.png","language":"TypeScript","funding_links":["https://patreon.com/reactkeycloak"],"categories":["TypeScript"],"sub_categories":[],"readme":"![React Native Keycloak](/art/rn-keycloak.png?raw=true 'React Native Keycloak Logo')\n\n# React Native Keycloak \u003c!-- omit in toc --\u003e\n\n\u003e React Native component for [Keycloak](https://www.keycloak.org/)\n\n[![NPM (scoped)](https://img.shields.io/npm/v/@react-keycloak/native?label=npm%20%7C%20native)](https://www.npmjs.com/package/@react-keycloak/native)\n\n[![License](https://img.shields.io/github/license/react-keycloak/react-native-keycloak.svg)](https://github.com/react-keycloak/react-native-keycloak/blob/master/LICENSE)\n[![Github Issues](https://img.shields.io/github/issues/react-keycloak/react-native-keycloak.svg)](https://github.com/react-keycloak/react-native-keycloak/issues)\n\n[![Gitter](https://img.shields.io/gitter/room/react-keycloak/community)](https://gitter.im/react-keycloak/community)\n\n---\n\n## Table of Contents \u003c!-- omit in toc --\u003e\n\n- [Install](#install)\n  - [Setup Deep links (iOS)](#setup-deep-links-ios)\n  - [Setup Deep links (Android)](#setup-deep-links-android)\n- [Getting Started](#getting-started)\n  - [Setup RNKeycloak instance](#setup-rnkeycloak-instance)\n  - [Setup ReactNativeKeycloakProvider](#setup-reactnativekeycloakprovider)\n  - [Hook Usage](#hook-usage)\n  - [External Usage (Advanced)](#external-usage-advanced)\n- [Examples](#examples)\n- [Contributing](#contributing)\n- [License](#license)\n\n---\n\n## Install\n\n```sh\nyarn add @react-keycloak/native\nyarn add react-native-inappbrowser-reborn\n```\n\nor\n\n```sh\nnpm install @react-keycloak/native\nnpm install react-native-inappbrowser-reborn --save\n```\n\nYou have to link `react-native-inappbrowser-reborn`.\nFor more information about how to link it go to [Official repo on github](https://github.com/proyecto26/react-native-inappbrowser)\n\n### Setup Deep links (iOS)\n\nTo navigate back from webview to you app, you have to configure deep linking.\n\n![image](https://user-images.githubusercontent.com/3645225/92749944-e3215080-f386-11ea-8ba7-7f0adf33a6e5.png)\n\nAnd in `AppDelegate.m`, add these lines:\n\n```\n#import \u003cReact/RCTLinkingManager.h\u003e\n\n......\n......\n\n// Deep linking\n- (BOOL)application:(UIApplication *)application\n   openURL:(NSURL *)url\n   options:(NSDictionary\u003cUIApplicationOpenURLOptionsKey,id\u003e *)options\n{\n  return [RCTLinkingManager application:application openURL:url options:options];\n}\n```\n\nN.B.: replace `myapp` with the name of your app\n\n### Setup Deep links (Android)\n\nTo configure the external linking in Android, you can create a new intent in the manifest.\n\nThe easiest way to do this is with the `uri-scheme` package: `npx uri-scheme add myapp --android`\n\nIf you want to add it manually, open up `YourApp/android/app/src/main/AndroidManifest.xml`, and make the following adjustments:\n\n1. Set `launchMode` of `MainActivity` to `singleTask` in order to receive intent on existing `MainActivity` (this is the default on all new projects, so you may not need to actually change anything!). It is useful if you want to perform navigation using deep link you have been registered - [details](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters)\n2. Add the new intent-filter inside the MainActivity entry with a VIEW type action:\n\n```\n\u003cactivity\n    android:name=\".MainActivity\"\n    android:launchMode=\"singleTask\"\u003e\n    \u003cintent-filter\u003e\n        \u003caction android:name=\"android.intent.action.MAIN\" /\u003e\n        \u003ccategory android:name=\"android.intent.category.LAUNCHER\" /\u003e\n    \u003c/intent-filter\u003e\n    \u003cintent-filter\u003e\n        \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n        \u003ccategory android:name=\"android.intent.category.DEFAULT\" /\u003e\n        \u003ccategory android:name=\"android.intent.category.BROWSABLE\" /\u003e\n        \u003cdata android:scheme=\"myapp\" /\u003e\n    \u003c/intent-filter\u003e\n\u003c/activity\u003e\n```\n\nN.B.: replace `myapp` with the name of your app\n\n## Getting Started\n\n### Setup RNKeycloak instance\n\nCreate a `keycloak.ts` file in the `src` folder of your project (where `App.ts` is located) with the following content\n\n```ts\nimport { RNKeycloak } from '@react-keycloak/native';\n\n// Setup Keycloak instance as needed\n// Pass initialization options as required\nconst keycloak = new RNKeycloak({\n  url: 'http://keycloak-server/auth',\n  realm: 'kc-realm',\n  clientId: 'web',\n});\n\nexport default keycloak;\n```\n\n### Setup ReactNativeKeycloakProvider\n\nWrap your App inside `KeycloakProvider` and pass the `keycloak` instance as prop\n\n```tsx\nimport { ReactNativeKeycloakProvider } from '@react-keycloak/native';\n\nimport keycloak from './keycloak';\n\n// Wrap everything inside ReactNativeKeycloakProvider\nconst App = () =\u003e (\n  \u003cReactNativeKeycloakProvider\n    authClient={keycloak}\n    initOptions={{\n      redirectUri: 'myapp://Homepage',\n      // if you need to customize \"react-native-inappbrowser-reborn\" View you can use the following attribute\n      inAppBrowserOptions: {\n        // For iOS check: https://github.com/proyecto26/react-native-inappbrowser#ios-options\n        // For Android check: https://github.com/proyecto26/react-native-inappbrowser#android-options\n      },\n    }}\n  \u003e\n    \u003cLogin /\u003e\n  \u003c/ReactNativeKeycloakProvider\u003e\n);\n\nexport default App;\n```\n\n**N.B.** If your using other providers (such as `react-redux`) it is recommended to place them inside `ReactNativeKeycloakProvider`.\n\n`ReactNativeKeycloakProvider` automatically invokes `keycloak.init()` method when needed and supports the following props:\n\n- `initConfig`, contains the object to be passed to `keycloak.init()` method, by default the following is used\n\n      {\n        onLoad: 'check-sso',\n      }\n\n  for more options see [Keycloak docs](https://www.keycloak.org/docs/latest/securing_apps/index.html#init-options).\n\n- `LoadingComponent`, a component to be displayed while `keycloak` is being initialized, if not provided child components will be rendered immediately. Defaults to `null`\n\n- `isLoadingCheck`, an optional loading check function to customize LoadingComponent display condition. Return `true` to display LoadingComponent, `false` to hide it.\n\n  Can be implemented as follow\n\n  ```ts\n  (keycloak) =\u003e !keycloak.authenticated;\n  ```\n\n- `onEvent`, an handler function that receives events launched by `keycloak`, defaults to `null`.\n\n  It can be implemented as follow\n\n  ```ts\n  (event, error) =\u003e {\n    console.log('onKeycloakEvent', event, error);\n  };\n  ```\n\n  Published events are:\n\n  - `onReady`\n  - `onInitError`\n  - `onAuthSuccess`\n  - `onAuthError`\n  - `onAuthRefreshSuccess`\n  - `onAuthRefreshError`\n  - `onTokenExpired`\n  - `onAuthLogout`\n\n- `onTokens`, an handler function that receives `keycloak` tokens as an object every time they change, defaults to `null`.\n\n  Keycloak tokens are returned as follow\n\n  ```json\n  {\n    \"idToken\": string,\n    \"refreshToken\": string,\n    \"token\": string\n  }\n  ```\n\n### Hook Usage\n\nWhen a component requires access to `Keycloak`, you can use the `useKeycloak` Hook.\n\n```tsx\nimport { useKeycloak } from '@react-keycloak/native';\n\nexport default () =\u003e {\n  // Using array destructuring\n  const [keycloak, initialized] = useKeycloak();\n  // or Object destructuring\n  const { keycloak, initialized } = useKeycloak();\n\n  // Here you can access all of keycloak methods and variables.\n  // See https://www.keycloak.org/docs/latest/securing_apps/index.html#javascript-adapter-reference\n\n  return (\n    \u003cView\u003e\n      \u003cText\u003e\n        {`User is ${!keycloak.authenticated ? 'NOT ' : ''}authenticated`}\n      \u003c/Text\u003e\n\n      {!!keycloak.authenticated \u0026\u0026 (\n        \u003cButton onPress={() =\u003e keycloak.logout()} title=\"Logout\" /\u003e\n      )}\n    \u003c/View\u003e\n  );\n};\n```\n\n### External Usage (Advanced)\n\nIf you need to access `keycloak` instance from non-`React` files (such as `sagas`, `utils`, `providers` ...), you can import the instance directly from the `keycloak.ts` file.\n\nThe instance will be initialized by `react-keycloak` but you'll need to be carefull when using the instance and avoid setting/overriding any props, you can however freely access the exposed methods (such as `refreshToken`, `login`, etc...).\n\n## Examples\n\nSee inside `example` folder for a demo app showcasing the main features.\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-keycloak%2Freact-native-keycloak","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-keycloak%2Freact-native-keycloak","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-keycloak%2Freact-native-keycloak/lists"}