Theo's Typesafe Cult•2y ago

Build a custom provider component nextjs appdir

Hello. I want to make a react component which when passes as a parent to another, the child will automatically have a certain prop I want to pass. e.g The ProvideAuth component

<ProvideAuth>
<HomePage />
</ProvideAuth>

<ProvideAuth>
<HomePage />
</ProvideAuth>

<ProvideAuth>
<Profile />
</ProvideAuth>

<ProvideAuth>
<Profile />
</ProvideAuth>

The ProvideAuth (server) component would be responsible for fetching the user and authenticating the user at the same time, it passes the user data(if found) to both the HomePage and the Profile component. So I would be able to do this in the Homepage component

'use client'

function HomePage({user}){
return <div> Hello {user.name}</div>

}

'use client'

function HomePage({user}){
return <div> Hello {user.name}</div>

}

1 Reply

bakdaddy•2y ago

if children are client components - you can use react context with a hook to retrieve the needed info https://react.dev/learn/passing-data-deeply-with-context i'm pretty sure that's what nextauth is doing behind the scenes actually after some searching, here's what I found https://nextjs.org/docs/getting-started/react-essentials#sharing-data-between-server-components https://stackoverflow.com/questions/74311376/using-react-context-with-nextjs13-server-side-components

Gaming

Programming

Build a custom provider component nextjs appdir