@itmatter/react-native-keycloak-adapter

1.1.8 • Public • Published

React Native Keycloak Adapter

Adapter to authenticate in keycloak from react native.

Platforms Supported

  • [ ] iOS (Not tested)
  • [x] 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

Package Sidebar

Install

npm i @itmatter/react-native-keycloak-adapter

Weekly Downloads

1

Version

1.1.8

License

MIT

Unpacked Size

28.6 kB

Total Files

20

Last publish

Collaborators

  • mchynal