konnosDashboard
Authentication.tsx138 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useParams } from 'common'
3
4import CodeSnippet from './CodeSnippet'
5import { DocSection } from './DocSection'
6import Snippets from './Snippets'
7import { InlineLink } from '@/components/ui/InlineLink'
8import { getKeys, useAPIKeysQuery } from '@/data/api-keys/api-keys-query'
9import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
10import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
11
12interface AuthenticationProps {
13 selectedLang: 'bash' | 'js'
14 showApiKey: string
15}
16
17const Authentication = ({ selectedLang, showApiKey }: AuthenticationProps) => {
18 const { ref: projectRef } = useParams()
19 const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
20 const { data: apiKeys } = useAPIKeysQuery({ projectRef }, { enabled: canReadAPIKeys })
21 const { data: settings } = useProjectSettingsV2Query({ projectRef })
22
23 const { anonKey, serviceKey } = getKeys(apiKeys)
24 const protocol = settings?.app_config?.protocol ?? 'https'
25 const hostEndpoint = settings?.app_config?.endpoint
26 const endpoint = `${protocol}://${hostEndpoint ?? ''}`
27
28 // [Joshen] ShowApiKey should really be a boolean, its confusing
29 const defaultApiKey =
30 showApiKey !== 'BRIVEN_KEY'
31 ? (anonKey?.api_key ?? 'BRIVEN_CLIENT_API_KEY')
32 : 'BRIVEN_CLIENT_API_KEY'
33 const serviceApiKey =
34 showApiKey !== 'BRIVEN_KEY'
35 ? (serviceKey?.api_key ?? 'BRIVEN_SERVICE_KEY')
36 : 'BRIVEN_SERVICE_KEY'
37
38 return (
39 <div className="flex flex-col flex-1">
40 <DocSection
41 title="Authentication"
42 content={
43 <>
44 <p>Briven works through a mixture of JWT and Key auth.</p>
45 <p>
46 If no <code>Authorization</code> header is included, the API will assume that you are
47 making a request with an anonymous user.
48 </p>
49 <p>
50 If an <code>Authorization</code> header is included, the API will "switch" to the role
51 of the user making the request. See the User Management section for more details.
52 </p>
53 <p>We recommend setting your keys as Environment Variables.</p>
54 </>
55 }
56 />
57
58 <DocSection
59 title="Client API Keys"
60 content={
61 <>
62 <p>
63 Client keys allow "anonymous access" to your database, until the user has logged in.
64 After logging in the keys will switch to the user's own login token.
65 </p>
66 <p>
67 In this documentation, we will refer to the key using the name{' '}
68 <code>BRIVEN_KEY</code>.
69 </p>
70 <p>
71 We have provided you a Client Key to get started. You will soon be able to add as many
72 keys as you like. You can find the <code>anon</code> key in the{' '}
73 <InlineLink href={`/project/${projectRef}/settings/api-keys`}>
74 API Keys Settings
75 </InlineLink>{' '}
76 page.
77 </p>
78 </>
79 }
80 snippets={
81 <>
82 <CodeSnippet
83 selectedLang={selectedLang}
84 snippet={Snippets.authKey('CLIENT API KEY', 'BRIVEN_KEY', defaultApiKey)}
85 />
86 <CodeSnippet
87 selectedLang={selectedLang}
88 snippet={Snippets.authKeyExample(defaultApiKey, endpoint, {
89 showBearer: false,
90 })}
91 />
92 </>
93 }
94 />
95
96 <DocSection
97 title="Service Keys"
98 content={
99 <>
100 <p>
101 Service keys have FULL access to your data, bypassing any security policies. Be VERY
102 careful where you expose these keys. They should only be used on a server and never on
103 a client or browser.
104 </p>
105 <p>
106 In this documentation, we will refer to the key using the name{' '}
107 <code>SERVICE_KEY</code>.
108 </p>
109 <p>
110 We have provided you with a Service Key to get started. Soon you will be able to add
111 as many keys as you like. You can find the <code>service_role</code> in the{' '}
112 <InlineLink href={`/project/${projectRef}/settings/api-keys`}>
113 API Keys Settings
114 </InlineLink>{' '}
115 page.
116 </p>
117 </>
118 }
119 snippets={
120 <>
121 <CodeSnippet
122 selectedLang={selectedLang}
123 snippet={Snippets.authKey('SERVICE KEY', 'SERVICE_KEY', serviceApiKey)}
124 />
125 <CodeSnippet
126 selectedLang={selectedLang}
127 snippet={Snippets.authKeyExample(serviceApiKey, endpoint, {
128 keyName: 'SERVICE_KEY',
129 })}
130 />
131 </>
132 }
133 />
134 </div>
135 )
136}
137
138export default Authentication