Implementing paywalled content with Sanity and Next.js

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?

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.

Problem is not ALL documents are protected, there are fully public ones, and it cannot be inferred from the url

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.

(so I couldn't do a split in

pages

There has to be some indicator what content is protected and what isn’t. On the document itself I presume

Sounds like you’ll have to SSR the whole site, or at least split out any paths that might be protected and SSR those.

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? 🤔

(we use getStaticProps to render public content, and render the protected parts if there is any on the client after user is logged in)

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

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.

The proxy solution is what I meant

(getStaticProps filters out protected content before sent to client. 😉)

You mean you don’t render protected routes?

we don't have fully protected routes. we have either public ones, or mixed ones

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

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.

means an extra trip to the api route, but I guess there is no support for field level auth in Sanity (yet?)

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 😅

There might be support for it on enterprise 🤷‍♂️

Yeah, maybe not hacky, more like inconvenient. Not hard to implement or anything. Thank you anyway!

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 😅

it would be awesome if sanity supported role-based access fields out of the box . might open a feature request. 🤔