useGenerateUserToken

The useGenerateUserToken hook generates a temporary token for authenticating the current user with your backend. This token can be verified using the userTokenVerify mutation to obtain a permanent user identifier. See Verifying requests for implementation details.

Note

Some common use cases are: authenticating API requests to your backend, identifying users for personalized experiences, securely linking Shop users to your application's user database.

Note

This hook optionally uses the following scope(s) when declared in the manifest: openid

For more details, see manifest.json.

Anchor to useGenerateUserToken
useGenerateUserToken()

Anchor to useGenerateUserToken-returnsReturns

UseGenerateUserTokenReturns

generateUserToken
Generates a temporary token for the user. Tokens are cached in memory and reused if still valid (with a 5-minute expiry buffer). A new token is automatically generated when the cached token is expired or missing.
```
() => Promise<{ data: GeneratedTokenData; userErrors?: UserTokenGenerateUserErrors[]; }>
```

GeneratedTokenData

expiresAt
The expiration time of the token.
```
ISO8601DateTime | null
```
token
A temporary token for the user.
```
string | null
```
userState
Whether the user is verified or a guest.
```
UserState | null
```

ISO8601DateTime

string

UserState

GUEST
```
GUEST
```
VERIFIED
```
VERIFIED
```

UserTokenGenerateUserErrors

code
```
UserTokenGenerateUserErrorCode
```
field
```
string[] | null
```
message
```
string
```

UserTokenGenerateUserErrorCode

MINI_NOT_FOUND
```
MINI_NOT_FOUND
```
USER_NOT_FOUND
```
USER_NOT_FOUND
```

Examples

tsx

import {useCallback} from 'react'

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

export default function MyComponent() {

const {generateUserToken} = useGenerateUserToken()

const performRequest = useCallback(async () => {

const {data} = await generateUserToken()

const {token, expiresAt, userState} = data

console.log({token, expiresAt, userState})

}, [generateUserToken])

return <Button onPress={performRequest} text="Perform request" />

}