Skip to main content

Quickstart Guide: Integrate TideCloak JS SDK with JavaScript

1. Prerequisites​

Before starting, ensure you have:

  • A TideCloak instance running.
  • A realm and client configured in TideCloak.
  • TideCloak JS SDK available via CDN or npm.

2. Initialize TideCloak​

Add the CDN for Keycloak: You need to include the CDN for Keycloak in the <head> section of your HTML file to access Keycloak's JavaScript functionality.

   <script src="https://cdn.jsdelivr.net/npm/keycloak-js@25.0.2/dist/keycloak.min.js"></script>
    <script>

Add the initialization code: After adding the CDN, initialize TideCloak by configuring Keycloak with your own url, realm, and clientId. Replace these values with your own configuration details.

var keycloak = new Keycloak({
    url: 'http://localhost:8080',  // Your TideCloak instance URL
    realm: 'myrealm',               // Your realm
    clientId: 'myclient'            // Your clientId
});

3. Implement Login​

Use the following function to handle user login. It checks if the user is authenticated, and if not, it redirects them to the TideCloak login page.

function login() {
    keycloak.init({ onLoad: 'check-sso' }).then(function(authenticated) {
        if (!authenticated) {
            keycloak.login({ redirectUri: window.location.href });
        } else {
            displayUserInfo();
        }
    }).catch(function() {
        console.log('Initialization failed');
    });
}

4. Implement Logout​

To log the user out, use the following function. It will log the user out and then redirect them back to the specified redirectUri.

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

5. Display User Information​

After a successful login, you can display the user's profile information by calling the following function. This function fetches and displays the user's details such as username and email.

function displayUserInfo() {
    keycloak.loadUserProfile().then(function(profile) {
        console.log('User:', profile.username);
        // Display the user's name on the screen
        document.getElementById('user-info').innerText = 'Welcome, ' + profile.username;
    }).catch(function() {
        console.log('Failed to load profile');
    });
}

6. Example Integration Flow​

Here's how you might tie it all together in your existing app:

  1. Initialize TideCloak when the app loads.
  2. Check Authentication Status and either log the user in or display their info.
  3. Provide Logout functionality.
    <script src="https://cdn.jsdelivr.net/npm/keycloak-js@25.0.2/dist/keycloak.min.js"></script>
    <script>

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

// Login flow
function login() {
    keycloak.init({ onLoad: 'check-sso' }).then(function(authenticated) {
        if (!authenticated) {
            keycloak.login({ redirectUri: window.location.href });
        } else {
            displayUserInfo();
        }
    }).catch(function() {
        console.log('Initialization failed');
    });
}

// Display user info
function displayUserInfo() {
    keycloak.loadUserProfile().then(function(profile) {
        console.log('User:', profile.username);
        // Display the user's name on the screen
        document.getElementById('user-info').innerText = 'Welcome, ' + profile.username;
    }).catch(function() {
        console.log('Failed to load profile');
    });
}

// Logout function
function logout() {
    keycloak.logout({ redirectUri: 'http://localhost:8001' });
}

    </script>



Next Steps​

Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.

This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with TideCloak, check out the following resources: