
Product
Introducing Rust Support in Socket
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
@scaleway/cookie-consent
Advanced tools
React provider to handle website end user consent cookie storage based on segment integrations
@scaleway/cookie-consent
This package is an helper to handle cookie consents with Segment integrations. It will handle the cookie consent for each categories.
This package does not contain design element to display a cookie consent modal, it only handle the storage and the init of cookie consent in a React provider.
In order to use it, first you need to provide a context at the top level of your application
import { PropsWithChildren } from 'react'
const MyApp = ({ children }: PropsWithChildren) => {
return (
<CookieConsentProvider
isConsentRequired // Switch off consents if not defined (usefull for E2E testing)
essentialIntegrations={[]} // List of mandatory integrations
config={{
segment, // Segment configuration used to get dynamically the integration used
}}
// not required
cookiePrefix="_scw_rgpd" // default value
consentMaxAge={13 * 30 * 24 * 60 * 60} // default value (appx 13 months)
consentAdvertisingMaxAge={6 * 30 * 24 * 60 * 60} // default value (appx 6 months)
cookiesOptions={{ sameSite: 'strict', secure: true, path: '/' }} // default value
>
{children}
</CookieConsentProvider>
)
}
Then in your cookie modal component you could simply use exposed hook to get and modify consents
export function PanelConsent() {
const { saveConsent, categoriesConsent } = useCookieConsent()
const setAllConsents = ({
categoriesConsent,
value,
}: {
categoriesConsent: Partial<Consent>
value: boolean
}) =>
Object.keys(categoriesConsent).reduce(
(acc, category) => ({ ...acc, [category]: value }),
{},
)
const handleClick = (consentForAll: boolean) => () => {
saveConsent(setAllConsents({ categoriesConsent, value: consentForAll }))
}
const onAgreeAll = handleClick(true)
const onReject = handleClick(false)
return (
<div className={styles.consent}>
<div>Do you accept consents ?</div>
<div>
<Button onClick={onAgreeAll} autoFocus>
Accept
</Button>
<Button onClick={onReject}>Decline</Button>
</div>
</div>
)
}
As it's necessary now to have a consent management. https://segment.com/docs/privacy/consent-management/configure-consent-management/
you will have the possibility to add the SegmentConsentMiddleware, be aware that there is a dependency with SegmenttProvider.
flowchart TD
Z[Application boot] -..-> A
subgraph "Cookie Consent booting"
A[First user navigation in app] --> B{isConsentRequired}
B --> |false| C[do nothing with cookies]
B --> |true| D[Fetch segment integrations configuration]
D --> E[Generate hash of integration and define required consent categories depending on integration]
E -..->F[Set needConsent to true]
end
subgraph "Consent storage"
F -..-> | | G[/User saveConsent with categories/]
G --> H[Hash of integration is stored in _scw_rgpd_hash cookie with storage of 6 months]
G --> I[_scw_rgpd_$category$ cookie is stored for each accepted cookie consent category, 6 months for ad consent, 13 month for others]
H & I --> J[needConsent is set to false]
end
subgraph "User come back on website in futur (within cookie duration)"
J -..-> K[Application boot]
K -..-> L[Check value fo cookies _scw_rgpd_hash and _scw_rgpd_$categorie$]
L --> M[Load in context accepted categories]
end
subgraph "User come back after 6 months"
J -...-> N[Application boot]
N -..-> O[Check value fo cookies _scw_rgpd_hash and _scw_rgpd_$categorie$]
O --> B
end
$ cd packages/cookie-consent
$ pnpm build # Build the package
$ pnpm watch # Build the package and watch for changes
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
Product
Socket’s precomputed reachability slashes false positives by flagging up to 80% of vulnerabilities as irrelevant, with no setup and instant results.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.