// src/App.tsx
import {SanityConfig} from '@sanity/sdk'
import {SanityApp} from '@sanity/sdk-react/components'
import {useCurrentUser, useLogOut} from '@sanity/sdk-react/hooks'

import './App.css'

const sanityConfig: SanityConfig = {
  projectId: '<your-project-id>',
  dataset: '<your-dataset>',
  // optional auth config set projectId and dataset to '' and authScope to 'global' for a global token
  // auth: {
  //   authScope: 'global',
  //   ...
  // },
}

export function App(): JSX.Element {
  return (
    <SanityApp sanityConfig={sanityConfig}>
      <MyApp />
    </SanityApp>
  )
}

function MyApp() {
  const currentUser = useCurrentUser()
  const logout = useLogOut()

  return (
    <div>
      <h1>Hello, {currentUser?.name}!</h1>
      <button onClick={logout}>Logout</button>
    </div>
  )
}

export default App

import type {
  SanityProviderProps,
  AuthBoundaryProps,
  LoginLayoutProps,
  LoginErrorProps,
} from '@sanity/react'