1.1.8 • Published 1 year ago

@itmatter/react-native-keycloak-adapter v1.1.8

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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.

    	```js
    	{
    	    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