react-keycloak | React/React Native/NextJS/Razzle components for Keycloak | Frontend Framework library

I'd like to do the authentication for my nextjs frontend via a keycloak server. I've found this great example about how to do it. Unfortunately the example is written in typescript and I am trying to adjust it so that I can use it in my application written in javascript. Since I don't know much about TS I couldn't figure out how to transform the following two TS statements, so that they run in JS:

I am using Gatsby to build static site and keycloak for auth. I am using these libs: keycloak-js and @react-keycloak/web During development (gatsby develop) everything runs fine, auth works and all that...

But when i run gatsby build, it fails specifically with this error:

WebpackError: authClient has not been assigned to ReactKeycloakProvider

This is the react keycloak lib that i am using @react-keycloak/web and error comes from useKeycloak.ts file.

I'm attempting to integrate this package into an app using this example. I'm not too familiar with typescript and I see that it uses interface in one of the utils (which javascript does not have). I've read Does JavaScript have the interface type (such as Java's 'interface')?, but I'm not sure this is the same as the one typescript uses.

Here's the TS code I am trying to convert:

So I've just created a new React project where I use the official keycloak-js adapter with the react-keycloak/web dependency for react bindings. I have followed all the "official" ways of doing things and I have this:

keycloak.js (config):

i'm trying to authenticate in keycloak in nextjs using @react-keycloak/nextjs but once i pass the login it keep sending me back to keycloak server and returning to the main page until it gives me an error because my token key is expired. This is my _app.js:

The axios instance is not yet ready upon render as I get the error "Cannot read property 'get' of undefined", BUT the branches are loaded, so apparently next attempt succeeds.

The axios instance in hooks.js:

In my React app, I am using keycloak and the KeycloakProvider from the "react-keycloak/web" library.

Certain routes are protected using a PrivateRoute component that pulls the keycloak state using the useKeycloak() hook and checking the user is authorised and has the correct roles:

I'm using simple React application with Keycloak for authentication mechanism (login/logout page + OpenID authorization). I have deployed Keycloak instance to Amazon EC2, and can access admin console. Everything is configured correctly in admin console. I created separate Client with access type Public.

For front end, I'm using this library (https://www.npmjs.com/package/@react-keycloak/web). Everything is according to documentation and example (https://github.com/react-keycloak/react-keycloak-examples/tree/master/examples/react-router).

But when my Keycloak instance is initializing, I don't see any redirections to keycloak's login page. And also, I see in network tab, that step1.html returned 404 Not Found. Request url is correct.

Maybe anyone faced with this issue?

I'm having issues trying to integrate Keycloak with a Gatsby static website. The purpose of the integration is letting logged users interact with components in the website (features such as: Like, Share, etc.), while the website is completely public.

The Keycloak instance is on a remote server, with the realm set-up and the client added with this configuration.

I'm using this repo as reference, but I guess there are some differences because of the modules version. I'm using: