Last active
July 15, 2024 09:22
-
-
Save splatch/86fe8a7a81081f4bc418970367ced8bd to your computer and use it in GitHub Desktop.
Example of use oidc-client-ts and react-oidc-context.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {useAuth} from "react-oidc-context"; | |
export default function LoginPage() { | |
const auth = useAuth(); | |
return <> | |
<div style={{display: "flex", alignItems: 'center', justifyContent: 'center'}}> | |
<div style={{width: "25rem", display: "block", margin: "2rem"}}> | |
<h1>Web Energy Monitor</h1> | |
<p>Please log in in order to use application.</p> | |
{!auth.isAuthenticated && <Button onClick={e => void auth.signinRedirect({})}>Login</Button> } | |
</div> | |
</div> | |
</> | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {AuthProvider} from "react-oidc-context"; | |
import {UserManager, WebStorageStateStore} from 'oidc-client-ts'; | |
import {QueryClient, QueryClientProvider} from "@tanstack/react-query"; | |
import {ReactQueryDevtools} from "@tanstack/react-query-devtools"; | |
import {BrowserRouter} from "react-router-dom"; | |
const basePath = window.location.pathname; | |
const redirectUri = new URL(window.location.href); | |
const manager = new UserManager({ | |
authority: window.location.protocol + '//' + window.location.host +'/realms/master', | |
redirect_uri: new URL('/callback', redirectUri).toString(), // handled automatically by library | |
client_id: 'ui', | |
scope: 'openid profile', | |
userStore: store, | |
stateStore: store, | |
checkSessionIntervalInSeconds: 30, | |
accessTokenExpiringNotificationTimeInSeconds: 10 | |
}) | |
// debug hooks | |
const onSignIn = (user) => { | |
console.log(`Signed in ${user}`) | |
}; | |
const onSignOut = (user) => { | |
console.log(`Sign out ${user}`) | |
} | |
ReactDOM.createRoot(document.getElementById('root')).render( | |
<React.StrictMode> | |
<BrowserRouter basename={basePath}> | |
<AuthProvider onSigninCallback={onSignIn} onSignoutCallback={onSignOut} userManager={manager}> | |
<QueryClientProvider client={tanStackClient}> | |
<UiShell> | |
<App /> | |
</UiShell> | |
{import.meta.env.DEV && (<ReactQueryDevtools initialIsOpen={false} />)} | |
</QueryClientProvider> | |
</AuthProvider> | |
</BrowserRouter> | |
</React.StrictMode>, | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {useQuery} from "@tanstack/react-query"; | |
import {useState} from "react"; | |
import {useAuth} from "react-oidc-context"; | |
export function MessageLog() { | |
let auth = useAuth(); | |
let oidc = {}; | |
const { isPending: pending, error, data } = useQuery({ | |
queryKey: ['audit'], | |
queryFn: () => { | |
let options = { | |
headers: { | |
"Accept": "application/json", | |
// inject access token here from auth, if available | |
}, | |
}; | |
return xhr().request('./api', options) | |
.then((res) => res.json(), (error) => console.log(`Error ${error}`)); | |
}, | |
}) | |
return ( | |
<Tile> | |
Keys: {JSON.stringify(Object.keys(auth))}!<br /> | |
isAuthenticated: {JSON.stringify(auth?.isAuthenticated)}<br /> | |
user: {JSON.stringify(auth?.settings)}<br /> | |
</Tile> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment