Use Lucia Auth in Client Side - Next 14, Lucia Auth, Typescript

In this video I've showed how we can use Lucia Auth in the client side. It's very easy to setup.
You can give it a like and subscribe to channel if you found this helpful.
You can find the source code inside this repository, lucia-client-side branch.
github.com/ugurkellecioglu/ne...

[@codernerd7076]

Don't do this, it will make every single page dynamic, and you will lose the benefits of static rendering, use an API route to check auth...

[@ugurcodes]

Can you explain a little bit more? I'd like to learn. why would it make other pages dynamic? is it because we pass server components into a client side component? If this is your point, that is not how it works. We can pass server components inside client components as children and they will still rendered in the server. here you can actually see the source code of the dashboard that is rendered in the server: ibb.co/xzzbHbb as you can see initial user is there but Client user data is missing it's because it didn't rendered in the server. If is there a thing I miss, I'd like to learn more and make a video about it, Thanks, Ugur

[@codernerd7076]

@ugurcodes No it makes the page dynamic because you using the cookie function, you can see it if you use the next build command the pages are all rendered dynamic because you're requesting the cookie in the root layout and Next.js will rerender the pages on every request. That is why it's best to use an API route if you need the user info in something like a header and the rest of the page is static content like a front page it's ok for a dashboard. Next dynamic will still render it server-side but it will do it on every request, if that makes sense

[@ugurcodes]

@@codernerd7076 Ah, I totally forgot we've used cookies func in validateRequest function. Thank you! I will pin this comment so that people can see it

[@amelianceskymusic]

@@ugurcodes I'm sorry, but what exactly should we do to solve this problem?

[@en_kratia]

@@codernerd7076 can you please explain how to use API route to get cookies? I am searching for this for a long time.

[@rcpro81]

you are killing it on these Lucia videos!

[@ugurcodes]

Thanks a ton 🙏 Let me know if you want me to record a video about something you’d like to sed

[@kedywd]

amazing video

[@ugurcodes]

Thanks!!

[@cicikuscicikus2381]

Wow amazing video

[@lovrozagar3729]

Please do a Lucia Facebook OAuth guide 🙏

[@xico6814]

now some role based protection page :D?

[@ugurcodes]

Here you go! kzbin.info/www/bejne/bnKZqId9et5_jqc

[@a7kerkh]

there is security issue, someone can still cookies and send scrf request to server then get user data

[@codelivewithme]

so we must should do auth in middleware

[@mrfirstname578]

can i use lucia auth with other backend like php, phyton

[@ugurcodes]

No, unfortunately you can't. If you are using a framework that supports SSR such as Next JS, you can handle session management inside server side though. Then when you make a request to your separate backend (php, python etc.), you could include sessionId as a header and check if this session exists in the database if so continue your operation.

[@mrfirstname578]

@@ugurcodes oke thanks . how about can we add column like user agent or device id in table session . can we check in api if user agent or device id if not same they can not access 401 Unauthorized in api

[@nasko235679]

Neither a context provider nor a useEffect is a safe way to implement auth logic. Auth logic on the client is generally a horrible idea. When using something that doesn't work with next middleware like lucia the best solution is to have all protected pages be server components by default and do auth checks there and just import client components inside those server component pages.

[@jean-claude-van-debug]

Why do people like to say what's good and what's bad without any context or explanation. Can you explain why "Auth logic on the client is generally a horrible idea", and how the hell did we make all those SPA's before nextjs and similar frameworks came out if that is the case?