NextJS with Auth0: Choose Single Page App or NextJS integration?

1 replies
Last updated: Mar 20, 2021
I'm also thinking of using Auth0 to authenticate the users, in Auth0, they have something for single page app (react application) and something that's for Traditional applications. My sanity.io template uses NextJS which is also a react application, do I chose the Auth0's Single Page App integration (for React) or Auth0's NextJS integration ? I'm a bit lost here
AI Update

I appreciate the question, but this is actually more of an Auth0/Next.js architecture question than a Sanity-specific one. Since you're asking specifically about which Auth0 SDK to use for your Next.js application, you'd get better guidance from the Auth0 community or Next.js forums where they can dive deep into the differences between their SPA SDK and Next.js SDK.

That said, I can briefly point you in the right direction: for Next.js applications, you should use Auth0's Next.js SDK (@auth0/nextjs-auth0) and create a "Regular Web Application" in Auth0's dashboard, not the SPA integration. This is because Next.js has server-side capabilities (API routes, server components, middleware) that the Next.js SDK is designed to leverage.

Where this connects to Sanity: Once you have Auth0 set up in your Next.js app, you might want to integrate it with Sanity in a few ways:

  • Securing content access: You can use your Auth0 user data to implement custom authorization logic when querying Sanity content from your Next.js app
  • Token-based API access: If you're using API tokens with custom permissions, you might combine Auth0 authentication with Sanity's token-based access control
  • Securing Sanity Studio: If you need to add enterprise SSO to your Studio itself, Sanity offers SAML SSO (Enterprise plan) for organization-level access control

For the core Auth0 SDK selection question though, I'd recommend checking Auth0's official Next.js documentation or asking in their community forums for the most detailed guidance specific to their SDKs.

Show original thread
1 reply
I'm using this for firebase auth in a next app now
https://www.npmjs.com/package/next-firebase-auth Turns out is in a beta and I am an idiot for using it, but I did ask for some help on the nextjs discord chats and many people recommended NextAuth.js

https://next-auth.js.org/
It features integration with Auth0 and is made for nextjs

NextAuth.js docs tells us
"Configure your application in Auth0 as a 'Regular Web Application' (not a 'Single Page App')."
https://next-auth.js.org/providers/auth0
I assume that you can configure it to be SPA, but then I think you loose most of the server side functionality for the nextjs app logged inn pages

If you are using the nextjs-auth+ package you should also set it as a regular app
"Create a Regular Web Application in the 
Auth0 Dashboard  and configure the following URLs for your application under Application URIs:" - https://auth0.com/blog/introducing-the-auth0-next-js-sdk/
if you are gong to do everything client side and have no need for anything server side you can use the SPA option and the auth0-react package.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?