Merge pull request #12076 from supabase/feat/create-users

feat: create users in dashboard

studio/components/interfaces/Auth/Users/AddUserDropdown.tsx

@@ -0,0 +1,108 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { checkPermissions } from 'hooks'
+import { IS_PLATFORM } from 'lib/constants'
+import { useState } from 'react'
+import semver from 'semver'
+import { Button, Dropdown, IconMail, IconPlus, IconUserPlus } from 'ui'
+import CreateUserModal from './CreateUserModal'
+import InviteUserModal from './InviteUserModal'
+
+export type AddUserDropdownProps = {
+  projectKpsVersion?: string
+}
+
+const AddUserDropdown = ({ projectKpsVersion }: AddUserDropdownProps) => {
+  const inviteEnabled = IS_PLATFORM
+    ? semver.gte(
+        // @ts-ignore
+        semver.coerce(projectKpsVersion ?? 'kps-v2.5.4'),
+        semver.coerce('kps-v2.5.3')
+      )
+    : true
+
+  const canInviteUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'invite_user')
+  const canCreateUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'create_user')
+
+  const [inviteVisible, setInviteVisible] = useState(false)
+  const [createVisible, setCreateVisible] = useState(false)
+
+  return (
+    <>
+      <Dropdown
+        side="bottom"
+        align="end"
+        size="small"
+        overlay={
+          <>
+            {inviteEnabled && (
+              <Tooltip.Root delayDuration={0}>
+                <Tooltip.Trigger className="w-full">
+                  <Dropdown.Item
+                    icon={<IconMail size="small" />}
+                    disabled={!canInviteUsers}
+                    onClick={() => setInviteVisible(true)}
+                  >
+                    Send Invitation
+                  </Dropdown.Item>
+                </Tooltip.Trigger>
+                {!canInviteUsers && (
+                  <Tooltip.Content side="bottom">
+                    <Tooltip.Arrow className="radix-tooltip-arrow" />
+                    <div
+                      className={[
+                        'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                        'border border-scale-200',
+                      ].join(' ')}
+                    >
+                      <span className="text-xs text-scale-1200">
+                        You need additional permissions to invite users
+                      </span>
+                    </div>
+                  </Tooltip.Content>
+                )}
+              </Tooltip.Root>
+            )}
+
+            <Tooltip.Root delayDuration={0}>
+              <Tooltip.Trigger className="w-full">
+                <Dropdown.Item
+                  icon={<IconUserPlus size="small" />}
+                  disabled={!canCreateUsers}
+                  onClick={() => setCreateVisible(true)}
+                >
+                  Create New User
+                </Dropdown.Item>
+              </Tooltip.Trigger>
+
+              {!canCreateUsers && (
+                <Tooltip.Content side="bottom">
+                  <Tooltip.Arrow className="radix-tooltip-arrow" />
+                  <div
+                    className={[
+                      'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                      'border border-scale-200',
+                    ].join(' ')}
+                  >
+                    <span className="text-xs text-scale-1200">
+                      You need additional permissions to create users
+                    </span>
+                  </div>
+                </Tooltip.Content>
+              )}
+            </Tooltip.Root>
+          </>
+        }
+      >
+        <Button type="primary" icon={<IconPlus strokeWidth={1.5} />}>
+          Add User
+        </Button>
+      </Dropdown>
+
+      {inviteEnabled && <InviteUserModal visible={inviteVisible} setVisible={setInviteVisible} />}
+      <CreateUserModal visible={createVisible} setVisible={setCreateVisible} />
+    </>
+  )
+}
+
+export default AddUserDropdown

studio/components/interfaces/Auth/Users/CreateUserModal.tsx

@@ -0,0 +1,164 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useContext } from 'react'
+import { Button, Checkbox, Form, IconLock, IconMail, Input, Loading, Modal } from 'ui'
+
+import { useUserCreateMutation } from 'data/auth/user-create-mutation'
+import { useProjectApiQuery } from 'data/config/project-api-query'
+import { checkPermissions, useStore } from 'hooks'
+import { PageContext } from 'pages/project/[ref]/auth/users'
+
+export type CreateUserModalProps = {
+  visible: boolean
+  setVisible: (visible: boolean) => void
+}
+
+const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
+  const { ui } = useStore()
+  const PageState: any = useContext(PageContext)
+  const projectRef = PageState.projectRef
+
+  const { data, isLoading, isSuccess } = useProjectApiQuery({ projectRef }, { enabled: visible })
+
+  const handleToggle = () => setVisible(!visible)
+  const canCreateUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'create_user')
+
+  const validate = (values: any) => {
+    const errors: any = {}
+    const emailValidateRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+
+    if (values.email.length === 0) {
+      errors.email = 'Please enter a valid email'
+    } else if (!emailValidateRegex.test(values.email)) {
+      errors.email = `${values.email} is an invalid email`
+    }
+
+    if (!values.password?.trim()) {
+      errors.password = 'Please enter a password'
+    }
+
+    return errors
+  }
+
+  const { mutateAsync: createUser } = useUserCreateMutation({
+    async onSuccess() {
+      await PageState.fetchData(1)
+    },
+  })
+
+  const onCreateUser = async (values: any, { setSubmitting }: any) => {
+    if (!isSuccess) {
+      ui.setNotification({
+        category: 'error',
+        message: `Failed to create user: Error loading project config`,
+      })
+
+      return
+    }
+
+    const { protocol, endpoint, serviceApiKey } = data.autoApiService
+
+    setSubmitting(true)
+
+    try {
+      await createUser({
+        endpoint,
+        protocol,
+        serviceApiKey,
+        user: values,
+      })
+
+      ui.setNotification({
+        category: 'success',
+        message: `Created user: ${values.email}`,
+      })
+
+      setVisible(false)
+    } catch (error: any) {
+      ui.setNotification({
+        category: 'error',
+        message: `Failed to create user: ${error.message}`,
+      })
+    }
+
+    setSubmitting(false)
+  }
+
+  return (
+    <Modal
+      closable
+      hideFooter
+      size="small"
+      key="create-user-modal"
+      visible={visible}
+      header="Create a new user"
+      onCancel={handleToggle}
+      loading={true}
+    >
+      <Form
+        validateOnBlur={false}
+        initialValues={{ email: '', password: '', autoConfirmUser: true }}
+        validate={validate}
+        onSubmit={onCreateUser}
+      >
+        {({ isSubmitting }: { isSubmitting: boolean }) => (
+          <Loading active={isLoading}>
+            <div className="space-y-6 py-4">
+              <Modal.Content>
+                <div className="space-y-4">
+                  <Input
+                    id="email"
+                    autoComplete="off"
+                    label="User Email"
+                    icon={<IconMail />}
+                    type="email"
+                    name="email"
+                    placeholder="user@example.com"
+                    disabled={isSubmitting || isLoading}
+                  />
+
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    label="User Password"
+                    placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
+                    icon={<IconLock />}
+                    disabled={isSubmitting || isLoading}
+                    autoComplete="new-password"
+                  />
+
+                  <Checkbox
+                    value="true"
+                    id="autoConfirmUser"
+                    name="autoConfirmUser"
+                    label="Auto Confirm User?"
+                    size="medium"
+                    description="Creates the user without sending them a confirmation email"
+                    defaultChecked={true}
+                    disabled={isSubmitting || isLoading}
+                  />
+                </div>
+              </Modal.Content>
+
+              <Modal.Content>
+                <Button
+                  block
+                  size="small"
+                  htmlType="submit"
+                  loading={isSubmitting}
+                  disabled={!canCreateUsers || isSubmitting || isLoading}
+                >
+                  Create user
+                </Button>
+              </Modal.Content>
+            </div>
+          </Loading>
+        )}
+      </Form>
+    </Modal>
+  )
+}
+
+export default observer(CreateUserModal)

studio/components/interfaces/Auth/Users/InviteUserModal.tsx

@@ -1,18 +1,21 @@
-import { useContext, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Modal, Input, IconPlus, IconMail, Form } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useContext } from 'react'
+import { Button, Form, IconMail, Input, Modal } from 'ui'
 
-import { useStore, checkPermissions } from 'hooks'
+import { checkPermissions, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { PageContext } from 'pages/project/[ref]/auth/users'
 
-const InviteUserModal = () => {
+export type InviteUserModalProps = {
+  visible: boolean
+  setVisible: (visible: boolean) => void
+}
+
+const InviteUserModal = ({ visible, setVisible }: InviteUserModalProps) => {
   const { ui } = useStore()
   const PageState: any = useContext(PageContext)
-  const [visible, setVisible] = useState(false)
 
   const handleToggle = () => setVisible(!visible)
   const canInviteUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'invite_user')
@@ -31,7 +34,7 @@ const InviteUserModal = () => {
     return errors
   }
 
-  const onInviteuser = async (values: any, { setSubmitting }: any) => {
+  const onInviteUser = async (values: any, { setSubmitting }: any) => {
     setSubmitting(true)
 
     const response = await post(`${API_URL}/auth/${PageState.projectRef}/invite`, {
@@ -56,28 +59,6 @@ const InviteUserModal = () => {
 
   return (
     <div>
-      <Tooltip.Root delayDuration={0}>
-        <Tooltip.Trigger>
-          <Button as="span" onClick={handleToggle} icon={<IconPlus />} disabled={!canInviteUsers}>
-            Invite
-          </Button>
-        </Tooltip.Trigger>
-        {!canInviteUsers && (
-          <Tooltip.Content side="bottom">
-            <Tooltip.Arrow className="radix-tooltip-arrow" />
-            <div
-              className={[
-                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
-                'border border-scale-200',
-              ].join(' ')}
-            >
-              <span className="text-xs text-scale-1200">
-                You need additional permissions to invite users
-              </span>
-            </div>
-          </Tooltip.Content>
-        )}
-      </Tooltip.Root>
       <Modal
         closable
         hideFooter
@@ -88,16 +69,15 @@ const InviteUserModal = () => {
         onCancel={handleToggle}
       >
         <Form
-          validateOnBlur
+          validateOnBlur={false}
           initialValues={{ email: '' }}
           validate={validate}
-          onSubmit={onInviteuser}
+          onSubmit={onInviteUser}
         >
           {({ isSubmitting }: { isSubmitting: boolean }) => (
             <div className="space-y-6 py-4">
               <Modal.Content>
                 <Input
-                  autoFocus
                   id="email"
                   className="w-full"
                   label="User email"
@@ -107,6 +87,7 @@ const InviteUserModal = () => {
                   placeholder="User email"
                 />
               </Modal.Content>
+
               <Modal.Content>
                 <Button
                   block

studio/components/interfaces/Auth/Users/Users.tsx

@@ -1,22 +1,13 @@
-import semver from 'semver'
-import { useEffect, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, Input, IconSearch, IconX, IconRefreshCw, Listbox, IconUsers } from 'ui'
+import { useContext, useEffect } from 'react'
+import { Button, IconRefreshCw, IconSearch, IconX, Input, Listbox } from 'ui'
 
-import { IS_PLATFORM } from 'lib/constants'
 import { PageContext } from 'pages/project/[ref]/auth/users'
+import AddUserDropdown from './AddUserDropdown'
 import UsersList from './UsersList'
-import InviteUserModal from './InviteUserModal'
 
 const Users = () => {
   const PageState: any = useContext(PageContext)
-  const inviteEnabled = IS_PLATFORM
-    ? semver.gte(
-        // @ts-ignore
-        semver.coerce(PageState?.projectKpsVersion ?? 'kps-v2.5.4'),
-        semver.coerce('kps-v2.5.3')
-      )
-    : true
 
   useEffect(() => {
     PageState.fetchData(1)
@@ -94,9 +85,8 @@ const Users = () => {
             </Listbox.Option>
           </Listbox>
         </div>
-        <div className="mt-4 flex items-center md:mt-0">
+        <div className="mt-4 flex items-center gap-2 md:mt-0">
           <Button
-            className="mr-2"
             size="tiny"
             icon={<IconRefreshCw />}
             type="default"
@@ -105,7 +95,8 @@ const Users = () => {
           >
             Reload
           </Button>
-          {inviteEnabled && <InviteUserModal />}
+
+          <AddUserDropdown projectKpsVersion={PageState?.projectKpsVersion} />
         </div>
       </div>
       <section className="users-table-container mt-4 overflow-visible px-6">

studio/data/auth/user-create-mutation.ts

@@ -0,0 +1,47 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { post } from 'lib/common/fetch'
+
+export type UserCreateVariables = {
+  protocol: string
+  endpoint: string
+  serviceApiKey: string
+  user: {
+    email: string
+    password: string
+    autoConfirmUser: string
+  }
+}
+
+export async function createUser({ protocol, endpoint, serviceApiKey, user }: UserCreateVariables) {
+  const response = await post(
+    `${protocol}://${endpoint}/auth/v1/admin/users`,
+    {
+      email: user.email,
+      password: user.password,
+      email_confirm: user.autoConfirmUser,
+    },
+    {
+      headers: {
+        apikey: serviceApiKey,
+        Authorization: `Bearer ${serviceApiKey}`,
+      },
+      credentials: 'omit',
+    }
+  )
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type UserCreateData = Awaited<ReturnType<typeof createUser>>
+
+export const useUserCreateMutation = (
+  options: Omit<UseMutationOptions<UserCreateData, unknown, UserCreateVariables>, 'mutationFn'> = {}
+) => {
+  return useMutation<UserCreateData, unknown, UserCreateVariables>(
+    (vars) => createUser(vars),
+    options
+  )
+}

studio/data/config/keys.ts

@@ -1,3 +1,4 @@
 export const configKeys = {
   settings: (projectRef: string | undefined) => ['projects', projectRef, 'settings'] as const,
+  api: (projectRef: string | undefined) => ['projects', projectRef, 'settings', 'api'] as const,
 }

studio/data/config/project-api-query.ts

@@ -0,0 +1,117 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { useCallback } from 'react'
+import { configKeys } from './keys'
+
+export type ProjectApiVariables = {
+  projectRef?: string
+}
+
+export type Project = {
+  id: number
+  name: string
+  ref: string
+  status: string
+  db_host: string
+  db_name: string
+  db_user: string
+  db_schema: string
+  db_port: number
+  db_ssl: boolean
+  services: Service[]
+}
+
+export type App = {
+  id: number
+  name: string
+}
+
+export type AppConfig = {
+  endpoint: string
+  db_schema: string
+  realtime_multitenant_enabled: boolean
+}
+
+export type Service = {
+  id: number
+  name: string
+  app_config: AppConfig
+  app: App
+  service_api_keys: ServiceApiKey[]
+}
+
+export type ServiceApiKey = {
+  api_key_encrypted: string
+  tags: string
+  name: string
+}
+
+export type AutoApiService = Service & {
+  protocol: 'https' | 'http'
+  endpoint: string
+  restUrl: string
+  project: Project
+  defaultApiKey: string
+  serviceApiKey: string
+}
+
+export type ProjectApiResponse = {
+  project: Project
+  autoApiService: AutoApiService
+}
+
+export async function getProjectApi({ projectRef }: ProjectApiVariables, signal?: AbortSignal) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+
+  const response = await get(`${API_URL}/props/project/${projectRef}/api`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as ProjectApiResponse
+}
+
+export type ProjectApiData = Awaited<ReturnType<typeof getProjectApi>>
+export type ProjectApiError = unknown
+
+export const useProjectApiQuery = <TData = ProjectApiData>(
+  { projectRef }: ProjectApiVariables,
+  { enabled = true, ...options }: UseQueryOptions<ProjectApiData, ProjectApiError, TData> = {}
+) =>
+  useQuery<ProjectApiData, ProjectApiError, TData>(
+    configKeys.api(projectRef),
+    ({ signal }) => getProjectApi({ projectRef }, signal),
+    {
+      enabled: enabled && typeof projectRef !== 'undefined',
+      refetchInterval(data, query) {
+        if (!data) {
+          return false
+        }
+
+        const { autoApiService } = data as unknown as ProjectApiData
+
+        const apiKeys = autoApiService?.service_api_keys ?? []
+        const interval = apiKeys.length === 0 ? 2000 : 0
+
+        return interval
+      },
+      ...options,
+    }
+  )
+
+export const useProjectApiPrefetch = ({ projectRef }: ProjectApiVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef) {
+      client.prefetchQuery(configKeys.api(projectRef), ({ signal }) =>
+        getProjectApi({ projectRef }, signal)
+      )
+    }
+  }, [projectRef])
+}