feat: add basic example
This commit is contained in:
40
examples/react-tanstack-router/src/routes/index.tsx
Normal file
40
examples/react-tanstack-router/src/routes/index.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { useObservableEagerState } from 'observable-hooks';
|
||||
import { useOidcClient } from 'oidc-client-rx/adapters/react';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
export const Route = createFileRoute('/')({
|
||||
component: HomeComponent,
|
||||
});
|
||||
|
||||
function HomeComponent() {
|
||||
const { oidcSecurityService } = useOidcClient();
|
||||
|
||||
const { isAuthenticated } = useObservableEagerState(
|
||||
oidcSecurityService.isAuthenticated$
|
||||
);
|
||||
|
||||
const handleLogin = useCallback(() => {
|
||||
oidcSecurityService.authorize().subscribe();
|
||||
}, [oidcSecurityService]);
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
oidcSecurityService.logoff().subscribe();
|
||||
}, [oidcSecurityService]);
|
||||
|
||||
return (
|
||||
<div className="p-2 text-center">
|
||||
<h1>Welcome OIDC-CLIENT-RX DEMO of react-tanstack-router</h1>
|
||||
<p>Is authenticated? {isAuthenticated ? 'True' : 'False'}</p>
|
||||
{isAuthenticated ? (
|
||||
<button onClick={handleLogout} type="button">
|
||||
Click to Logout
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={handleLogin} type="button">
|
||||
Click to Login
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user