---
title: useNonce
description: >-
The `useNonce` hook returns the [content security
policy](/docs/custom-storefronts/hydrogen/content-security-policy) nonce. Use
the hook to manually add a nonce to third party scripts. The `Script`
component automatically does this for you. Note, the nonce should never be
available in the client, and should always return undefined in the browser.
api_version: 2024-07
api_name: hydrogen
source_url:
html: 'https://shopify.dev/docs/api/hydrogen/2024-07/hooks/usenonce'
md: 'https://shopify.dev/docs/api/hydrogen/2024-07/hooks/usenonce.md'
---
# useNonce
The `useNonce` hook returns the [content security policy](https://shopify.dev/docs/custom-storefronts/hydrogen/content-security-policy) nonce. Use the hook to manually add a nonce to third party scripts. The `Script` component automatically does this for you. Note, the nonce should never be available in the client, and should always return undefined in the browser.
## useNonce()
Examples
### Examples
* #### Example code
##### Description
I am the default example
##### JavaScript
```jsx
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import {useNonce} from '@shopify/hydrogen';
export default function App() {
const nonce = useNonce();
return (
);
}
```
##### TypeScript
```tsx
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import {useNonce} from '@shopify/hydrogen';
export default function App() {
const nonce = useNonce();
return (
);
}
```
## Related
[- createContentSecurityPolicy](https://shopify.dev/docs/api/hydrogen/2024-07/utilities/createcontentsecuritypolicy)
[- Script](https://shopify.dev/docs/api/hydrogen/2024-07/components/script)