sso-package v1.0.62

React SSO Package Integration

This guide explains how to integrate and use the @vbee-holding/sso-pkg package in a React application with session persistence.

Installation

1. Create a .npmrc file with the following content:

   @vbee-holding:registry=https://npm.pkg.github.com
   //npm.pkg.github.com/:_authToken=${NPM_TOKEN}

2. Set the NPM_TOKEN environment variable:

   NPM_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

3. Install the package:

   npm install @vbee-holding/sso-pkg@1.0.7

4. Add the package dependency to your package.json:

   "@vbee-holding/sso-pkg": "^1.0.7"

Quick Start

Initialize SSO Configuration and Provider

Create the SSO configuration with the required parameters:

• clientId: The client ID created on Keycloak.
• ssoUrl: The authentication URL of the SSO web application.
• ssoApiUrl: The API URL of the SSO account server.
• clientDomain: The domain to store the cookie data.
• options: Additional key-value pairs for various features.

import { SSOProvider } from "@vbee-holding/sso-pkg";

const configSSO = {
  clientId: CLIENT_ID,
  ssoUrl: SSO_URL,
  ssoApiUrl: SSO_API_URL,
  clientDomain: CONSOLE_URL,
  options: {
    autoLogin: true,
    useSSO: true,
  },
};

function App() {
  return (
    <SSOProvider config={configSSO}>
      <AppRouter />
    </SSOProvider>
  );
}

export default App;

Using the useAuthSSO Hook

The useAuthSSO hook provides several values and functions to manage authentication state:

import React from "react";
import { useAuthSSO } from "@vbee-holding/sso-pkg";

function UserProfile() {
  const { authSSO } = useAuthSSO();

  if (!authSSO.initialized) {
    return <div>Loading...</div>;
  }

  if (!authSSO.authenticated) {
    authSSO.login({ redirectUri: "" });
    return null;
  }

  return (
    <div>
      <h1>Welcome</h1>
    </div>
  );
}

export default UserProfile;

AuthSSO Values and Functions

• clientId: This is the client ID used to authenticate the user .
• ssoUrl: This is URL to the SSO for the login or signup process.
• ssoApiUrl: This is the URL to the SSO API for the token request.
• clientDomain: This is the domain to set the cookie.
• initialized: This is a boolean flag to check if the context is initialized.
• authenticated: This is a boolean flag to check if the user is authenticated.
• subject: The user id.
• realmAccess: The realm roles associated with the token.
• resourceAccess: The resource roles associated with the token.
• token: The base64 encoded token that can be sent in the Authorization header in requests to services.
• tokenParsed: The parsed token as a JavaScript object.
• refreshToken: The base64 encoded refresh token that can be used to retrieve a new token.
• refreshTokenParsed: The parsed refresh token as a JavaScript object.
• idToken: The base64 encoded ID token.
• idTokenParsed: The parsed id token as a JavaScript object.
• timeSkew: The estimated time difference between the browser time and the Keycloak server in seconds. This value is just an estimation, but is accurate enough when determining if a token is expired or not.
• register: Redirects to register form.
• login: Redirects to login form.
• loginSocial: Redirects to login form with social provider.
• accountManagement: Redirects to account management.
• logout: Logs out the user.