Integrating Corbado components in Next.js via @corbado/react currently requires a wrapper file with the 'use client' directive on the top.
Most React libraries relying on client-side features like state have included that directive in their components so they don't require a wrapper and can just directly be imported into server component files.
I see special importance in PasskeyList and CorbadoProvider as they usually are used in server components.
Authentication related components are less important as they use client side logic (e.g. for routing) anyways most of the time and thus need to be put into a "use client" file anyways
TODOS
Here you must list all the TODOS using TODO checkboxes (markdown).
[ ] Include a "use client" directive on the top of each file containing exported components
Acceptance criteria
Here you must define the acceptance criteria of this issue (what has to work, what should the developer test and so on). Use TODO checkboxes (markdown).
[ ] PasskeyList has "use client" up top
[ ] CorbadoProvider has "use client" up top
[ ] Authentication components has "use client" up top
@lukaskratzel I checked after adding use client on the @corbado/react components. We still need to add use client on their wrappers in NextJS application.
Why
Integrating Corbado components in Next.js via @corbado/react currently requires a wrapper file with the 'use client' directive on the top. Most React libraries relying on client-side features like state have included that directive in their components so they don't require a wrapper and can just directly be imported into server component files.
I see special importance in PasskeyList and CorbadoProvider as they usually are used in server components. Authentication related components are less important as they use client side logic (e.g. for routing) anyways most of the time and thus need to be put into a "use client" file anyways
TODOS
Here you must list all the TODOS using TODO checkboxes (markdown).
Acceptance criteria
Here you must define the acceptance criteria of this issue (what has to work, what should the developer test and so on). Use TODO checkboxes (markdown).