demo-auth-flow/demo-client-app/src/App.js

import { useCallback, useEffect } from "react";
import Stomp from "webstomp-client";
import SockJS from "sockjs-client";
import { proxy } from "../package.json";

import logo from "./logo.svg";
import "./App.css";

let stomp;

const connect = async (token) => {
  if (stomp != null) return;
  let url = "/api/ws";
  let message = "Connect to Websocket";
  // webpack-dev-server also uses sockjs-client;
  // default proxy may incorrectly route requests
  // resulting in transport switch,
  // which is slow on https.
  //
  // Hence, we cannot rely on default proxy.
  // Requests should be sent directly to a websocket.
  if (process.env.NODE_ENV !== "production") {
    url = `${proxy}${url}`;
    message += " Directly";
  }
  console.info(message);
  const sock = new SockJS(url);
  stomp = Stomp.over(sock);

  // disable stomp logging
  stomp.debug = (msg) => {};

  stomp.connect(
    // { "X-Authorization": token.split(".").slice(0, 2).join(".") + ".alkdjalskdjals" },
    { "Authorization": `Bearer ${token}` },
    (frame) => {
      console.log("Connected", frame);

      const requestUrl = "/app/simple";
      let params = {
        tratata: 1,
        gratata: 0,
      };

      stomp.subscribe("/user/simple", (results) => {
        console.log(`msg from server: ${results.body}`);
      });

      stomp.send(requestUrl, JSON.stringify(params));
    },
    (error) => {
      console.error("Disconnected: ", error);
    },
  );
};

function App({ keycloak }) {
  const fetchFromApi = useCallback(
    async (url) => {
      const response = await fetch(url, {
        headers: {
          Authorization: `Bearer ${keycloak.token}`,
        },
      });
      if (response.ok) {
        alert(await response.text());
      } else {
        console.error(response.statusText);
      }
    },
    [keycloak.token],
  );

  useEffect(() => {
    connect(keycloak.token);
  }, [keycloak.token]);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <span
          className="App-link"
          onClick={(e) => {
            e.preventDefault();
            fetchFromApi("/api/userinfo");
          }}
        >
          Get user email
        </span>
        <br />
        <span
          className="App-link"
          onClick={(e) => {
            e.preventDefault();
            fetchFromApi("/api/users");
          }}
        >
          Get all users
        </span>
        <br />
        <span
          className="App-link"
          onClick={(e) => {
            e.preventDefault();
            keycloak.logout({
              redirectUri: "http://localhost:3000",
            });
          }}
        >
          Logout
        </span>
      </header>
    </div>
  );
}

export default App;