React Native Keycloak Adapter

Adapter to authenticate in keycloak from react native.

Platforms Supported

• iOS (Not tested)
• Android

Usage

Login component

<KeycloakAdapter.Login 
    config={this.config} 
    onLogin={this._handleLogin}
    spinner={true}
    disableZoom
/>

Props

• config: keycloak configuration.

   {
       url: 'https://<KEYCLOAK_HOST>/auth',
       realm: '<REALM NAME>',
       client_id: '<CLIENT ID>',
       redirect_uri: '<REDIRECT URI>',
   }

• onLogin: It is called once you have logged in.

• spinner: Spinner shown while loading the login or some url.

• customSpinner: Component of your own spinner.

• disableZoom: Disable zoom.

Token storage

Token management.

Get tokens

let tokens = await  KeycloakAdapter.tokenStorage.getTokens();

Set tokens

await  KeycloakAdapter.tokenStorage.setTokens(tokens);

Delete tokens

await  KeycloakAdapter.tokenStorage.deleteTokens();

Decode token

Get user information through the stored token.

let userInfo = await KeycloakAdapter.decodeToken();

Update token

Update the token, you can pass a number of minutes as a parameter, to update the token only if it expires in less than the indicated time.

let tokens = await KeycloakAdapter.updateToken();

Logout

await  KeycloakAdapter.logout();

Example

import React, { Component } from 'react';
import  KeycloakAdapter  from  'react-native-keycloak-adapter';

class Login extends Component {
  
    constructor(props) {
        super(props);
        // Here your way to get the necessary settings.
        this.config = {
            url: 'https://<KEYCLOAK_HOST>/auth',
            realm: '<REALM NAME>',
            client_id: '<CLIENT ID>',
            redirect_uri: '<REDIRECT URI>',
        }
    }
    
    _handleLogin(token, redirectUrl) {
        //You can decide how to handle the login either by navigating to a component, 
        //using Linking or any way you can think of.
        
        this.props.navigation.replace('Home');
    }  
  
    render() {
      return (
        <KeycloakAdapter.Login 
            config={this.config}
            onLogin={this._handleLogin}
            spinner={true}
            disableZoom
         />
      );
    }
    
    export default Login
}

Contributing

• Implement IOS.

License

MIT