• Stars
    star
    475
  • Rank 92,465 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Reference example for React.JS and Keycloak SSO integration.

Keycloak React.JS Demo

Demo and reference implementation for React.JS and Keycloak IAM & SSO integration.

With this approach, there's no need for 3rd party dependencies (besides the official default keycloak-js lib) and custom components base on auth state are implemented with ease and best developer experience.

YouTube videos

There are three videos on YouTube about this demo repository and how to integrate your React.js based application with Keycloak:

Part 1: Configuration & Usage, w/o 3rd party libs


https://youtu.be/q50LxyGtEf0

Part 2: Conditional rendering of components


https://youtu.be/zIoWxY3Xhnw

Part 3: React Router Integration, depending on Keycloak Roles


https://youtu.be/es8sf8D7UyQ

Please check out also my entire Youtube Channel with various videos on Keycloak and stuff around:

Prerequisites

  • based on React version >= 18 and Vite
  • uses React Router v6
  • Keycloak server should be a most recent one

!!! Important Notice !!!

This demo is just for showing one possibility on how to configure the app when using Keycloak and it requires a certain knowledge about Keycloak SSO (installation, operation, configuration), see http://www.keycloak.org.

Backend service

For convenience, I provide a working backend service, providing the data, running on AWS Lambda. It should work and be available out of the box.

However, there's also a swagger spec (backend-swagger-spec.yml) providing the API of the needed backend, so you can spin up a service on your own. The URLs in the securityDefinitions section shows my local Keycloak setup, you have to adjust this possibly! (Also don't forget to adjust the host/port in the setupProxy.js file, if you run your service on ohters than default.)

More Repositories

1

testcontainers-keycloak

A Testcontainer implementation for Keycloak IAM & SSO.
Java
343
star
2

keycloak-2fa-sms-authenticator

Keycloak Authentication Provider implementation to get a 2nd-factor authentication with a OTP/code/token send via SMS (through AWS SNS). Demo purposes only!
Java
337
star
3

keycloak-extensions-demo

Demos, examples and playground for Keycloak extensions, providers, SPI implementations, etc.
Java
306
star
4

keycloak-user-spi-demo

Simple in-memory User Storage Provider SPI implementation for Keycloak. Demo purposes only!
Java
68
star
5

keycloak-session-restrictor

Simple event-listener for Keycloak which restricts the current user sessions to one (last one wins) only. Demo purposes only!
Java
57
star
6

keycloak-springboot-demo

Demo for Spring Boot and Keycloak SSO integration.
HTML
46
star
7

keycloak-bookshop-demo

Demo for how to integrate Keycloak into Quarkus and React apps and services. All (most) kinds of authentication (web app, service account, client, bearer-only...)
Java
44
star
8

ozark-react

A ViewEngine for ReactJS templates for the Java EE MVC 1.0 reference implementation Ozark.
Java
44
star
9

meteor-chat

Simple chat application built on the Meteor JavaScript Platform.
JavaScript
26
star
10

soteria-demo-mvc

Custom MVC Demo for Java EE 8 Security API (JSR-375) RI Soteria
Java
23
star
11

keycloak-aws-ses-email-provider

Drop-in Email Provider SPI replacement for Keycloak to send emails via AWS Simple Email Service (SES). Demo purposes only
Java
22
star
12

quarkus-keycloak

Demos on how to secure a Quarkus service/app with proper Keycloak authentication & doing tests with Testcontainers-Keycloak project.
Java
19
star
13

keycloak-tokenmapper-example

Example Keycloak OIDC protocol token mapper - maps a random lucky number to tokens/info endpoint - demo purposes only!
Java
17
star
14

keycloak-spi-bom

Custom Keycloak SPI BOM for extension development, maintained by @dasniko
15
star
15

keycloak-javaee-demo

Demo for Java EE and Keycloak SSO integration.
Java
14
star
16

meteor-mqtt

Meteor MQTT client using mqtt package from NPM
JavaScript
14
star
17

keycloak-workshop

Ressourcen für @dasniko's Keycloak Workshop
FreeMarker
12
star
18

keycloak-docker-aws

CSS
10
star
19

wildfly-async-redis

Demo code for comparison of async Node.js and Wildfly services.
Java
10
star
20

react-redux-example

A small and simple example app, demonstrating how to use react and redux for building webapps.
JavaScript
10
star
21

testcontainers-mailhog

Simple Demo how to test SMTP in your project using Testcontainers and Mailhog.
Java
7
star
22

keycloak-workshop-light

Ressourcen für @dasniko's Keycloak Workshop für Einsteiger
FreeMarker
6
star
23

riding-the-nashorn

Shell
5
star
24

keycloak-dev-workshop

Ressourcen für @dasniko's Keycloak Extension Development Workshop
Java
4
star
25

gatling-playground

Scala
3
star
26

keycloak-authdemo

Java
3
star
27

soteria-demo-jaxrs

JAX-RS Demo for Java EE 8 Security API (JSR-375) RI Soteria
Java
3
star
28

js4j

Shell
3
star
29

ansible-role-java

2
star
30

quarkus-workshop-2

Java
2
star
31

peanuts-api

Java
2
star
32

avatar-twitterwall

Simple twitterwall built with Project Avatar on Nashorn with JavaScript only for a JavaEE environment.
JavaScript
2
star
33

tut3c-nodyn

JavaScript
2
star
34

ehcache-search-example

Some examples for using and performance of the Ehcache Search API.
Java
2
star
35

camel-oracleaq

EAI with Apache Camel and Oracle AQ
Java
2
star
36

lambda-bash-runtime

Shell
1
star
37

spring-graphql-demo

GraphQL demo project for Spring Boot
Java
1
star
38

nashorn-spock-jasmine

Examples for testing Nashorn JavaScript with Spock and/or Jasmine
Groovy
1
star
39

beer-as-a-service

Nodyn examples with using Vert.x eventbus
JavaScript
1
star
40

dasniko

1
star
41

camel

EAI with Apache Camel
Java
1
star
42

meteor-espruino

Demo Meteor application communicating with Espruino microcontroller, using node-espruino package from NPM.
JavaScript
1
star