konnosDashboard
UserManagement.tsx313 lines · main
1import { useParams } from 'common'
2
3import CodeSnippet from '../CodeSnippet'
4import { DocSection } from '../DocSection'
5import Snippets from '../Snippets'
6import { InlineLink } from '@/components/ui/InlineLink'
7import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
8import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
9import { DOCS_URL } from '@/lib/constants'
10import { makeRandomString } from '@/lib/helpers'
11
12const randomPassword = makeRandomString(20)
13
14interface UserManagementProps {
15 selectedLang: 'bash' | 'js'
16 showApiKey: string
17}
18
19export const UserManagement = ({ selectedLang, showApiKey }: UserManagementProps) => {
20 const { ref: projectRef } = useParams()
21 const keyToShow = showApiKey ? showApiKey : 'BRIVEN_KEY'
22
23 const { authenticationSignInProviders } = useIsFeatureEnabled([
24 'authentication:sign_in_providers',
25 ])
26
27 const { data: settings } = useProjectSettingsV2Query({ projectRef })
28 const protocol = settings?.app_config?.protocol ?? 'https'
29 const hostEndpoint = settings?.app_config?.endpoint ?? ''
30 const endpoint = `${protocol}://${hostEndpoint ?? ''}`
31
32 return (
33 <div className="flex flex-col flex-1">
34 <DocSection
35 title="User Management"
36 content={
37 <>
38 <p>Briven makes it easy to manage your users.</p>
39 <p>
40 Briven assigns each user a unique ID. You can reference this ID anywhere in your
41 database. For example, you might create a <code>profiles</code> table that references
42 the user using a <code>user_id</code> field.
43 </p>
44 <p>
45 Briven already has built in the routes to sign up, login, and log out for managing
46 users in your apps and websites.
47 </p>
48 </>
49 }
50 />
51
52 <DocSection
53 title="Sign up"
54 content={
55 <>
56 <p>Allow your users to sign up and create a new account.</p>
57 <p>
58 After they have signed up, all interactions using the Briven JS client will be
59 performed as "that user".
60 </p>
61 </>
62 }
63 snippets={
64 <CodeSnippet
65 selectedLang={selectedLang}
66 snippet={Snippets.authSignup(endpoint, keyToShow, randomPassword)}
67 />
68 }
69 />
70
71 <DocSection
72 title="Log in with Email/Password"
73 content={
74 <>
75 <p>If an account is created, users can login to your app.</p>
76 <p>
77 After they have logged in, all interactions using the Briven JS client will be
78 performed as "that user".
79 </p>
80 </>
81 }
82 snippets={
83 <CodeSnippet
84 selectedLang={selectedLang}
85 snippet={Snippets.authLogin(endpoint, keyToShow, randomPassword)}
86 />
87 }
88 />
89
90 <DocSection
91 title="Log in with Magic Link via Email"
92 content={
93 <>
94 <p>Send a user a passwordless link which they can use to redeem an access_token.</p>
95 <p>
96 After they have clicked the link, all interactions using the Briven JS client will
97 be performed as "that user".
98 </p>
99 </>
100 }
101 snippets={
102 <CodeSnippet
103 selectedLang={selectedLang}
104 snippet={Snippets.authMagicLink(endpoint, keyToShow)}
105 />
106 }
107 />
108
109 <DocSection
110 title="Sign Up with Phone/Password"
111 content={
112 <>
113 <p>
114 A phone number can be used instead of an email as a primary account confirmation
115 mechanism.
116 </p>
117 <p>
118 The user will receive a mobile OTP via sms with which they can verify that they
119 control the phone number.
120 </p>
121 <p>
122 You must enter your own twilio credentials on the auth settings page to enable sms
123 confirmations.
124 </p>
125 </>
126 }
127 snippets={
128 <CodeSnippet
129 selectedLang={selectedLang}
130 snippet={Snippets.authPhoneSignUp(endpoint, keyToShow)}
131 />
132 }
133 />
134
135 <DocSection
136 title="Login via SMS OTP"
137 content={
138 <>
139 <p>
140 SMS OTPs work like magic links, except you have to provide an interface for the user
141 to verify the 6 digit number they receive.
142 </p>
143 <p>
144 You must enter your own twilio credentials on the auth settings page to enable
145 SMS-based Logins.
146 </p>
147 </>
148 }
149 snippets={
150 <CodeSnippet
151 selectedLang={selectedLang}
152 snippet={Snippets.authMobileOTPLogin(endpoint, keyToShow)}
153 />
154 }
155 />
156
157 <DocSection
158 title="Verify an SMS OTP"
159 content={
160 <>
161 <p>
162 Once the user has received the OTP, have them enter it in a form and send it for
163 verification
164 </p>
165 <p>
166 You must enter your own twilio credentials on the auth settings page to enable
167 SMS-based OTP verification.
168 </p>
169 </>
170 }
171 snippets={
172 <CodeSnippet
173 selectedLang={selectedLang}
174 snippet={Snippets.authMobileOTPVerify(endpoint, keyToShow)}
175 />
176 }
177 />
178
179 {authenticationSignInProviders && (
180 <DocSection
181 title="Log in with Third Party OAuth"
182 content={
183 <>
184 <p>
185 Users can log in with Third Party OAuth like Google, Facebook, GitHub, and more. You
186 must first enable each of these in the Auth Providers settings{' '}
187 <span className="text-green-500">
188 <InlineLink key={'AUTH'} href={`/project/${projectRef}/auth/providers`}>
189 here
190 </InlineLink>
191 </span>{' '}
192 .
193 </p>
194 <p>
195 View all the available{' '}
196 <InlineLink href={`${DOCS_URL}/guides/auth#providers`}>
197 Third Party OAuth providers
198 </InlineLink>
199 </p>
200 <p>
201 After they have logged in, all interactions using the Briven JS client will be
202 performed as "that user".
203 </p>
204 <p>
205 Generate your Client ID and secret from:{` `}
206 <InlineLink href="https://console.developers.google.com/apis/credentials">
207 Google
208 </InlineLink>
209 ,{` `}
210 <InlineLink href="https://github.com/settings/applications/new">GitHub</InlineLink>,
211 {` `}
212 <InlineLink href="https://gitlab.com/oauth/applications">GitLab</InlineLink>,{` `}
213 <InlineLink href="https://developers.facebook.com/apps/">Facebook</InlineLink>,{` `}
214 <InlineLink href="https://support.atlassian.com/bitbucket-cloud/docs/use-oauth-on-bitbucket-cloud/">
215 Bitbucket
216 </InlineLink>
217 .
218 </p>
219 </>
220 }
221 snippets={
222 <CodeSnippet
223 selectedLang={selectedLang}
224 snippet={Snippets.authThirdPartyLogin(endpoint, keyToShow)}
225 />
226 }
227 />
228 )}
229
230 <DocSection
231 title="User"
232 content={<p>Get the JSON object for the logged in user.</p>}
233 snippets={
234 <CodeSnippet
235 selectedLang={selectedLang}
236 snippet={Snippets.authUser(endpoint, keyToShow)}
237 />
238 }
239 />
240
241 <DocSection
242 title="Forgotten Password Email"
243 content={
244 <p>
245 Sends the user a log in link via email. Once logged in you should direct the user to a
246 new password form. And use "Update User" below to save the new password.
247 </p>
248 }
249 snippets={
250 <CodeSnippet
251 selectedLang={selectedLang}
252 snippet={Snippets.authRecover(endpoint, keyToShow)}
253 />
254 }
255 />
256
257 <DocSection
258 title="Update User"
259 content={
260 <p>
261 Update the user with a new email or password. Each key (email, password, and data) is
262 optional
263 </p>
264 }
265 snippets={
266 <CodeSnippet
267 selectedLang={selectedLang}
268 snippet={Snippets.authUpdate(endpoint, keyToShow)}
269 />
270 }
271 />
272
273 <DocSection
274 title="Log out"
275 content={
276 <p>
277 After calling log out, all interactions using the Briven JS client will be
278 "anonymous".
279 </p>
280 }
281 snippets={
282 <CodeSnippet
283 selectedLang={selectedLang}
284 snippet={Snippets.authLogout(endpoint, keyToShow)}
285 />
286 }
287 />
288
289 <DocSection
290 title="Send a User an Invite over Email"
291 content={
292 <>
293 <p>Send a user a passwordless link which they can use to sign up and log in.</p>
294 <p>
295 After they have clicked the link, all interactions using the Briven JS client will
296 be performed as "that user".
297 </p>
298 <p>
299 This endpoint requires you use the <code>service_role_key</code> when initializing the
300 client, and should only be invoked from the server, never from the client.
301 </p>
302 </>
303 }
304 snippets={
305 <CodeSnippet
306 selectedLang={selectedLang}
307 snippet={Snippets.authInvite(endpoint, keyToShow)}
308 />
309 }
310 />
311 </div>
312 )
313}