Skip to content

Instantly share code, notes, and snippets.



Created Jun 7, 2018
What would you like to do?
the description for this gist
import React, { Component } from 'react';
import Keycloak from 'keycloak-js';
import UserInfo from './UserInfo';
import Logout from './Logout';
class Secured extends Component {
constructor(props) {
this.state = { keycloak: null, authenticated: false };
componentDidMount() {
const keycloak = Keycloak('/keycloak.json');
keycloak.init({onLoad: 'login-required'}).then(authenticated => {
this.setState({ keycloak: keycloak, authenticated: authenticated })
render() {
if(this.state.keycloak) {
if(this.state.authenticated) return (
<p>This is a Keycloak-secured component of your application. You shouldn't be able
to see this unless you've authenticated with Keycloak.</p>
<UserInfo keycloak={this.state.keycloak} />
<Logout keycloak={this.state.keycloak} />
); else return (<div>Unable to authenticate!</div>)
return (
<div>Initializing Keycloak...</div>
export default Secured;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment