Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Implementing paywalled content with Sanity and Next.js

22 replies
Last updated: Aug 24, 2021
Hi, anyone here has implemented paywalled content with Sanity+Next.js? I am thinking where certain document fields would need an access token, otherwise the query would return an Access Denied or similar? Is it possible to protect parts of the document like this?
Aug 24, 2021, 11:52 AM
I’d go with SSR. Secure the route and if the user has access you show the page, otherwise access denied. Make the Sanity dataset private so you can only call it from a server using the secret key.
Aug 24, 2021, 12:02 PM
Problem is not ALL documents are protected, there are fully public ones, and it cannot be inferred from the url
Aug 24, 2021, 12:03 PM
You can still have unprotected content in the dataset, but you’ll have to either SSR or statically generate it since the whole dataset is protected.
Aug 24, 2021, 12:03 PM
(so I couldn't do a split in
pages
Aug 24, 2021, 12:04 PM
There has to be some indicator what content is protected and what isn’t. On the document itself I presume
Aug 24, 2021, 12:04 PM
Sounds like you’ll have to SSR the whole site, or at least split out any paths that might be protected and SSR those.
Aug 24, 2021, 12:05 PM
yeah, don't have that option... 😵 Currently we have our own API (graphql) where we can solve this, but it looks like something sanity cannot handle then? 🤔
Aug 24, 2021, 12:06 PM
(we use getStaticProps to render public content, and render the protected parts if there is any on the client after user is logged in)
Aug 24, 2021, 12:07 PM
I guess we could maybe proxy requests through an api route and have the whole dataset protected, then we could do the authorization ourselves. 🤔 feels a bit hacky, but might work
Aug 24, 2021, 12:08 PM
Probably not the way you were looking for. I wouldn’t use
getStaticProps
since it will still render the content and the only protection you have then is client side which can be circumventedProbably not exactly the way you want it.
Aug 24, 2021, 12:08 PM
The proxy solution is what I meant
Aug 24, 2021, 12:09 PM
(getStaticProps filters out protected content before sent to client. 😉)
Aug 24, 2021, 12:09 PM
You mean you don’t render protected routes?
Aug 24, 2021, 12:10 PM
we don't have fully protected routes. we have either public ones, or mixed ones
Aug 24, 2021, 12:10 PM
in getStaticProps, we can check if the whole document is public, in that case, we return all the data and it will be statically rendered. otherwise we filter out the protected content and fetch it clientside after the user has logged in. if they aren't, we show a paywall over the small public part
Aug 24, 2021, 12:11 PM
I see. Yeah, that might be how I’d do it then. Static render your routes with all public content. Any protected content is filtered out and then proxy via your own API from the client to get the content the user is allowed to view.
Aug 24, 2021, 12:11 PM
means an extra trip to the api route, but I guess there is no support for field level auth in Sanity (yet?)
Aug 24, 2021, 12:12 PM
It doesn’t sound hacky to me, but I’m used to binding multiple external services together and protect some content from one system by auth from another 😅
Aug 24, 2021, 12:13 PM
There might be support for it on enterprise 🤷‍♂️
Aug 24, 2021, 12:15 PM
Yeah, maybe not hacky, more like inconvenient. Not hard to implement or anything. Thank you anyway!
Aug 24, 2021, 12:15 PM
Haha yeah I suppose it is, I guess I’m just so used to these kinds of solutions I don’t even think about it 😅
Aug 24, 2021, 12:16 PM
it would be awesome if sanity supported role-based access fields out of the box . might open a feature request. 🤔
Aug 24, 2021, 12:17 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?