README

@fclebinho/react-keycloak

This is a fork of mahomahoxd's react-native-login-keycloak module. I started from that to build some new feature using a functional style.

This plugin exposes some util methods to interact with Keycloak in order to handle the user session.

Documentation

Install

Using npm

npm i --save @fclebinho/react-keycloak

Using yarn

yarn add @fclebinho/react-keycloak

Setup

App configuration

Please configure Linking module, including steps for handling Universal links (This might get changed due to not being able to close the tab on leave, ending up with a lot of tabs in the browser).

Also, add the applinks: entry to the Associated Domains Capability of your app.

Imports

The plugin uses an export default statement, so you can import the variable with:

import Keycloak from '@fclebinho/react-keycloak';

From that variable, you have access to all the util methods the plugin implements.

API

Keycloak.login

Keycloak.login(conf, callback, scope)
  .then((response) => /* Your resolve */ )
  .catch((error) => /* Your reject*/ )

Method arguments:

conf: The JSON configuration object (see the example below).
callback: By default the plugin try to open the keycloak login url on the default browser. Using this callback you can override this behavior e.g. handling the login flow into a WebView without leaving the app.
scope: By default its value is 'info'. You can override this argument if some custom Keycloak behavior is needed (e.g if you need to handle the Keycloak ID_TOKEN, you have to pass 'openid info offline_access' as value).

config = {
  "realm": "<real_name>",
  "auth-server-url": "https://<domain>/sso/auth/",
  "appsiteUri": "<your_app_name>",
  "redirectUri": "<your_app_name>://<stack_screen_name>",
  "ssl-required": "string",
  "resource": "<resource_name>",
  "credentials": {
    "secret": "<secret_uuid>"
  },
  "confidential-port": "string",
}

Resolver arguments:

response: a JSON object containing two fields:
- tokens: a JSON containing all the tokens returned by Keycloak. If you used'info' as scope the JSON will be as shown below.
- deepLinkUrl: The redirectUrl with some Keycloak query params added at the end.

response.tokens = {
    "access_token": "string",
    "expires_in": "number",
    "refresh_expires_in": "number",
    "refresh_token": "string",
    "token_type": "string",
    "not-before-policy": "number",
    "session_state": "string",
    "scope": "string",
}

Keycloak.apiLogin

Keycloak.apiLogin(conf, username, password, [scope = 'info'])
    .then((response) => /* Your resolve */ )
    .catch((error) => /* Your reject*/ )

Method arguments:

conf: The JSON configuration object (see the example above).
username: The username to be logged in
password: The password associated to the above username
scope: same behavior as above

Manually handling the tokens

import Keycloak, { TokenStorage } from '@fclebinho/react-keycloak'

Logging in by the login function will save the tokens information and the configuration object into the AsyncStorage.
Through the TokenStorage object, the plugin exports some methods that can be used to interact with these objects.

Keycloak.retrieveUserInfo

Keycloak.retrieveUserInfo(conf)
  .then((userInfo) => /* Your resolve */ );
  .catch((error) => /* Your reject*/ )

Passing a configuration JSON object, makes available into the resolve function the JSON that describes the user inside Keycloak.

Keycloak.refreshToken

Keycloak.refreshToken(conf)
  .then((response) => /* Your resolve */ );
  .catch((error) => /* Your reject*/ )

Passing a configuration JSON object, makes available into the resolve function the JSON containing the refreshed tokens. This information are also saved into the AsyncStorage, as described above.

Keycloak.logout

Keycloak.logout(conf)
  .then(() => /* Your resolve */ );
  .catch((error) => /* Your reject*/ )

Passing a configuration JSON object, the method call takes care of logging out the user as well as removing the tokens from the AsyncStorage.

Utils

TokensUtils.isAccessTokenExpired

import { TokensUtils } from '@fclebinho/react-keycloak';

TokensUtils.isAccessTokenExpired()
  .then(() => /* Your resolve */ );
  .catch((error) => /* Your reject*/ )

This utils method check if the access token saved into the AsyncStorage is still valid or if it's expired. Since it interact witht the AsyncStorage, a promise must be handled.

TokensUtils.willAccessTokenExpireInLessThen

import { TokensUtils } from '@fclebinho/react-keycloak';

TokensUtils.willAccessTokenExpireInLessThen(10)
  .then(() => /* Your resolve */ );
  .catch((error) => /* Your reject*/ )

This utils method check if the access token saved into the AsyncStorage will expire in less than 10 seconds. Since it interact witht the AsyncStorage, a promise must be handled.

Usage no npm install needed!