Keycloak & React.JS Tutorial and keycloak-js v9

[nrl240]

Hello!

Unfortunately, I'm stuck using "keycloak-js": "^9.0.3" for the time being; however, I am in the process of rewriting our app to use "react": "^18.2.0".

Are there any caveats to the tutorial when it comes to the aforementioned versions?

I see the logs I added to my renderApp function, plus the logs from within the rendered <App> component, but weirdly, nothing is displayed in the UI. I don't see any errors. I've added an <ErrorBoundary> component, which seems to be moot since the App component function is effectively run. Anything come to mind?

If I do this, the app displays properly:

// KeycloakService.initKeycloak(renderApp);
renderApp();

It's not clear to me why it doesn't when renderApp is invoked as the initKeycloak callback.

keycloak.ts

import Keycloak from 'keycloak-js';
import config from './config';

const keycloak = new (Keycloak as any)(config);

/**
 * Initializes Keycloak instance and calls the provided
 * callback function if successfully authenticated.
 */
const initKeycloak = async (onAuthenticatedCallback: () => void) => {
    console.log('initKeycloak!');

    try {
        const isAuthenticated = await keycloak.init({
            onLoad: 'check-sso',
            silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`,
            pkceMethod: 'S256',
            enableLogging: process.env.NODE_ENV,
        });
        console.log('isAuthenticated -->', isAuthenticated);

        if (!isAuthenticated) {
            console.log('user is not authenticated..!');
        }
        onAuthenticatedCallback();
    } catch (error) {
        console.error(error);
    }
};

const KeycloakService = {
    initKeycloak,
};

export default KeycloakService;

Thanks in advance!
Noelle

[nrl240]

Please ignore this question. I've since figured it out, and it doesn't seem like I can delete this question.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { RouterProvider } from 'react-router-dom';

import keycloak from './keycloak';
import router from './router';
import { store } from './redux/store';
import reportWebVitals from './reportWebVitals';

const initializeKeycloak = async (onAuthenticatedCallback: () => void) => {
    try {
        await keycloak.init(initOptions);
        onAuthenticatedCallback();
    } catch (error) {
        // eslint-disable-next-line no-console
        console.error(error);
    }
};

const renderApp = async () => {
    const root = ReactDOM.createRoot(
        document.getElementById('root') as HTMLElement
    );
    root.render(
        <React.StrictMode>
            <Provider store={store}>
                <RouterProvider router={router} />
            </Provider>
        </React.StrictMode>
    );

    // If you want to start measuring performance in your app, pass a function
    // to log results (for example: reportWebVitals(console.log))
    // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
    reportWebVitals();
};

initializeKeycloak(renderApp);