-
Notifications
You must be signed in to change notification settings - Fork 141
/
App.tsx
88 lines (76 loc) · 2.67 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import "./App.css";
import reactSvgUrl from "./assets/react.svg";
import viteSvgUrl from "./assets/vite.svg";
import { OidcProvider, useOidc, getKeycloakAccountUrl } from "./oidc";
export default function App() {
return (
// To integrate Keycloak to your React App you have many options such as:
// - https://www.npmjs.com/package/keycloak-js
// - https://github.com/authts/oidc-client-ts
// - https://github.com/authts/react-oidc-context
// In this starter we use oidc-spa instead
// It's a new library made by us, the Keycloakify team.
// Check it out: https://github.com/keycloakify/oidc-spa
<OidcProvider>
<ContextualizedApp />
</OidcProvider>
);
}
function ContextualizedApp() {
const { isUserLoggedIn, login, logout, oidcTokens } = useOidc();
return (
<div className="App">
<div>
<div className="App-payload">
{isUserLoggedIn ?
(
<>
<h1>Hello {oidcTokens.decodedIdToken.name} !</h1>
<a
href={getKeycloakAccountUrl({ locale: "en" })}
>
Link to your Keycloak account
</a>
<button
onClick={() => logout({ redirectTo: "home" })}
>
Logout
</button>
<Jwt />
</>
)
:
(
<button
onClick={() => login({
doesCurrentHrefRequiresAuth: false,
//extraQueryParams: { kc_idp_hint: "google" }
})}
>
Login
</button>
)
}
</div>
<div className="App-logo-wrapper">
<img src={reactSvgUrl} className="App-logo rotate" alt="logo" />
<img src={viteSvgUrl} className="App-logo" alt="logo" />
</div>
</div>
</div>
);
}
function Jwt() {
const { oidcTokens } = useOidc({
assertUserLoggedIn: true
});
// NOTE: Use `Bearer ${oidcTokens.accessToken}` as the Authorization header to call your backend
// Here we just display the decoded id token
return (
<pre style={{ textAlign: "left" }}>
{JSON.stringify(oidcTokens.decodedIdToken, null, 2)}
</pre>
);
}