How to pull Supabase user data into Sanity Studio?

2 replies

Last updated: Jan 12, 2022

Hey there I want to be able to view all my users in a database and their associated details in my Sanity studio, I’m using Supabase and I know people have done this with Firebase, so I can imagine it would behave similarly but a bit more postgress-y. My question is how do I pull this data into my studio?? I’ve done stuff like this with Shopify and Stripe but they seem to be more documented / pre built. If any one could point me in the right direction that would be greatly appreciated 🙏

AI Update

Great question! You're right that this is similar to how people integrate Firebase with Sanity Studio. To display your Supabase users in Sanity Studio, you'll want to create a custom tool. Here's how to approach this:

Creating a Custom Tool for Supabase Users

A custom Studio tool is perfect for this use case. Tools are top-level views in Sanity Studio that appear in the menu bar, and they're essentially React components that can fetch and display external data.

Basic Setup

Here's a starter example that shows how to structure your custom tool:

// supabaseUsersTool.tsx
import { defineConfig } from 'sanity'
import { Card, Container, Stack, Heading } from '@sanity/ui'
import { UsersIcon } from '@sanity/icons'
import { createClient } from '@supabase/supabase-js'

const supabaseUsersTool = () => {
  return {
    title: 'Supabase Users',
    name: 'supabase-users',
    icon: UsersIcon,
    component: () => {
      const [users, setUsers] = useState([])
      
      useEffect(() => {
        // Initialize your Supabase client
        const supabase = createClient(
          process.env.SANITY_STUDIO_SUPABASE_URL,
          process.env.SANITY_STUDIO_SUPABASE_ANON_KEY
        )
        
        // Fetch users using Supabase admin API
        // Note: You'll need proper auth setup for this
        async function fetchUsers() {
          const { data, error } = await supabase.auth.admin.listUsers()
          if (data) setUsers(data.users)
        }
        
        fetchUsers()
      }, [])
      
      return (
        <Container padding={4}>
          <Stack space={4}>
            <Heading>Supabase Users</Heading>
            {/* Render your users here */}
          </Stack>
        </Container>
      )
    }
  }
}

// In your sanity.config.ts
export default defineConfig({
  // ...other config
  tools: [supabaseUsersTool()],
})

Important Considerations

Authentication: For listUsers() to work, you'll need your Supabase service role key (not the anon key). Store this securely in environment variables. Check the Supabase admin API docs for details.
Environment Variables: Use Sanity Studio environment variables prefixed with SANITY_STUDIO_ to access them in your tool.
Use Sanity UI: Like you saw with Shopify/Stripe integrations, leverage @sanity/ui components for consistent styling (Card, Stack, Table, etc.).
Plugin Option: If you want to reuse this across projects, you can package it as a plugin using definePlugin instead of directly in your config.

Example with Better UI

import { Card, Stack, Text, Flex, Avatar } from '@sanity/ui'

// In your component:
return (
  <Container padding={4}>
    <Stack space={3}>
      {users.map(user => (
        <Card key={user.id} padding={3} border>
          <Flex gap={3} align="center">
            <Avatar size={1} />
            <Stack space={2}>
              <Text weight="semibold">{user.email}</Text>
              <Text size={1} muted>
                Created: {new Date(user.created_at).toLocaleDateString()}
              </Text>
            </Stack>
          </Flex>
        </Card>
      ))}
    </Stack>
  </Container>
)

The key difference from Shopify/Stripe is that those have pre-built plugins, but the underlying concept is the same—you're creating a custom view that fetches external data and displays it using React and Sanity UI components.

If you want to make this read/write (not just viewing), you could also add buttons that trigger Supabase mutations, though be mindful of permissions and security when doing so from the Studio.

Show original thread

2 replies

Thanks

user M

yeah I’ve got access to an API, so I’ll give Mutations a try!

Let us know if you need help working out the mutation!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo