Skip to content

Instantly share code, notes, and snippets.

@aditodkar
Created Nov 18, 2021
Embed
What would you like to do?
import { BrowserRouter, Route, Link, Routes } from "react-router-dom";
import Welcome from "./Welcome";
import Secured from "./Secured";
import RenderAnonymous from "./RenderAnonymous";
import RenderOnAuthenticated from "./RenderOnAuthenticated";
import UserService from "./UserService";
import "./App.css";
function App() {
return (
<BrowserRouter>
<div className="container">
<div>Welcome to keycloak project</div>
<RenderAnonymous>
<Welcome />
Please login
<button onClick={UserService.doLogin}>Login button</button>
</RenderAnonymous>
<RenderOnAuthenticated>
Please logout
<button onClick={UserService.doLogout}>Logout button</button>
</RenderOnAuthenticated>
</div>
</BrowserRouter>
);
}
export default App;
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import HttpService from "./HttpService";
import UserService from "./UserService";
import {
KcApp,
defaultKcProps,
getKcContext,
kcMessages,
useKcLanguageTag,
} from "keycloakify";
import KeycloakApp from "./keycloakApp";
const { kcContext } = getKcContext({
pageId: "login.ftl",
});
console.log("kcContext", kcContext); ----> undefined
const renderApp = () =>
ReactDOM.render(
// <KcApp kcContext={kcContext} {...{ ...defaultKcProps }} />,
kcContext !== undefined ? (
<KeycloakApp
kcContext={kcContext}
{...{
...defaultKcProps,
}}
/>
) : (
<App />
),
document.getElementById("root")
);
UserService.initKeycloak(renderApp);
HttpService.configure();
import { useEffect, memo } from "react";
import {
KcApp,
defaultKcProps,
getKcContext,
kcMessages,
useKcLanguageTag,
} from "keycloakify";
import Login from "./login";
import App from "./App";
export const KeycloakApp = memo((kcContext) => {
console.log("KeycloakApp kcContext", kcContext);
switch (kcContext.pageId) {
case "login.ftl":
return <Login kcContext={kcContext} />;
// case "register.ftl": return <Register {...{ kcContext, ...props }} />;
// case "info.ftl": return <Info {...{ kcContext, ...props }} />;
// case "error.ftl": return <Error {...{ kcContext, ...props }} />;
// case "login-reset-password.ftl": return <LoginResetPassword {...{ kcContext, ...props }} />;
// case "login-verify-email.ftl": return <LoginVerifyEmail {...{ kcContext, ...props }} />;
// case "terms.ftl": return <Terms {...{ kcContext, ...props }} />;
// case "login-otp.ftl": return <LoginOtp {...{ kcContext, ...props }} />;
// case "login-update-profile.ftl": return <LoginUpdateProfile {...{ kcContext, ...props }} />;
// case "login-idp-link-confirm.ftl": return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
// case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...props }} />;
// case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...props }} />;
default:
return <App />;
}
});
export default KeycloakApp;
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.6.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"keycloak-js": "^15.0.2",
"keycloakify": "^4.2.10",
"powerhooks": "^0.10.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"tss-react": "^1.1.0",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment