Skip to main content

React SDK Methods Reference

Welcome to the React SDK Reference. This reference list will help you get started with integrating the SDK into your React application. Follow the steps below to understand and implement the methods used with the SDK to secure your application.

1. Prerequisites​

Before you begin, make sure you have:

  • A TideCloak server up and running.
  • A registered client in TideCloak.
  • Basic knowledge of React and JavaScript.

2. Installation​

keycloak-js​

Install the TideCloak JavaScript adapter using npm:

npm install keycloak-js

3. Configuration​

Keycloak()​

Initialize the TideCloak object with your client configuration:

import Keycloak from 'keycloak-js';

const keycloak = new Keycloak({
    url: 'http://localhost:8080',
    realm: 'myrealm',
    clientId: 'myclient'
});

4. Initialization​

init()​

To initialize TideCloak in your React application, use the init method:

keycloak.init({ 
    checkLoginIframe: false
}).then(function(authenticated) {
    alert(authenticated ? keycloak.token : 'Not authenticated');
}).catch(function() {
    alert('Failed to initialize Keycloak');
});

Options:

  • checkLoginIframe: Enables or disables the use of an iframe to detect if the user is logged in.
    • true (default): Enables the iframe check.
    • false: Disables the iframe check.

Example:

keycloak.init({
    checkLoginIframe: false
}).then(function(authenticated) {
    alert(authenticated ? keycloak.token : 'Not authenticated');
}).catch(function() {
    alert('Failed to initialize Keycloak');
});

5. Authentication Handling​

login()​

To manually trigger the login process, use the login method:

const loginUrl = keycloak.createLoginUrl({
    scope: 'openid',
    redirectUri: 'http://localhost:8000',
    locale: 'en',
    checkLoginIframe: false
});

Options:

  • redirectUri: Specifies the URI to redirect to after login.
  • scope: Specifies the OAuth2 scope, e.g., 'openid'.
  • locale: Defines the language to be used on the login page.
  • checkLoginIframe: Whether to use the login iframe check.

Example:

keycloak.login({
    redirectUri: 'http://localhost:8000',
    scope: 'openid',
    locale: 'en',
    checkLoginIframe: false
});

logout()​

To log the user out, use the logout method:

keycloak.logout({ 
    redirectUri: 'http://localhost:8000'
});

Options:

  • redirectUri: Specifies the URI to redirect to after logout.

Example:

keycloak.logout({
    redirectUri: 'http://localhost:8000'
});

register()​

Redirect the user to the registration page using the register method:

keycloak.register({
    redirectUri: 'http://localhost:8000',
    scope: 'openid email',
    locale: 'en',
    action: 'register',
    prompt: 'login',
    checkLoginIframe: false
});

Options:

  • redirectUri: Specifies the URI to redirect to after registration.
  • scope: Defines the OAuth2 scope, e.g., 'openid email'.
  • locale: Sets the language for the registration page.
  • action: Specifies the registration action, typically 'register'.
  • prompt: Controls the registration page behavior, e.g., 'login'.

Example:

keycloak.register({
    redirectUri: 'http://localhost:8000/after-register',
    scope: 'openid email',
    locale: 'en',
    action: 'register',
    prompt: 'login',
    checkLoginIframe: false
});

6. Accessing User Information​

loadUserProfile()​

The loadUserProfile() method loads the user profile details from the TideCloak server:

keycloak.loadUserProfile().then(function(profile) {
    console.log('User profile', profile);
}).catch(function() {
    console.log('Failed to load user profile');
});

Example:

keycloak.loadUserProfile().then(function(profile) {
    console.log('User profile', profile);
}).catch(function() {
    console.log('Failed to load user profile');
});

7. Authentication Status​

authenticated​

You can secure your React components by checking the user's authentication status before rendering:

if (!keycloak.authenticated) {
    keycloak.login();
}

Example:

if (!keycloak.authenticated) {
    keycloak.login({redirectUri: window.location.href});
} else {
    console.log('User is authenticated');
}

8. Debugging and Logging​

enableLogging​

Enable debugging by setting the enableLogging option in the TideCloak initialization:

keycloak.init({
    checkLoginIframe: false,
    enableLogging: true
}).then(function(authenticated) {
    console.log('Logging enabled and user authenticated:', authenticated);
});

Options:

  • enableLogging: When set to true, logs additional debug information to the console.

Example:

keycloak.init({
    checkLoginIframe: false,
    enableLogging: true
}).then(function(authenticated) {
    console.log('Logging enabled and user authenticated:', authenticated);
});

9. Security​

Enecryption​

Decryption​