Skip to main content

useRequestScopesConsent

The useRequestScopesConsent hook returns an object with a requestScopesConsent() function that shows the consent sheet for scopes declared in your Mini's manifest.json. Use requestScopesConsent() when useCheckScopesConsent reports a partially_granted or not_granted status, and you want to let the user grant access again.

After the request resolves, call refetch() from useCheckScopesConsent to read the updated status. If another consent or permission sheet is already showing, or if the Mini's scope state hasn't loaded yet, then the request rejects with request_blocked.

Anchor to useRequestScopesConsent
useRequestScopesConsent()

Anchor to useRequestScopesConsent-returnsReturns

Examples

tsx

import {useCallback} from 'react'

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

export default function ReconnectBanner() {
const {status, refetch} = useCheckScopesConsent()
const {requestScopesConsent} = useRequestScopesConsent()

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

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

if (status !== 'partially_granted' && status !== 'not_granted') {
return null
}

return (
<div>
<p>Grant access to unlock the full experience.</p>
<Button onClick={handleReconnect}>Grant access</Button>
</div>
)
}

Anchor to RelatedRelated

useCheckScopesConsent
Scopes consent
Manifest
Was this page helpful?