Component-level authentication

[ibagov]

Is there a way to authenticate client-side components at the component level, as opposed to the route level?

I have a modal form in my Next app which can be opened from almost any route, however the form itself is not associated with a specific route. Can I ensure that only authorized users are able to access it? Obviously, using the AuthKitMiddleware is not applicable in this scenario.

[PaulAsjes]

If you're using server components, then calling withAuth within your component will give you either the user object or null if the user isn't authenticated. From there you should be able to either render a logged-out view or force the user to sign in (which you can also do by passing in ensureSignedIn: true to the withAuth call.

We're currently thinking about adding a way to do the above in a client component. Let me know if that helps!

[ibagov]

Understood, thanks for the reply @PaulAsjes . So if I understand correctly, it's currently not possible to solve my problem using authkit-nextjs.

Do you think it make sense to try using workos-node for this use case?

[PaulAsjes]

You can if you're using a server component with withAuth. If you're using a client component then you can't just yet, but I'm currently working on a client side solution to getting auth. Hoping to have it released sometime next week.

[ibagov]

Got it, thanks and looking forward to the solution! :)

[sergesteban]

You can if you're using a server component with withAuth. If you're using a client component then you can't just yet, but I'm currently working on a client side solution to getting auth. Hoping to have it released sometime next week.

I also faced the same issue while using auth on component-level, and I ended creating an extra context so I could make use of it. That felt redundant, tho I am glad to noticed the changes on #147 @PaulAsjes thanks

looking forward to it
cheers