nextauthjs
Documentation Gap for `auth()` Method in Next-Auth
What is the improvement or update you wish to see?
I've encountered a lack of documentation regarding the auth() method within the Auth.js for Next-Auth. The specific section can be referenced here: Auth.js Method Documentation.
Is there any context that might help us understand?
Context and Problem
In implementing a social login feature (Google OAuth) on the top navigation bar of a client component, I utilized the useSession() hook to verify user authentication status. However, this approach introduced significant latency issues, with scripts like layout.js and main.js taking upwards of 20 seconds to load. This delay also affects the rendering of the social login button and subsequent content loading.
Upon investigating potential authentication methods suitable for client components, I suspect that the issue might stem from how useSession() is implemented within the Next.js app router. I am seeking clarification on why useSession() may be causing such delays and detailed guidance on the correct usage of the auth() method in client components.
Suggested Improvement
It would be beneficial for the Next-Auth documentation to include:
Detailed examples and use cases for the auth() method, especially in scenarios involving client components.
Explanation of potential performance impacts when using methods like useSession() and best practices to mitigate such issues.
Thank you for considering this request to enhance the Next-Auth documentation. I believe these additions will greatly assist developers in implementing efficient and effective authentication strategies in their Next.js applications.
Does the docs page already exist? Please link to it.
No response
Hey thanks for pointing this out! We've added some copy regarding client components, but nothing specifically regarding useSession() performance implications, I think thats a bit too "in the woods" for a general docs site. What were you picturing?
@ndom91
Thank you for your quick response and for considering the addition to the documentation!
To clarify, my primary concern stems from significant loading delays experienced when using the useSession() hook within client components. Specifically, when implementing Google OAuth on the top navigation bar, the script execution times for layout.js and main.js were noticeably prolonged, taking over 20 seconds to complete. This resulted not only in a delayed appearance of the social login button but also impacted the overall loading time for other page content.
If more specific background on the latency problem would be helpful, I am prepared to provide captures or code snippets that illustrate the issue in more detail.
An example or a best practice guide on optimizing useSession() usage, or alternatives for such scenarios, could greatly aid developers in enhancing user experience and application performance.
Thank you again for your attention to this matter, and I look forward to seeing how the documentation evolves to help developers manage these challenges more effectively.
To clarify, my primary concern stems from significant loading delays experienced when using the useSession() hook within client components. Specifically, when implementing Google OAuth on the top navigation bar, the script execution times for layout.js and main.js were noticeably prolonged, taking over 20 seconds to complete.
This is unexpected, and would need a bug report with a reproduction for further investigation. There is nothing magical about useSession, it's a simple fetch call to the /api/auth/session endpoint.
I cannot decide if the above issue is both dev and prod or only dev, but you might be pulling in some big dependencies that slows down compilation during development.
auth() is not meant for client components, so there is nothing to document on that part.
If you encounter slowdowns using useSession, please open a new issue with your code, so we can help you investigate.
