Skip to main content

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

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?