realityforge / gwt-keycloak

gwt-keycloak

A simple library to provide keycloak support to GWT. The library wraps and adapts the keycloak adapter that is deployed on the keycloak server.

Quick Start

The simplest way to use the library is to add the following dependency into the build system. i.e.

<dependency>
   <groupId>org.realityforge.gwt.keycloak</groupId>
   <artifactId>gwt-keycloak</artifactId>
   <version>0.14</version>
   <scope>provided</scope>
</dependency>

Then you add the following snippet into the .gwt.xml file.

<module rename-to='myapp'>
  ...

  <!-- Enable the keycloak library -->
  <inherits name="org.realityforge.gwt.keycloak.Keycloak"/>
</module>

Then you can interact with the Keycloak object from within the browser.

First you need to setup a Keycloak instance. Assuming your keycloak server has an application client named "MyApp" and the configuration json is at http://127.0.0.1:8080/myapp/keycloak.json then you end up with code like:

final Keycloak keycloak = new Keycloak( "MyApp", "http://127.0.0.1:8080/myapp/keycloak.json" );

keycloak.setListener( new KeycloakListenerAdapter()
{
  @Override
  public void onReady( @Nonnull final Keycloak keycloak, final boolean authenticated )
  {
    if( authenticated )
    {
      //Already authenticated, start app here
    }
    else
    {
      keycloak.login();
    }
  }
} );

keycloak.init();

When the token is needed to interact with a keycloak protected resource you can simply use the following code to access the current token, updating it if it is stale and needs to be refreshed.

final int minTokenValiditySeconds = 30;
keycloak.updateToken( minTokenValiditySeconds, () -> remoteCallUsingToken( keycloak.getToken() ) );

This should be sufficient to put together a simple Keycloak application.

Quick Start using token caching

You can also use the library to cache tokens local in web storage apis (i.e. local storage or session storage if available). These tokens will be revalidated locally and updated (assuming you use the correct listener) when necessary. This results in a much better user experience as the network overhead is significantly reduced.

First you add dependency as above, then you add a snippet like the following into the .gwt.xml file.

<module rename-to='myapp'>
  ...

  <!-- Enable the keycloak library -->
  <inherits name="org.realityforge.gwt.keycloak.cache.TokenCache"/>
</module>

The code to interact with the backend looks something like:

final Keycloak keycloak = new Keycloak( "MyApp", "http://127.0.0.1:8080/myapp/keycloak.json" );
TokenCache.configure( keycloak );

keycloak.setListener( new TokenCachingListener()
{
  @Override
  public void onReady( @Nonnull final Keycloak keycloak, final boolean authenticated )
  {
    super.onReady( keycloak, authenticated );
    if( authenticated )
    {
      //Already authenticated, start app here
    }
    else
    {
      keycloak.login();
    }
  }
} );

keycloak.init();

Appendix

• Keycloak Javascript Adapter

gwt-keycloak's Issues

Usage example?

Hi, we have a legacy gwt project that we would like to integrate with a keycloak server. Could you provide an example usage of this adapter that we can learn from?

unable to find the config url to keycloak.json

Environment:

GWT: 2.8.2
Keycloak: 21.0.1 running on port 4000 in docker

Relevant code or config:

What you did:

First of all I am beginner so I apologize if the question is very basic

1. I run a simple GWT starter maven project.
2. I followed the instruction provided in https://github.com/realityforge/gwt-keycloak repository.
3. I added the dependency in pom file
4. I added this line <inherits name="org.realityforge.gwt.keycloak.Keycloak"/> in .gwt.xml file
5. Then I am trying to write these lines

	public void onModuleLoad() {
		final Keycloak keycloak = new Keycloak( "MyApp", "http://localhost:4000/realms/MyApp/account/#/" );
		keycloak.setListener( new KeycloakListenerAdapter()
		{
		  @Override
		  public void onReady( @Nonnull final Keycloak keycloak, final boolean authenticated )
		  {
		    if( authenticated )
		    {
		      //Already authenticated, start app here
		    }
		    else
		    {
		      keycloak.login();
		    }
		  }
		} );

		keycloak.init();

About this URL "http://localhost:4000/realms/MyApp/account/#/" and MyApp I am not sure.

An issue is available about this but I couldn't find http://127.0.0.1:8080/myapp/keycloak.json file.

Also as mentioned in the second issue. I am getting the same error on my console.

for that I added the below line as mentioned in the issue

    <script src="http://myauthserver.com/auth/js/keycloak.min.js"></script>
    <script type="text/javascript" language="javascript" src="projectone/projectone.nocache.js"></script>
  </head>

What happened:

Uncaught TypeError: $wnd.Keycloak is not a function
    at Cjf_g$ (Keycloak.java:398:1)
    at new kif_g$ (Keycloak.java:49:1)
    at pGd_g$.qGd_g$ [as onModuleLoad_0_g$] (ProjectOne.java:47:1)
    at Array.Rwc_g$ (edu_00046example_00046ProjectOne__EntryMethodHolder.java:3:1)
    at initializeModules_0_g$ (ModuleUtils.java:44:1)
    at sI_g$ (Impl.java:309:1)
    at vI_g$ (Impl.java:368:1)
    at Impl.java:78:1
    at iwc_g$ (ModuleUtils.java:55:1)
    at ResponseMode.java:3:1

Reproduction repository:

Problem description:

Suggested solution:

$wnd.Keycloak undefined when instantiating Keycloak

Environment: Windows 10, GWT 2,8.2

Relevant code or config:

Keycloak keycloak = new Keycloak("MyApp", "a working url");

What you did:

Started the application

What happened:
When staring the application, the following message appears in the browser console log:

Uncaught TypeError: $wnd.Keycloak is not a function
at i$n_g$ (Keycloak.java:393)
at new SYn_g$ (Keycloak.java:45)
at MLl_g$.NLl_g$ [as onModuleLoad_0_g$] (MyApp.java:28)
at Array.hef_g$

Reproduction repository:

Problem description:

Suggested solution: