Merge branch 'master' of github.com:supabase/supabase

This commit is contained in:
Terry Sutton committed 2024-08-29 13:53:52 -02:30
commit 3be5b051eb
13 files changed
+355 -214

No files matched your search

+1 -1
View File
@@ -72,7 +72,7 @@ const products = [
const migrationGuides = [
{
title: 'Auth',
title: 'Auth0',
icon: '/docs/img/icons/auth0-icon',
href: '/guides/resources/migrating-to-supabase/auth0',
},
@@ -10,23 +10,28 @@ To supplement HTTP status codes, Supabase Auth returns a string error code which
| Code | Description |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `anonymous_provider_disabled` | Anonymous sign-ins are disabled. |
| `bad_code_verifier` | Returned from the PKCE flow where the provided code verifier does not match the expected one. Indicates a bug in the implementation of the client library. |
| `bad_json` | Usually used when the HTTP body of the request is not valid JSON. |
| `bad_jwt` | JWT sent in the `Authorization` header is not valid. |
| `bad_oauth_callback` | OAuth callback from provider to Auth does not have all the required attributes (state). Indicates an issue with the OAuth provider or client library implementation. |
| `bad_oauth_state` | OAuth state (data echoed back by the OAuth provider to Supabase Auth) is not in the correct format. Indicates an issue with the OAuth provider integration. |
| `captcha_failed` | Captcha challenge could not be verified with the captcha provider. Check your captcha integration. |
| `conflict` | General database conflict, such as concurrent requests on resources that should not be modified concurrently. Can often occur when you have too many session refresh requests firing off at the same time for a user. Check your app for concurrency issues, and if detected back off exponentially. |
| `conflict` | General database conflict, such as concurrent requests on resources that should not be modified concurrently. Can often occur when you have too many session refresh requests firing off at the same time for a user. Check your app for concurrency issues, and if detected, back off exponentially. |
| `email_conflict_identity_not_deletable` | Unlinking this identity causes the user's account to change to an email address which is already used by another user account. Indicates an issue where the user has two different accounts using different primary email addresses. You may need to migrate user data to one of their accounts in this case. |
| `email_exists` | Email address already exists in the system. |
| `email_not_confirmed` | Signing in is not allowed for this user as the email address is not confirmed. |
| `email_provider_disabled` | Signups are disabled for email and password. |
| `flow_state_expired` | PKCE flow state to which the API request relates has expired. Ask the user to sign in again. |
| `flow_state_not_found` | PKCE flow state to which the API request relates no longer exists. Flow states expire after a while and are progressively cleaned up, which can cause this error. Retried requests can cause this error, as the previous request likely destroyed the flow state. Ask the user to sign in again. |
| `hook_payload_over_size_limit` | Payload from Auth exceeds maximum size limit. |
| `hook_timeout` | Unable to reach hook within maximum time allocated. |
| `hook_timeout_after_retry` | Unable to reach hook after maximum number of retries. |
| `identity_already_exists` | The identity to which the API relates is already linked to a user. |
| `identity_not_found` | Identity to which the API call relates does not exist, such as when an identity is unlinked or deleted. |
| `insufficient_aal` | To call this API, the user must have a higher [Authenticator Assurance Level](https://supabase.com/docs/guides/auth/auth-mfa). To resolve, ask the user to solve an MFA challenge. |
| `invite_not_found` | Invite is expired or already used. |
| `invalid_credentials` | Login credentials or grant type not recognized. |
| `manual_linking_disabled` | Calling the `supabase.auth.linkUser()` and related APIs is not enabled on the Auth server. |
| `mfa_challenge_expired` | Responding to an MFA challenge should happen within a fixed time period. Request a new challenge when encountering this error. |
| `mfa_factor_name_conflict` | MFA factors for a single user should not have the same friendly name. |
@@ -34,6 +39,11 @@ To supplement HTTP status codes, Supabase Auth returns a string error code which
| `mfa_ip_address_mismatch` | The enrollment process for MFA factors must begin and end with the same IP address. |
| `mfa_verification_failed` | MFA challenge could not be verified -- wrong TOTP code. |
| `mfa_verification_rejected` | Further MFA verification is rejected. Only returned if the [MFA verification attempt hook](https://supabase.com/docs/guides/auth/auth-hooks?language=add-admin-role#hook-mfa-verification-attempt) returns a reject decision. |
| `mfa_verified_factor_exists` | Verified phone factor already exists for a user. Unenroll existing verified phone factor to continue. |
| `mfa_totp_enroll_disabled` | Enrollment of MFA TOTP factors is disabled. |
| `mfa_totp_verify_disabled` | Login via TOTP factors and verification of new TOTP factors is disabled. |
| `mfa_phone_enroll_disabled` | Enrollment of MFA Phone factors is disabled. |
| `mfa_phone_verify_disabled` | Login via Phone factors and verification of new Phone factors is disabled. |
| `no_authorization` | This HTTP request requires an `Authorization` header, which is not provided. |
| `not_admin` | User accessing the API is not admin, i.e. the JWT does not contain a `role` claim that identifies them as an admin of the Auth server. |
| `oauth_provider_not_supported` | Using an OAuth provider which is disabled on the Auth server. |
@@ -49,9 +59,10 @@ To supplement HTTP status codes, Supabase Auth returns a string error code which
| `provider_email_needs_verification` | Not all OAuth providers verify their user's email address. Supabase Auth requires emails to be verified, so this error is sent out when a verification email is sent after completing the OAuth flow. |
| `reauthentication_needed` | A user needs to reauthenticate to change their password. Ask the user to reauthenticate by calling the `supabase.auth.reauthenticate()` API. |
| `reauthentication_not_valid` | Verifying a reauthentication failed, the code is incorrect. Ask the user to enter a new code. |
| `request_timeout` | Processing the request took too long. Retry the request. |
| `same_password` | A user that is updating their password must use a different password than the one currently used. |
| `saml_assertion_no_email` | SAML assertion (user information) was received after sign in, but no email address was found in it which is required. Check the provider's attribute mapping and/or configuration. |
| `saml_assertion_no_user_id` | SAML assertion (user information) was received after sign in, but a user ID (called NameID) was not found in it which is required. Check the SAML identity provider's configuration. |
| `saml_assertion_no_email` | SAML assertion (user information) was received after sign in, but no email address was found in it, which is required. Check the provider's attribute mapping and/or configuration. |
| `saml_assertion_no_user_id` | SAML assertion (user information) was received after sign in, but a user ID (called NameID) was not found in it, which is required. Check the SAML identity provider's configuration. |
| `saml_entity_id_mismatch` | (Admin API.) Updating the SAML metadata for a SAML identity provider is not possible, as the entity ID in the update does not match the entity ID in the database. This is equivalent to creating a new identity provider, and you should do that instead. |
| `saml_idp_already_exists` | (Admin API.) Adding a SAML identity provider that is already added. |
| `saml_idp_not_found` | SAML identity provider not found. Most often returned after IdP-initiated sign-in with an unregistered SAML identity provider in Supabase Auth. |
@@ -60,7 +71,7 @@ To supplement HTTP status codes, Supabase Auth returns a string error code which
| `saml_relay_state_expired` | SAML relay state is an object that tracks the progress of a `supabase.auth.signInWithSSO()` request. The SAML identity provider should respond after a fixed amount of time, after which this error is shown. Ask the user to sign in again. |
| `saml_relay_state_not_found` | SAML relay states are progressively cleaned up after they expire, which can cause this error. Ask the user to sign in again. |
| `session_not_found` | Session to which the API request relates no longer exists. This can occur if the user has signed out, or the session entry in the database was deleted in some other way. |
| `signup_disabled` | Sign ups (new account creation) is disabled on the server. |
| `signup_disabled` | Sign ups (new account creation) are disabled on the server. |
| `single_identity_not_deletable` | Every user must have at least one identity attached to it, so deleting (unlinking) an identity is not allowed if it's the only one for the user. |
| `sms_send_failed` | Sending an SMS message failed. Check your SMS provider configuration. |
| `sso_domain_already_exists` | (Admin API.) Only one SSO domain can be registered per SSO identity provider. |
@@ -71,7 +71,7 @@ values
## Create Auth Hook to apply user role
The [Custom Access Token Auth Hook](/docs/guides/auth/auth-hooks#hook-custom-access-token) runs before a token is issued. You can use it edit the JWT.
The [Custom Access Token Auth Hook](/docs/guides/auth/auth-hooks#hook-custom-access-token) runs before a token is issued. You can use it to edit the JWT.
<Tabs
scrollable
@@ -82,22 +82,6 @@ SUPABASE_KEY = '<your-anon-key>'
supabase = create_client(SUPABASE_URL, SUPABASE_KEY)
```
</TabPanel>
<TabPanel id="dart" label="Dart">
```dart
void main() {
Supabase.initialize(
url: 'https://<project>.supabase.co',
anonKey: '<your-anon-key>',
);
runApp(MyApp());
}
final supabase = Supabase.instance.client;
```
</TabPanel>
</Tabs>
+1 -1
View File
@@ -261,7 +261,7 @@ parameters:
title: 'inbucket.port'
tags: ['local']
required: false
default: 'true'
default: '54324'
description: |
Port to use for the email testing server web interface.
@@ -0,0 +1,101 @@
import { MoreHorizontal } from 'lucide-react'
import { OrganizationPaymentMethod } from 'data/organizations/organization-payment-methods-query'
import { BASE_PATH } from 'lib/constants'
import {
Badge,
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from 'ui'
interface CreditCardProps {
paymentMethod: OrganizationPaymentMethod
canUpdatePaymentMethods?: boolean
paymentMethodType?: string
setSelectedMethodForUse?: (paymentMethod: OrganizationPaymentMethod) => void
setSelectedMethodToDelete?: (paymentMethod: OrganizationPaymentMethod) => void
}
const CreditCard = ({
paymentMethod,
canUpdatePaymentMethods = true,
paymentMethodType,
setSelectedMethodForUse,
setSelectedMethodToDelete,
}: CreditCardProps) => {
const isActive = paymentMethod.is_default
const expiryYear = paymentMethod.card?.exp_year ?? 0
const expiryMonth = paymentMethod.card?.exp_month ?? 0
const currentMonth = new Date().getMonth() + 1
const currentYear = new Date().getFullYear()
const isExpiringSoon = expiryYear === currentYear && expiryMonth === currentMonth
const isExpired =
expiryYear < currentYear || (expiryYear === currentYear && expiryMonth < currentMonth)
if (!paymentMethod.card) return null
return (
<div key={paymentMethod.id} className="flex items-center justify-between gap-8">
<div className="flex items-center gap-8">
<img
alt="Credit card brand"
src={`${BASE_PATH}/img/payment-methods/${paymentMethod.card.brand
.replace(' ', '-')
.toLowerCase()}.png`}
width="32"
/>
<p className="prose text-sm font-mono">**** **** **** {paymentMethod.card!.last4}</p>
<p className="text-sm tabular-nums">
Expires: {paymentMethod.card.exp_month}/{paymentMethod.card.exp_year}
</p>
</div>
<div className="flex items-center gap-2">
{isExpiringSoon && <Badge variant="warning">Expiring soon</Badge>}
{isExpired && <Badge variant="destructive">Expired</Badge>}
{isActive && <Badge variant="brand">Active</Badge>}
{canUpdatePaymentMethods && !isActive && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
type="outline"
className="hover:border-muted px-1"
icon={<MoreHorizontal />}
aria-label="More options"
/>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{paymentMethodType === 'card' && (
<>
<DropdownMenuItem
key="make-default"
onClick={() => setSelectedMethodForUse?.(paymentMethod)}
>
<p>Use this card</p>
</DropdownMenuItem>
<DropdownMenuSeparator />
</>
)}
<DropdownMenuItem
key="delete-method"
onClick={() => setSelectedMethodToDelete?.(paymentMethod)}
>
<p>Delete card</p>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)}
</div>
</div>
)
}
export default CreditCard
@@ -0,0 +1,80 @@
import { CreditCardIcon } from 'lucide-react'
import Link from 'next/link'
import { PermissionAction, SupportCategories } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
import { useOrganizationPaymentMethodsQuery } from 'data/organizations/organization-payment-methods-query'
import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { Button } from 'ui'
import CreditCard from './CreditCard'
const CurrentPaymentMethod = () => {
const { slug } = useParams()
const {
data: subscription,
isLoading: isLoadingSubscription,
isError: isErrorSubscription,
} = useOrgSubscriptionQuery({
orgSlug: slug,
})
const {
data: paymentMethods,
isLoading: isLoadingOrganizationPaymentMethods,
isError: isErrorOrganizationPaymentMethods,
} = useOrganizationPaymentMethodsQuery({ slug })
const isLoading = isLoadingSubscription || isLoadingOrganizationPaymentMethods
const isError = isErrorSubscription || isErrorOrganizationPaymentMethods
const defaultPaymentMethod = paymentMethods?.data.find((pm) => pm.is_default)
const canReadPaymentMethods = useCheckPermissions(
PermissionAction.BILLING_READ,
'stripe.payment_methods'
)
// since this component is an enhancement,
// if it can't read payment methods, we will just not show it
if (!canReadPaymentMethods || isError) return null
return (
<div className="flex justify-between items-center gap-4 w-full text-sm rounded-lg p-4 text-foreground bg-alternative border">
{isLoading ? (
<ShimmeringLoader className="flex-1" />
) : subscription?.payment_method_type === 'invoice' ? (
<p className="flex-1 text-sm">
You get a monthly invoice and payment link via email. To change your payment method,
please contact us via our support form.
</p>
) : !defaultPaymentMethod ? (
<div className="flex-1 flex items-center gap-2 opacity-50">
<CreditCardIcon size={16} strokeWidth={1.5} />
<p className="text-sm">No payment methods</p>
</div>
) : (
<CreditCard
paymentMethod={defaultPaymentMethod}
paymentMethodType={subscription?.payment_method_type}
canUpdatePaymentMethods={false}
/>
)}
<Button type="outline" asChild>
{subscription?.payment_method_type === 'invoice' ? (
<Link
href={`/support/new?slug=${slug}&ref=no-project&message=${encodeURIComponent('I would like to change my payment method')}&category=${SupportCategories.BILLING}`}
>
Contact support
</Link>
) : (
<Link href={`/org/${slug}/billing#payment-methods`}>Manage payment methods</Link>
)}
</Button>
</div>
)
}
export default CurrentPaymentMethod
@@ -1,5 +1,4 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useQueryClient } from '@tanstack/react-query'
import { useParams } from 'common'
import Link from 'next/link'
import { useState } from 'react'
@@ -17,33 +16,20 @@ import { FormSection, FormSectionContent } from 'components/ui/Forms/FormSection
import NoPermission from 'components/ui/NoPermission'
import PartnerManagedResource from 'components/ui/PartnerManagedResource'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
import { organizationKeys } from 'data/organizations/keys'
import { useOrganizationPaymentMethodsQuery } from 'data/organizations/organization-payment-methods-query'
import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { BASE_PATH } from 'lib/constants'
import { getURL } from 'lib/helpers'
import {
Alert,
Badge,
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
IconCreditCard,
IconMoreHorizontal,
IconPlus,
} from 'ui'
import { Alert, Button, IconCreditCard, IconPlus } from 'ui'
import ChangePaymentMethodModal from './ChangePaymentMethodModal'
import CreditCard from './CreditCard'
import DeletePaymentMethodModal from './DeletePaymentMethodModal'
import { CreditCardIcon } from 'lucide-react'
const PaymentMethods = () => {
const { slug } = useParams()
const selectedOrganization = useSelectedOrganization()
const queryClient = useQueryClient()
const [selectedMethodForUse, setSelectedMethodForUse] = useState<any>()
const [selectedMethodToDelete, setSelectedMethodToDelete] = useState<any>()
const [showAddPaymentMethodModal, setShowAddPaymentMethodModal] = useState(false)
@@ -151,70 +137,22 @@ const PaymentMethods = () => {
<FormSection>
<FormSectionContent fullWidth loading={false}>
{(paymentMethods?.data?.length ?? 0) === 0 ? (
<div className="flex items-center space-x-2 opacity-50">
<IconCreditCard />
<div className="flex items-center gap-2 opacity-50">
<CreditCardIcon size={16} strokeWidth={1.5} />
<p className="text-sm">No payment methods</p>
</div>
) : (
<div className="space-y-3">
{paymentMethods?.data?.map((paymentMethod) => {
const isActive = paymentMethod.is_default
if (!paymentMethod.card) return null
return (
<div
key={paymentMethod.id}
className="flex items-center justify-between"
>
<div className="flex items-center space-x-8">
<img
alt="Credit card brand"
src={`${BASE_PATH}/img/payment-methods/${paymentMethod.card.brand
.replace(' ', '-')
.toLowerCase()}.png`}
width="32"
/>
<p className="prose text-sm font-mono">
**** **** **** {paymentMethod.card!.last4}
</p>
<p className="text-sm tabular-nums">
Expires: {paymentMethod.card.exp_month}/
{paymentMethod.card.exp_year}
</p>
</div>
{isActive && <Badge variant="brand">Active</Badge>}
{canUpdatePaymentMethods && !isActive ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button type="outline" className="hover:border-muted px-1">
<IconMoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{subscription?.payment_method_type === 'card' && (
<>
<DropdownMenuItem
key="make-default"
onClick={() => setSelectedMethodForUse(paymentMethod)}
>
<p>Use this card</p>
</DropdownMenuItem>
<DropdownMenuSeparator />
</>
)}
<DropdownMenuItem
key="delete-method"
onClick={() => setSelectedMethodToDelete(paymentMethod)}
>
<p>Delete card</p>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) : null}
</div>
)
})}
{paymentMethods?.data?.map((paymentMethod) => (
<CreditCard
key={paymentMethod.id}
paymentMethod={paymentMethod}
canUpdatePaymentMethods={canUpdatePaymentMethods}
paymentMethodType={subscription?.payment_method_type}
setSelectedMethodForUse={setSelectedMethodForUse}
setSelectedMethodToDelete={setSelectedMethodToDelete}
/>
))}
</div>
)}
</FormSectionContent>
@@ -10,6 +10,7 @@ import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold'
import Table from 'components/to-be-cleaned/Table'
import AlertError from 'components/ui/AlertError'
import NoPermission from 'components/ui/NoPermission'
import PartnerManagedResource from 'components/ui/PartnerManagedResource'
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
import { getInvoice } from 'data/invoices/invoice-query'
import { useInvoicesCountQuery } from 'data/invoices/invoices-count-query'
@@ -18,7 +19,7 @@ import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { formatCurrency } from 'lib/helpers'
import { Button, IconChevronLeft, IconChevronRight, IconDownload, IconFileText } from 'ui'
import PartnerManagedResource from 'components/ui/PartnerManagedResource'
import CurrentPaymentMethod from '../BillingSettings/PaymentMethods/CurrentPaymentMethod'
const PAGE_LIMIT = 10
@@ -94,111 +95,117 @@ const InvoicesSettings = () => {
{isError && <AlertError error={error} subject="Failed to retrieve invoices" />}
{isSuccess && (
<Table
head={[
<Table.th key="header-icon"></Table.th>,
<Table.th key="header-date">Date</Table.th>,
<Table.th key="header-amount">Amount</Table.th>,
<Table.th key="header-invoice">Invoice number</Table.th>,
<Table.th key="header-status" className="flex items-center">
Status
</Table.th>,
<Table.th key="header-download" className="text-right"></Table.th>,
]}
body={
invoices.length === 0 ? (
<Table.tr>
<Table.td colSpan={6} className="p-3 py-12 text-center">
<p className="text-foreground-light">
{isLoading ? 'Checking for invoices' : 'No invoices for this organization yet'}
</p>
</Table.td>
</Table.tr>
) : (
<>
{invoices.map((x) => {
return (
<Table.tr key={x.id}>
<Table.td>
<IconFileText size="xxl" />
</Table.td>
<Table.td>
<p>{dayjs(x.period_end * 1000).format('MMM DD, YYYY')}</p>
</Table.td>
<Table.td>
<p>{formatCurrency(x.subtotal / 100)}</p>
</Table.td>
<Table.td>
<p>{x.number}</p>
</Table.td>
<Table.td>
<InvoiceStatusBadge
status={x.status as InvoiceStatus}
paymentAttempted={x.payment_attempted}
/>
</Table.td>
<Table.td className="align-right">
<div className="flex items-center justify-end space-x-2">
{x.subtotal > 0 &&
[
InvoiceStatus.UNCOLLECTIBLE,
InvoiceStatus.OPEN,
InvoiceStatus.ISSUED,
].includes(x.status as InvoiceStatus) && (
<Button asChild>
<Link
href={`https://redirect.revops.supabase.com/pay-invoice/${x.id}`}
target="_blank"
rel="noreferrer"
>
Pay Now
</Link>
</Button>
)}
<>
<CurrentPaymentMethod />
<Button
type="outline"
icon={<IconDownload size={16} strokeWidth={1.5} />}
onClick={() => fetchInvoice(x.id)}
/>
</div>
</Table.td>
</Table.tr>
)
})}
<Table.tr key="navigation">
<Table.td colSpan={6}>
<div className="flex items-center justify-between">
<p className="text-sm opacity-50">
{isErrorCount
? 'Failed to retrieve total number of invoices'
: `Showing ${offset + 1} to ${
offset + invoices.length
} out of ${count} invoices`}
</p>
<div className="flex items-center space-x-2">
<Button
icon={<IconChevronLeft />}
type="default"
size="tiny"
disabled={page === 1}
onClick={async () => setPage(page - 1)}
/>
<Button
icon={<IconChevronRight />}
type="default"
size="tiny"
disabled={page * PAGE_LIMIT >= (count ?? 0)}
onClick={async () => setPage(page + 1)}
/>
</div>
</div>
<Table
head={[
<Table.th key="header-icon"></Table.th>,
<Table.th key="header-date">Date</Table.th>,
<Table.th key="header-amount">Amount</Table.th>,
<Table.th key="header-invoice">Invoice number</Table.th>,
<Table.th key="header-status" className="flex items-center">
Status
</Table.th>,
<Table.th key="header-download" className="text-right"></Table.th>,
]}
body={
invoices.length === 0 ? (
<Table.tr>
<Table.td colSpan={6} className="p-3 py-12 text-center">
<p className="text-foreground-light">
{isLoading
? 'Checking for invoices'
: 'No invoices for this organization yet'}
</p>
</Table.td>
</Table.tr>
</>
)
}
/>
) : (
<>
{invoices.map((x) => {
return (
<Table.tr key={x.id}>
<Table.td>
<IconFileText size="xxl" />
</Table.td>
<Table.td>
<p>{dayjs(x.period_end * 1000).format('MMM DD, YYYY')}</p>
</Table.td>
<Table.td>
<p>{formatCurrency(x.subtotal / 100)}</p>
</Table.td>
<Table.td>
<p>{x.number}</p>
</Table.td>
<Table.td>
<InvoiceStatusBadge
status={x.status as InvoiceStatus}
paymentAttempted={x.payment_attempted}
/>
</Table.td>
<Table.td className="align-right">
<div className="flex items-center justify-end space-x-2">
{x.subtotal > 0 &&
[
InvoiceStatus.UNCOLLECTIBLE,
InvoiceStatus.OPEN,
InvoiceStatus.ISSUED,
].includes(x.status as InvoiceStatus) && (
<Button asChild>
<Link
href={`https://redirect.revops.supabase.com/pay-invoice/${x.id}`}
target="_blank"
rel="noreferrer"
>
Pay Now
</Link>
</Button>
)}
<Button
type="outline"
icon={<IconDownload size={16} strokeWidth={1.5} />}
onClick={() => fetchInvoice(x.id)}
/>
</div>
</Table.td>
</Table.tr>
)
})}
<Table.tr key="navigation">
<Table.td colSpan={6}>
<div className="flex items-center justify-between">
<p className="text-sm opacity-50">
{isErrorCount
? 'Failed to retrieve total number of invoices'
: `Showing ${offset + 1} to ${
offset + invoices.length
} out of ${count} invoices`}
</p>
<div className="flex items-center space-x-2">
<Button
icon={<IconChevronLeft />}
type="default"
size="tiny"
disabled={page === 1}
onClick={async () => setPage(page - 1)}
/>
<Button
icon={<IconChevronRight />}
type="default"
size="tiny"
disabled={page * PAGE_LIMIT >= (count ?? 0)}
onClick={async () => setPage(page + 1)}
/>
</div>
</div>
</Table.td>
</Table.tr>
</>
)
}
/>
</>
)}
</ScaffoldContainerLegacy>
)
@@ -48,7 +48,7 @@ const CONNECTION_TYPES = [
{ id: 'golang', label: 'Golang' },
{ id: 'jdbc', label: 'JDBC' },
{ id: 'dotnet', label: '.NET' },
{ id: 'nodejs', label: 'Nodejs' },
{ id: 'nodejs', label: 'Node.js' },
{ id: 'php', label: 'PHP' },
{ id: 'python', label: 'Python' },
]
+12 -1
View File
@@ -1,6 +1,7 @@
import { post } from '~/lib/fetchWrapper'
import { API_URL, IS_PROD, IS_PREVIEW } from 'lib/constants'
import { NextRouter } from 'next/router'
import { LOCAL_STORAGE_KEYS } from 'common'
export interface TelemetryEvent {
category: string
@@ -14,11 +15,21 @@ export interface TelemetryProps {
language: string
}
const noop = () => {}
// This event is the same as in studio/lib/telemetry.tx
// but uses different ENV variables for www
const sendEvent = (event: TelemetryEvent, gaProps: TelemetryProps, router: NextRouter) => {
if (!IS_PROD && !IS_PREVIEW) return
const consent =
typeof window !== 'undefined'
? localStorage.getItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT)
: null
const hasAcceptedConsent = consent === 'true'
const IS_DEV = !IS_PROD && !IS_PREVIEW
const blockEvent = IS_DEV || !hasAcceptedConsent
if (blockEvent) return noop
const { category, action, label, value } = event
+17 -8
View File
@@ -1,15 +1,13 @@
import {
KeyIcon,
LinkIcon,
UserGroupIcon,
ShieldCheckIcon,
RewindIcon,
CreditCardIcon,
ClipboardCheckIcon,
} from '@heroicons/react/outline'
import { Button, IconGitHub, IconActivity } from 'ui'
import { IconActivity, IconLock, IconSmartphone } from 'ui'
import Layout from '../layouts/Layout'
import Link from 'next/link'
export const meta = {
type: 'lp',
@@ -22,7 +20,7 @@ export const Section = ({ children, icon, img }) => (
<div>
{icon && (
<div className="border shadow-background-surface-300 not-prose bg-surface-100 -mb-4 flex h-10 w-10 items-center justify-center rounded-full">
<figure className="w-5">{icon}</figure>
<figure className="w-5 h-5 flex items-center justify-center">{icon}</figure>
</div>
)}
{img && <div className="-mb-4 flex h-12 w-12 items-center justify-center">{img}</div>}
@@ -30,14 +28,14 @@ export const Section = ({ children, icon, img }) => (
</div>
)
<div className="container mx-auto px-8 sm:px-16 xl:px-20 grid grid-cols-12 items-center my-16">
<div className="container mx-auto px-8 sm:px-16 xl:px-20 grid grid-cols-12 items-center my-8">
<div className="col-span-12 lg:col-span-6">
<h1>Security at Supabase</h1>
<h2 className="text-xl text-foreground-light max-w-xl">
<h1 className="xl:text-5xl mb-4 [&_p]:m-0">Security at Supabase</h1>
<h2 className="text-xl text-foreground-light max-w-xl m-0 [&_p]:m-0">
Supabase is trusted by thousands of developers for building and deploying secure applications.
</h2>
</div>
<div className="col-span-12 lg:col-span-5 lg:col-start-8">
<div className="col-span-12 lg:col-span-5 lg:col-start-8 m-0 [&_p]:m-0">
![Supabase security](/images/security/security-hero.png)
@@ -48,6 +46,16 @@ export const Section = ({ children, icon, img }) => (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-16">
<Section icon={<IconLock strokeWidth={1}/>}>
### Multi-factor Authentication
Multi-factor authentication (MFA) adds an additional layer of security to your user account, by requiring a second factor to verify your user identity.
Supabase allows users to enable MFA on their account and set it as a requirement for subsequent logins.
</Section>
<Section icon={<ShieldCheckIcon strokeWidth={1}/>}>
### SOC 2
@@ -61,6 +69,7 @@ Enterprise and Team customers can access our SOC2 report [on the dashboard](/das
</div>
</Section>
<Section icon={<IconActivity strokeWidth={1}/>}>
### HIPAA
+1 -1
View File
@@ -7,7 +7,7 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
// @ts-ignore next-themes is old :/
return (
<NextThemesProvider {...props} themes={['dark', 'light']} defaultTheme="dark">
<NextThemesProvider themes={['dark', 'light']} defaultTheme="dark" {...props}>
{children}
</NextThemesProvider>
)