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

UseRequestScopesConsentReturns

requestScopesConsent
Programmatically show the consent sheet for the Mini's required scopes. The sheet will show even if the user previously rejected it in the same session. Use this to build retry UX (e.g., a "Connect account" button). Resolves with `{granted: boolean}`. Rejects with `'request_blocked'` if the request can't be served right now — either another consent or permission sheet is already showing, or the Mini's scope state hasn't finished loading yet. Call `refetch()` on `useCheckScopesConsent` after resolution to get the updated scope status.
```
() => Promise<RequestScopesConsentResponse>
```

RequestScopesConsentResponse

granted
```
boolean
```

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>

)

}

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?

Anchor to useRequestScopesConsentuseRequestScopesConsent()

Anchor to useRequestScopesConsent-returnsReturns

UseRequestScopesConsentReturns

RequestScopesConsentResponse

Anchor to RelatedRelated

Anchor to useRequestScopesConsent
useRequestScopesConsent()