kmikulski

"dependencies": {
  ...
  "react-router-dom": "^4.2.2",
  "keycloak-js": "4.0.0-beta.2"
}

kmikulski

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Welcome from './Welcome';
import Secured from './Secured';
import './App.css';

class App extends Component {

  render() {
    return (

kmikulski

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return (
      <div className="Welcome">
        <p>This is your public-facing component.</p>
      </div>
    );
  }

kmikulski

import React, { Component } from 'react';
import Keycloak from 'keycloak-js';

class Secured extends Component {

  constructor(props) {
    super(props);
    this.state = { keycloak: null, authenticated: false };
  }

kmikulski

const keycloak = Keycloak('/keycloak.json');

kmikulski

const keycloak = Keycloak({
  realm: "MyDemo",
  auth-server-url: "http://localhost:8080/auth",
  ssl-required: "external",
  resource: "my-react-client",
  public-client: true,
  confidential-port: 0
});

kmikulski

keycloak.init({onLoad: 'login-required'}).then(authenticated => {
  this.setState({ keycloak: keycloak, authenticated: authenticated })
})

kmikulski

import React, { Component } from 'react';

class UserInfo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      id: ""

kmikulski

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'

class Logout extends Component {

  logout() {
    this.props.history.push('/');
    this.props.keycloak.logout();
  }

kmikulski

import React, { Component } from 'react';
import Keycloak from 'keycloak-js';
import UserInfo from './UserInfo';
import Logout from './Logout';

class Secured extends Component {

  constructor(props) {
    super(props);
    this.state = { keycloak: null, authenticated: false };