#NextJS App Dir: Authentication using next-auth

4 messages · Page 1 of 1 (latest)

dusky galleon
#

I have only found one guide so far on how to use next-auth with the NextJS App Dir version (https://github.com/balazsorban44/nextjs-13-next-auth-app). This guide displays a header on the main page where it's a butt that let you sign in. However, I need the authentication page to be upfront in my SPA web app.

I'd really appreciate some help here on how to achieve this (how should the app structure look like, do I need to create a new page.jsx, etc).

boreal notch
#

You can use SessionProvider in app/layout.jsx

dusky galleon
#

Thank you. I get the following error when I add "use client" to the layout.jsx:
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Any idea why, or how to fix it?

cyan urchin
#

Sounds like one of the children is a server component, server components can only be put inside other server components. Source: https://beta.nextjs.org/docs/rendering/server-and-client-components#importing-server-components-into-client-components
So you need to put the 'use client' directive in all child components.

But, you should also look in to if you actually need to make this component a client component, maybe you can use getServerSession() instead: https://next-auth.js.org/configuration/nextjs#getserversession