diff --git a/apps/studio/components/ui/CopyButton.tsx b/apps/studio/components/ui/CopyButton.tsx
index 425a168775ffd..334ee62445dba 100644
--- a/apps/studio/components/ui/CopyButton.tsx
+++ b/apps/studio/components/ui/CopyButton.tsx
@@ -31,6 +31,9 @@ const CopyButton = forwardRef{children}
+
+)
+
const CliLoginPage: NextPageWithLayout = () => {
const router = useRouter()
const { session_id, public_key, token_name, device_code } = useParams()
const isLoggedIn = useIsLoggedIn()
+ if (!router.isReady) return null
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ )
+ }
+
+ if (status._tag === 'missing-params') {
+ const isPlural = status.missingParameters.length > 1
+
+ return (
+
+
+
+
+
+
+ Supabase could not create the CLI sign-in session.
+ {status.message && (
+
+ Error: {status.message}
+
+ )}
+
+ }
+ />
+
+
+
- {device_code ? (
- <>
-
+
)
}
diff --git a/apps/studio/tests/components/CopyButton.test.tsx b/apps/studio/tests/components/CopyButton.test.tsx
index 4408ab0761e35..ba8bb4eb2ebdc 100644
--- a/apps/studio/tests/components/CopyButton.test.tsx
+++ b/apps/studio/tests/components/CopyButton.test.tsx
@@ -12,3 +12,14 @@ test('shows copied text', async () => {
await screen.findByText('Copied')
expect(callback).toBeCalled()
})
+
+test('does not show a green copied icon for primary buttons', async () => {
+ const { container } = render([0]>
+
+const getStatus = (overrides: StatusOverrides = {}) =>
+ getOrganizationInviteStatus({
+ data: READY_INVITE,
+ error: null,
+ isErrorInvitation: false,
+ isLoadingInvitation: false,
+ isLoadingProfile: false,
+ isLoggedIn: true,
+ isRouterReady: true,
+ isSuccessInvitation: true,
+ profileExists: true,
+ ...overrides,
+ })
+
+describe('OrganizationInvite utils', () => {
+ test.each<[string, OrganizationInviteStatus, StatusOverrides]>([
+ ['signed out when there is no current user', 'signed-out', { isLoggedIn: false }],
+ ['loading while the profile is loading', 'loading', { isLoadingProfile: true }],
+ ['loading while the invite is loading', 'loading', { isLoadingInvitation: true }],
+ [
+ 'no longer valid for accepted or declined invites',
+ 'no-longer-valid',
+ {
+ data: undefined,
+ error: responseError('Failed to retrieve organization', 401),
+ isErrorInvitation: true,
+ isSuccessInvitation: false,
+ },
+ ],
+ [
+ 'invalid when the API returns a missing token response',
+ 'invalid',
+ {
+ data: { ...READY_INVITE, token_does_not_exist: true },
+ },
+ ],
+ [
+ 'invalid when the invite lookup 404s',
+ 'invalid',
+ {
+ data: undefined,
+ error: responseError('Not Found', 404),
+ isErrorInvitation: true,
+ isSuccessInvitation: false,
+ },
+ ],
+ [
+ 'error for other API failures',
+ 'error',
+ {
+ data: undefined,
+ error: responseError('Failed to retrieve token', 500),
+ isErrorInvitation: true,
+ isSuccessInvitation: false,
+ },
+ ],
+ [
+ 'expired when the token has expired',
+ 'expired',
+ {
+ data: { ...READY_INVITE, expired_token: true },
+ },
+ ],
+ [
+ 'wrong account when the invite email does not match',
+ 'wrong-account',
+ {
+ data: { ...READY_INVITE, email_match: false },
+ },
+ ],
+ ['ready when the invite can be accepted', 'ready', {}],
+ ])('returns %s', (_name, expected, overrides) => {
+ expect(getStatus(overrides)).toBe(expected)
+ })
+
+ test.each<[OrganizationInviteStatus, string, string | undefined]>([
+ ['signed-out', 'View invitation', 'Sign in or create an account to view this invitation'],
+ ['ready', 'Join Acme Corp', 'You have been invited to join this Supabase organization'],
+ ['wrong-account', 'Wrong account', undefined],
+ ['expired', 'Invite expired', undefined],
+ ['invalid', 'Invite invalid', undefined],
+ ['no-longer-valid', 'Invite no longer available', undefined],
+ ['error', 'Unable to load invitation', undefined],
+ ])('returns content for %s', (status, title, description) => {
+ expect(
+ getOrganizationInviteContent({
+ data: READY_INVITE,
+ isSignUpEnabled: true,
+ status,
+ })
+ ).toEqual({ title, ...(description ? { description } : {}) })
+ })
+
+ test('omits sign-up copy when sign-up is disabled', () => {
+ expect(
+ getOrganizationInviteContent({
+ data: READY_INVITE,
+ isSignUpEnabled: false,
+ status: 'signed-out',
+ }).description
+ ).toBe('Sign in to view this invitation')
+ })
+})
diff --git a/apps/studio/tests/pages/cli-login.test.tsx b/apps/studio/tests/pages/cli-login.test.tsx
new file mode 100644
index 0000000000000..afecbf3c6420e
--- /dev/null
+++ b/apps/studio/tests/pages/cli-login.test.tsx
@@ -0,0 +1,122 @@
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+
+import type { ProfileContextType } from '@/lib/profile'
+import { CliLoginScreen } from '@/pages/cli/login'
+import { customRender } from '@/tests/lib/custom-render'
+
+const { createCliLoginSessionMock } = vi.hoisted(() => ({
+ createCliLoginSessionMock: vi.fn(),
+}))
+
+vi.mock('@/data/cli/login', () => ({
+ createCliLoginSession: createCliLoginSessionMock,
+}))
+
+const DEFAULT_PROFILE_CONTEXT: ProfileContextType = {
+ profile: {
+ id: 1,
+ auth0_id: 'auth0|test',
+ gotrue_id: 'gotrue-test',
+ username: 'testuser',
+ primary_email: 'test@example.com',
+ first_name: null,
+ last_name: null,
+ mobile: null,
+ is_alpha_user: false,
+ is_sso_user: false,
+ disabled_features: [],
+ free_project_limit: null,
+ },
+ error: null,
+ isLoading: false,
+ isError: false,
+ isSuccess: true,
+}
+
+function renderScreen(props: Partial[0]> = {}) {
+ const navigate = vi.fn()
+ const result = customRender(
+
Your Supabase account is being used to login on Supabase CLI
-Enter this verification code on Supabase CLI to authorize login.
-
-
-
- {Array.from({ length: 8 }, (_, i) => (
-
-
-
- After authorizing the login attempt, you can close this window.
-- If you ever want to remove your new token, go to{' '} - - Access Tokens - {' '} - page. -
-
+
-
+
+
+
+ {
+ event.preventDefault()
+ event.clipboardData.setData('text/plain', status.deviceCode)
+ }}
+ >
+ {Array.from(status.deviceCode.padEnd(8, ' ')).map((character, index) => (
+
+ {character}
+
+ ))}
+
+
+ After authorizing, you can close this tab or manage tokens like this one in{' '}
+