useCheckScopesConsent

The useCheckScopesConsent hook returns the current consent status for scopes declared in your Mini's manifest.json. Use it to decide whether to show the full experience, a gated screen, or a prompt that asks the user to grant access.

Call refetch() after requestScopesConsent() resolves to read the updated status.

Anchor to useCheckScopesConsent
useCheckScopesConsent()

Anchor to useCheckScopesConsent-returnsReturns

UseCheckScopesConsentReturns

error
```
Error | null
```
grantedScopes
Scopes already granted by the user.
```
string[] | undefined
```
loading
```
boolean
```
refetch
Re-fetch scope consent status. Call this after `requestScopesConsent()` resolves to get the updated status.
```
() => Promise<void>
```
requiredScopes
Required scopes declared by the mini, fetched fresh from the API.
```
string[] | undefined
```
status
Consent status derived from comparing required vs granted scopes. - `'granted'` — all required scopes are granted, or none declared - `'partially_granted'` — at least one required scope is granted but not all - `'not_granted'` — no required scopes are granted
```
CheckScopesConsentResponse['status'] | undefined
```

CheckScopesConsentResponse

grantedScopes
```
string[]
```
requiredScopes
```
string[]
```

status

'granted' | 'partially_granted' | 'not_granted'

Examples

tsx

import {useCallback} from 'react'

import {

Button,

useCheckScopesConsent,

useRequestScopesConsent,

} from '@shopify/shop-minis-react'

export default function ConsentGate() {

const {status, loading, error, refetch} = useCheckScopesConsent()

const {requestScopesConsent} = useRequestScopesConsent()

const handleGrantAccess = useCallback(async () => {

try {

const {granted} = await requestScopesConsent()

await refetch()

console.log(granted ? 'Scope consent granted' : 'Scope consent denied')

} catch (requestError) {

console.error('Could not request scope consent:', requestError)

}

}, [refetch, requestScopesConsent])

if (loading) return null

if (error) {

return <p>Consent status failed to load.</p>

}

if (status === 'granted') {

return <MainScreen />

}

return (

<div>

<h1>Grant access</h1>

<p>Grant access to your order history to personalize your experience.</p>

<Button onClick={handleGrantAccess}>Grant access</Button>

</div>

)

}

function MainScreen() {

return <div>Main experience</div>

}

Examples

tsx

import {useCallback} from 'react'

import {
  Button,
  useCheckScopesConsent,
  useRequestScopesConsent,
} from '@shopify/shop-minis-react'

export default function ConsentGate() {
  const {status, loading, error, refetch} = useCheckScopesConsent()
  const {requestScopesConsent} = useRequestScopesConsent()

  const handleGrantAccess = useCallback(async () => {
    try {
      const {granted} = await requestScopesConsent()
      await refetch()

      console.log(granted ? 'Scope consent granted' : 'Scope consent denied')
    } catch (requestError) {
      console.error('Could not request scope consent:', requestError)
    }
  }, [refetch, requestScopesConsent])

  if (loading) return null

  if (error) {
    return <p>Consent status failed to load.</p>
  }

  if (status === 'granted') {
    return <MainScreen />
  }

  return (
    <div>
      <h1>Grant access</h1>
      <p>Grant access to your order history to personalize your experience.</p>
      <Button onClick={handleGrantAccess}>Grant access</Button>
    </div>
  )
}

function MainScreen() {
  return <div>Main experience</div>
}

Anchor to RelatedRelated

useRequestScopesConsent

Scopes consent

Manifest

Was this page helpful?

Anchor to useCheckScopesConsentuseCheckScopesConsent()

Anchor to useCheckScopesConsent-returnsReturns

UseCheckScopesConsentReturns

CheckScopesConsentResponse

Anchor to RelatedRelated

Anchor to useCheckScopesConsent
useCheckScopesConsent()