Can’t we avoid having an auth token on the client by using auth code flow in serverless functions?
This topic was automatically closed 27 days after the last reply. New replies are no longer allowed.
I am a little lost too about the serverless functions.
Do we need to use Server side rendering to use the package @auth0/nextjs-auth0 ?
I have a NextJS application using few pages rendered by static generation (3 static pages and a blog) and then few pages which need to be guarded by Auth0.
I want to keep using static generation, since all my data is fetched from an external API, but it seems that using NextJS Api routes, I can keep my API external, static generation and use your package.
Did I miss something ? Or your package is more adapted for Server Side Rendering ? Thanks for your time.
1 Like
Hi @vdecaux83, welcome to the Auth0 community.
Let me try to answer your questions. The auth0/nextjs-auth0 package works both with SSR and CSR, including static generation. However, there are some scenarios under which using auth0/auth0-react is preferable, those are:
- You are using Static HTML Export with Next.js.
- You do not need to access user data during server-side rendering.
- You want to get the access token and call external API’s directly from the frontend layer rather than using Next.js API routes as a proxy to call external APIs.
How you approach your NextJS application, will depend a bit on your specific needs.
As you mentioned, you can use static site generation and make subsequent API calls from the FE. Additionally, you can protect statically generated pages (though the page would load first and then a redirect will be performed if there is no valid session). You can also opt to use SSR to protect pages.
Examples of all those scenarios can be found here.
If you want to access Auth0 from the client, make sure you import hooks, functions, and components from @auth0/nextjs-auth0/client.
Please let me know if you need some more clarification, or if you send me some more details on specific use cases you want to cover, I can help you with finding the right examples.
Thanks,
Juan
2 Likes
First, thanks for this big clarification, indeed I found your introduction on the readme.md of the repository.
Now, I am just unclear with “who can do more, can do less”. Why would I use auth0-react when your package provides better abstraction and integration with NextJS ?
And about the CSR example with withPageAuthRequired, how it works exactly if using static generation ? I see it more like a middleware, but middlewares do not work with static generation.
Is it a kind of redirect using Javascript client side only ?
Thanks for your time, I just realize how powerful NextJS + Auth0 can be.
1 Like
Hi,
In general you should aim to use the NextJS SDK as it provides more complete functionality. Only under those scenarios listed on the README (or which I listed above) you should go with the React specific framework.
withPageAuthRequired when imported from the client library, will perform a JS redirection using window.location object. When used on the server side, it will basically return from the server an HTTP redirection.
Great to hear you like the integration!
1 Like
I guess it’s more a question about NextJS rather than Auth0, since NextJS doesn’t really create a SPA, but we agree the NextJS SDK provides all abstractions and functions listed on the “preferable auth0-react list” ?
More over, I understand the NextJS SDK allows to store access_token in httpOnly cookies, which is better for security concerns.
Maybe it misses an example on how to protect an external API call without using NextJS Api Routes in the readme, because I understand it’s possible.
But because it needs the AUTH0_SECRET, it must be used on Server Side Rendering to not expose it, so it’s still unclear to me to how to use it with Static Generation… Sorry to bother you.
1 Like
Yes, NextJS is more the case of a web app, than it is an SPA.
And you are right, by default the SDK uses cookies to establish a session. Normally, if you need to call an external API, you would call your NextJS API, and in your API endpoint you’d call the external API, like it is explain in the docs here.
There have been discussions in the past about having access to the access token on the client side, however you should be very careful about handling that. You can read this response from Adam where he gives more details about this.
Hope that helps.
2 Likes