konnosDashboard
OAuthEndpointsTable.tsx90 lines · main
1import { useParams } from 'common'
2import { Card, CardContent, cn } from 'ui'
3import {
4 PageSection,
5 PageSectionContent,
6 PageSectionDescription,
7 PageSectionMeta,
8 PageSectionSummary,
9 PageSectionTitle,
10} from 'ui-patterns'
11import { Input } from 'ui-patterns/DataInputs/Input'
12import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
13import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
14
15import { useOpenIDConfigurationQuery } from '@/data/oauth-server-apps/oauth-openid-configuration-query'
16
17interface OAuthEndpointsTableProps {
18 isLoading?: boolean
19 className?: string
20}
21
22export const OAuthEndpointsTable = ({
23 isLoading: isLoadingProp = false,
24 className,
25}: OAuthEndpointsTableProps) => {
26 const { ref: projectRef } = useParams()
27
28 const { data: openidConfig, isLoading: isEndpointsLoading } = useOpenIDConfigurationQuery(
29 { projectRef },
30 { enabled: !isLoadingProp }
31 )
32
33 const isLoading = isLoadingProp || isEndpointsLoading
34
35 const endpoints = [
36 {
37 name: 'Authorization endpoint',
38 value: openidConfig?.authorization_endpoint,
39 },
40 {
41 name: 'Token endpoint',
42 value: openidConfig?.token_endpoint,
43 },
44 {
45 name: 'JWKS endpoint',
46 value: openidConfig?.jwks_uri,
47 },
48 {
49 name: 'OIDC discovery',
50 value: openidConfig?.issuer
51 ? `${openidConfig.issuer}/.well-known/openid-configuration`
52 : undefined,
53 },
54 ]
55
56 return (
57 <PageSection className={cn(className)}>
58 <PageSectionMeta>
59 <PageSectionSummary>
60 <PageSectionTitle>OAuth Endpoints</PageSectionTitle>
61 <PageSectionDescription>
62 Share these endpoints with third-party applications that need to integrate with your
63 OAuth 2.1 server.
64 </PageSectionDescription>
65 </PageSectionSummary>
66 </PageSectionMeta>
67 <PageSectionContent>
68 <Card>
69 <CardContent className="flex flex-col gap-4 pt-0 divide-y">
70 {isLoading ? (
71 <GenericSkeletonLoader className="mt-4" />
72 ) : (
73 endpoints.map((endpoint) => (
74 <FormItemLayout
75 key={endpoint.name}
76 layout="horizontal"
77 isReactForm={false}
78 label={endpoint.name}
79 className="mt-4"
80 >
81 <Input readOnly copy value={endpoint.value ?? ''} />
82 </FormItemLayout>
83 ))
84 )}
85 </CardContent>
86 </Card>
87 </PageSectionContent>
88 </PageSection>
89 )
90}