All in One NextJS And NestJS Full Authentication Monorepo Project

[@contigen]

Hey! Everyone kindly like the video, it's the least we could do

[@SakuraDev]

Thank you so much 🙏. I really appreciate your support 💖

[@Uraniumoff]

@@SakuraDev Big thx

[@SakuraDev]

Thank you so much,💖

[@dreamsachiever212]

I wish we could like a video multiple times. I am glad to finally see videos getting many views as they deserve

[@htk0002]

Very comprehensive tutorial. The auth session management is definitely a complex topic but it was explained quite well. Kudos

[@PattySpicy]

This is another level of full stack authentication. you are the one and only that teaching the authentication concept from scratch which help me a lot to understand how it work I will learn this today. thank you!

[@SakuraDev]

Thank you so much, I am really glad to hear that

[@GemCart-cl4dy]

one of the greatest and unique tutorial on KZbin.

[@SakuraDev]

Thanks for your support 🙏. Your words mean a lot to me ❤️

[@KalidAhmed-w5r]

I wish I had known nestjs earlier! And thanks for the clear concise and complete tutorial. Subscribed.

[@SakuraDev]

Much appreciated!

[@prashlovessamosa]

Hey Sakura I have been playing around this stack totally loving it thanks for making this so comprehensive.

[@SakuraDev]

Hey Prashant 👋, yes it's a great stack. I try to upload more videos about it

[@AbdiwahabMohamed-n1n]

God bless you sakura, you cannot imagine how i am happy

[@SakuraDev]

Thank you so much ❤❤

[@dreamsachiever212]

Great. let's go! Thanks for this comprehensive course

[@SakuraDev]

Thanks for your support

[@Mr_MicDaniel]

Awesome video, i love how you're doing both signin with Email and Password, and also Oauth implementation Can share repo

[@SakuraDev]

Thank you so much. The repo is in the description now.

[@earlycareerwithhimanshu]

Sir please make video on multi tenants

[@SakuraDev]

This is good idea

[@AjaySingh-jz8qx]

More turborepo tutorials please😊

[@SakuraDev]

Yes I will do more of this type

[@pjborowiecki2577]

Wow! Amazing! Would love to see Redis implemented in there as well, for faster and more secure JWT handling

[@SakuraDev]

Thanks, that's a good idea

[@priyobrotokar]

Hi, I am trying to call the updateSession in the route handler which is called using fetch from a server component, but it does not set any cookie in the browser though the fetch response has set-cookie.

[@ferchamin1]

Fantastic video! Thank you very much!! I have a question: why do you handle the session and the cookie from Next instead of directly from the API?

[@SakuraDev]

Good Point! It's because we use JWT based auth in the backend side, so we need to send JWTs and user data including the role of the user to the frontend. so we keep these data in session in the frontend. If we had used the session based in the BACKEND side, we wouldn't have needed to setup the session in the NextJS side, but this also raise some problems because every time we need the user data (i.e. role of the user), we would need to call backend APIs to get them. Hope that make sense to you. 💖🖐🏻

[@alvesbernardino]

Sakura, great work, I've done almost every thing I've even cloned your code, can't get updateTokens to work, when I log the cookie when updateTokens is called by the api I always get undefined, any lights here? Thanks, still a fantastic job.

[@SakuraDev]

Let me check

[@AfaDev36]

Yess I have the same issue, I even doubted my code and went ahead and tested the original code project repo, and it gave me the same issue, the refresh-token mechanism is not working. I've tested the API using postman and it worked just fine, so I don't thinks there is something wrong with the backend, I think it has something to do with the cookies() and updateTokens function. Please @SakuraDev if you solved this push it to the github repo Thank you a lot for this awesome tutorial!!!

[@yudhiguntara3157]

this is what I'm looking for. thanks dude!

[@SakuraDev]

I am really glad it was helpful for you

[@quantran4704]

This is really good and detail video, thank you.

[@SakuraDev]

Thank you so much 🙏. I'm really happy that you like it. Thanks for your comment

[@wellingtonbarbosa9046]

I loved the video! But something is bothering me. How can i access this user data from a CSR component once cookies are only acessible from server? I've tried to acess this data using a server action, but server actions give no return for CSR components. Can you explain it?

[@wellingtonbarbosa9046]

One more thing. It would be great if you give us a public github repo of the developed project in video description. It helps a lot as a reference material. One more time, thanks for the video!

[@SakuraDev]

You can read the cookie in the parent SSR component and then pass it to the CSR client component or you can put it in a react context

[@SakuraDev]

I will add it in the description

[@osarolawani3739]

with the schema we have, are we to make a migration instead of an introspection after putting the schema in the schema.prisma file?

[@SakuraDev]

Yes you need to do a migration

[@franciscojosereyes9310]

Wow! Great video friend! Could you make some video about the usage of user related API keys generation and how to integrate with a seed SaaS project? Thanks again!

[@SakuraDev]

Thanks, That's a good idea

[@vihangasilva7947]

Can you explain how to get Prisma Schema please, because we cannot introspec database as you did in the 11:12

[@SakuraDev]

The repo is in the description now.

[@ChibuezeLawsonLoctech]

@@SakuraDev The api repo is found on the description kindly assist

[@ChibuezeLawsonLoctech]

on the github repo, the api founder is not opening kindly assist

[@SakuraDev]

@@ChibuezeLawsonLoctech Hi, The repo link is replaced with a new one in which I've fixed the issue. now you can access the api dir in the new repo

[@rntbuilds]

Thanks. I think i like your content already. Tackling Google auth from the server not client. 👍

[@SakuraDev]

Thanks 🙏💖

[@codernerd7076]

awesome! now I just need find a way to deploy it to vercel or something, not sure if it works with turborepo :(

[@SakuraDev]

I will come up with a solution

[@DEVKushal-t8b]

Hey I am in my final year thank you for this i hope making more content like this thank you so much

[@SakuraDev]

You got this!

[@PattySpicy]

how can i setup verify email, forget password and OTP for any confirmation. i can do with NestJS but totally confuse how to connect this functionality NestJS with NextJS

[@SakuraDev]

I should add a video for that. I will do that

[@bland-username]

Hats off to you, sir

[@SakuraDev]

Thank you so much! 🙏 I'm really glad you enjoyed the video. Your support means a lot-more content is on the way! 💻

[@irawan953]

Thanks for the amazing tutorial

[@SakuraDev]

Thanks 🙏❤️

[@joelveloz7312]

How would the process of maintaining sessions from the database be?

[@hugues8839]

Thank you . I need this course but can you add a deploy repo on vercel

[@SakuraDev]

I will create a video soon that

[@vihangasilva7947]

In authFetch function which you created to send authenticated requests to backend, I faced an error when I refresh the tokens, In my project cookies are not fetching at all in route handlers or server actions. Because of that always triggering request to backend for get new tokens and not modifiying the cookie in browser. How can I resolve this problem ?

[@SakuraDev]

What is the error message?

[@vihangasilva7947]

@@SakuraDev According to your solution in video it seems working fine (without showing error), But every time when I send request to backend via authFetch() function after accessToken expired, its calling to update-tokens route handler. Because cookie is not modifying at all in route handler.

[@SakuraDev]

@vihangasilva7947 yeah, it should call the update-token route handler, because we only can update the cookie inside a route handler or a server action which is called by a client form

[@hughqing2628]

excatly what I am looking for!!!

[@SakuraDev]

I am really glad it was helpful for you

[@max_wbw]

Great video! Just one question, how to make a monorepo deploy on Vercel for example? Just like a normal Next.js application?

[@SakuraDev]

I will create a video for deploying the Monorepo

[@Jonazao]

@@SakuraDev Looking forward for this!

[@franciscojosereyes9310]

Another question is where should we validate the expiration time for the JWT because we are only validating the user.id is from one stored user in DB. Should be validated also the expirateIn in the JWT process?

[@SakuraDev]

Hi, 👋 . It's done by local strategy under the hood

[@franciscojosereyes9310]

@@SakuraDev Yeah, my fault. Just was using another env file with a new expiration time, then was not affecting to the test. Thank you so much for your quick reply.🙂

[@SakuraDev]

@@franciscojosereyes9310 💖🙏

[@anthonymichael2614]

thanks so much for this tutorial it is more than helpful🥰

[@SakuraDev]

Thank you so much

[@鍾豪方]

Hi Thanks for this amazing video. I have a question. How can I use the authFetch in client component? since we can‘t get session from client side in JavaScript, then how can we call server in client components? ty

[@SakuraDev]

To use authFetch in a client component, you need to get the session from the server-side first and then pass it to the client. This ensures secure handling of the session data. I'll be covering this in more detail soon-stay tuned!

[@SakuraDev]

Thanks for your comment btw

[@codeagency]

Do you have a version where prisma is replace with drizzleorm? Or maybe a followup video that shows which parts relevant and what changes for drizzleorm?

[@SakuraDev]

I should add a video replacing drizzle orm with prisma

[@codeagency]

@@SakuraDev thank you 🙏

[@owenn602]

Please make more videos using Next and Nest torgether like this

[@SakuraDev]

I will do that

[@franciscojosereyes9310]

Hi friend again, one question, if after logout I try to use the previous accessToken still valid before expired, it will be valid although we logout before. Is there any option to revoke also access tokens? Thanks in advance.

[@SakuraDev]

You can use the same approach we used in refresh Token invalidation. Or you can use a short lifespan access token.

[@franciscojosereyes9310]

@@SakuraDev Great, and thank you so much again for your quick reply. Have a great end of weekend and next week. Waiting for the next tutorial 😀

[@SakuraDev]

@franciscojosereyes9310 Thanks for your support. I am creating a long tutorial like this one.

[@franciscojosereyes9310]

@@SakuraDev Great my friend!!! 🙏 Always thank you for your great content and your professionality!

[@SakuraDev]

@@franciscojosereyes9310 Thank you so much ❤️🙏

[@thepromisebenard]

Nice video Sakura. Please what theme and font are you using for your code editor?

[@SakuraDev]

Hi, bearded theme and jetbrains font

[@_abrar_shahriar_]

I am very curious why for signout we use API instead of server function like SignIn and SignUp? And I'm also curious why in the video it works with next/link, but I (and not only) it only works with ? (2)

[@SakuraDev]

We use an API for signout because cookies can only be edited on APIs or server actions called by client components. In this case, since we want to remove the cookie in a server function, we can’t directly remove it there. Instead, the API handles the secure removal of the cookie.

[@jerrymalloney625]

it is possible for you sakura to leave the repo link so we can navigate the code?

[@SakuraDev]

Hey. The repo is in the description now.

[@lgiorgos1]

we have no access in api folder on the repo!

[@SakuraDev]

I just replaced the repo link. Please use the new repo link in the description.

[@osarolawani3739]

I can't access the api directory in the github repo

[@SakuraDev]

hey, Thanks for your feedback. The GitHub Repo Link is updated in the repo and the issue is fixed now. check the new link in the description please

[@Deus-lo-Vuilt]

Thank you very much, very interesting content

[@SakuraDev]

Thank you so much

[@tekne9947]

Is there any chance you could show something similar but using tRPC to communicate between NestJS and Next.js for end-to-end type safety?

[@SakuraDev]

That is a good idea 💡. The next one is about graphql and the next Will be on tRPC

[@inakiuy]

I am just starting to code and I was looking for a project like this to play around. I was very hard to find a project with separate front and back.

[@SakuraDev]

Hi, Thanks for your support, I will upload more projects like this.

[@inakiuy]

@@SakuraDev I saw a comment that the refresh token is not working. How would you resolve this issue? I found a lot of videos about implementing access and refresh tokens but none is resolving this in a context like this where the front is separate from the back. It a core functionalty in this video and it would be nice to see a working implementation. At least in the repo. great work! thx!

[@SakuraDev]

@@inakiuy The problem is that the cookie is not accessible in the api route. the solution is to use database session. in the next video I will explain that

[@hooyah]

it is ok to encrypt all (access,refresh toen) cuz token can be decrypt so easy, if attacker steal our session token, they can have access directly to backend. and 1 more. if we store session in http only secure samesite lax, Are we confident that nothing can be stolen?

[@SakuraDev]

You're right! Encrypting tokens is important, but if an attacker gains access to the session, they can still compromise the backend. Storing session in httpOnly and SameSite=Lax helps improve security, but it’s always recommended to combine it with other security measures like proper token validation and secure storage practices. While it reduces risk, nothing is entirely foolproof, so continuous monitoring and securing the entire system are crucial.

[@hooyah]

@SakuraDev okay i got it. thanks. i have already encrypted session token wit jose library. many thanks for your help 🙏

[@viniciuscosta7202]

I have a problem when users logout and go to the /api/auth/signout, the route redirects the user to the signin page. But the header still shows the user name. It needs to refresh the page to render the header correctly.

[@SakuraDev]

Use tag instead of for sign out

[@viniciuscosta7202]

@@SakuraDev yeah. it worked. Thanks! ❤

[@lapat2310]

@@SakuraDev Hi, helpful video, thank you. I am very curious why for signout we use API instead of server function like SignIn and SignUp? And I'm also curious why in the video it works with next/link, but I (and not only) it only works with ?

[@lapat2310]

@@SakuraDev I have tested this with the SignOu server function and it works fine without refreshing the page, what are the disadvantages of this solution?

[@praveenkumarsingh3079]

This works fine, but i am facing one issue with this is when i am refreshing the token i am not able to update it in session. So accesstoken and refresh token remains the old one even after getting from the refreshToken api. Any idea how can i solve this?

[@SakuraDev]

Thanks for bringing this up! I actually found this issue myself after uploading the video. For now, the only solution I've found is using session databases. I'm still researching a fix for cookie-based sessions, and once I find it, I'll upload an updated solution. Stay tuned!

[@afdhaliapreto7703]

@@SakuraDev how about using next-auth, i do for all my projects with next js as frontend. with next auth you can removing controller for google OAuth, next-auth will do it for all of the rest.... in nest js, you just handle token and refresh token. pass them to next-auth, it will do all for all the rest...

[@afdhaliapreto7703]

@@SakuraDev Authentication Flow Between Next.js (Next-Auth) and NestJS Backend Initial Authentication: User submits login credentials through Next.js frontend Next-Auth forwards these credentials to NestJS backend (including Google Oauth if succeded) Backend validates and generates both access & refresh tokens Tokens are stored in database for history tracking Tokens are returned to Next-Auth Session Management: Nexr-auth will handle it on just client side Token Refresh Mechanism: Next-Auth monitors token expiration When access token expires: Next-Auth sends refresh token to backend Backend validates refresh token against database Backend generates new token pair New tokens are updated in database New tokens are returned to Next-Auth Next-Auth updates its session Logout Process: User initiates logout Next-Auth clears session Backend removes tokens from database All active sessions are invalidated Security Measures: Tokens are stored with expiration timestamps Expired tokens are automatically cleaned from database Each token pair is unique per login session Refresh tokens are single-use Token revocation is possible through database

[@SakuraDev]

@@afdhaliapreto7703 It's is a great choice. But if you want to handle OAuth in nestJs, we can't create a session in Next-Auth upon a successful sign in with OAuth in Nestjs. Do you have a solution for that?

[@lamhoang6198]

the project looks decent. But i think you need to increase the quality of the audio. I do need to increase my volumn to the maximum so that i can hear what you were saying on the video.

[@SakuraDev]

Thanks for your feedback 🙏

[@Next-Js]

I find this monorepo very interesting

[@SakuraDev]

Glad you find it interesting! Monorepos can be super powerful for managing projects efficiently. Let me know if you’d like to see more content or a deeper dive into this setup!

[@alejandrojoseurielessalced423]

el sistema de autenticacion, registro, rutas protegidas etc que manejas es muy extenso y tedioso, he visto otros que son más sencillos y concisos, sin embargo se te agradece sacar el tiempo para explicar esto

[@SakuraDev]

¡Gracias por tu comentario! Entiendo que el sistema puede parecer extenso. Si prefieres algo más sencillo, podrías probar con Firebase o Supabase, que simplifican mucho la autenticación. Si necesitas una versión más simple o explicación de algo, ¡avísame! 😊

[@prashlovessamosa]

i did not get the notfication thanks sakura please make some thing on multi tenancy.

[@SakuraDev]

Hey Prashant, I am doing some research for that and then I will create a video about it

[@prashlovessamosa]

I will try to build something with svelte nest js.

[@avaygc5646]

Can u create a e-commerece project in next js and nest js will really be helpful

[@SakuraDev]

The next video is a blog project with this stack. And the next one is going to be an E commerce project

[@danhcox]

​@@SakuraDev when will you finish your blog project? i really hope you will publish it soon sir

[@SakuraDev]

@danhcox It's almost finished. It will be published next week. Thanks for your patience 🙏

[@AdityaSharma-t3c]

how does this 'rafce' works to init a react code, which lib gets this, i want this too

[@SakuraDev]

just install react snippet extension

[@tuffstuffmedia]

such a great video

[@SakuraDev]

I appreciate you taking the time to watch!

[@alejandrojoseurielessalced423]

hay un error en la logica del accestoken y el refreshtoken, y es que una vez que se ingresa a la ruta protegida no deberian crearse nuevos tokens debido a que el refreshtoken deberia remplazar el asscestoken que en este caso solo dura 60 S, en cambio lo que se hace es crear dos tokens nuevos sin usar la configuracion del refreshtoken que esta hecho para que dure 7D, sin embargo esta logica que se usa aca solo sirve para una vez, porque cuando se intenta acceder a la ruta protegida por segunda vez(/auth/protected), como el refreshtoken no remplaza el accestoken, entonces el servidor da un "usuario no autorizado

[@SakuraDev]

I understand your concern about the logic of access and refresh tokens. I'll address this in detail in an upcoming video.

[@surendrawagle8341]

Yeah I faced same problem .please fix it

[@alejandrojoseurielessalced423]

@@SakuraDev hay que agregar la logica cuando el accesstoken expira

[@evasamarques]

Please, how to get Prisma Schema?

[@SakuraDev]

I will include it in the description

[@SakuraDev]

The repo is in the description now.

[@cardosoassuncao7565]

excellent!!!

[@SakuraDev]

Thank you so much

[@joelveloz7312]

Could you add a tutorial on how to add an OTP by email and the forgot password?

[@SakuraDev]

Yes. I will add it in the next video

[@Aufafkri]

I'm having trouble setting up the prism schema

[@SakuraDev]

The repo is in the description now.

[@KrisnoMukti]

where is the schema in the repo located?

[@idalopezcastro8211]

same question, I cant to find the schema file on github :(

[@SakuraDev]

Thanks for your feedback. the link of repo is updated and now you can access it. This is the link of the schema file: github.com/vahid-nejad/NestJS-NextJS-Authentication-Turborepo/blob/main/apps/api/prisma/schema.prisma

[@SakuraDev]

This is the link of the schema file: github.com/vahid-nejad/NestJS-NextJS-Authentication-Turborepo/blob/main/apps/api/prisma/schema.prisma

[@victormayowa7989]

Was so confused about the connection between the localstrategy and LocalAuthGuard.... I won't mind if someone clarify

[@SakuraDev]

Local auth guard is a ware which activates the local strategy

[@joelveloz7312]

How can I make sure that this whole process is safe?

[@SakuraDev]

it is recommended by the official documentation.

[@chanmyaemaung]

❤

[@SakuraDev]

Thanks 🙏

[@borooLIVE]

nice nice nice! thank you!

[@SakuraDev]

Thank you so much

[@thutanyan1381]

You should make like blog project using Nestjs and Nextjs or something frontend Reactjs

[@SakuraDev]

Yeah, that's a good idea. i am planning for that

[@katherinmumbunan9916]

HI, can you share the schema? Thanks

[@SakuraDev]

Hi, it's on the repo. Please check the description

[@Uraniumoff]

Hello, can you give an link to github Repository please !! ?

[@SakuraDev]

Hey, it's in the description

[@newgenico]

@@SakuraDev Hi. the api folder is a link. No access. Thanks

[@SakuraDev]

@@newgenico Thanks for your feedback. The repo link is updated now and I fixed the issue. this is the link to the new repo: github.com/vahid-nejad/NestJS-NextJS-Authentication-Turborepo you can also find it in the description

[@lingadurai5805]

Thank you so much

[@SakuraDev]

Thanks for your support ❣️

[@tinydev2683]

hey hey, thanks for the video 💛, could u share repo with source code?

[@SakuraDev]

Hey. Thanks. The repo is in the description now.

[@mtdesigner3933]

tnxs a lot❤only increase your voice volume plzz

[@SakuraDev]

Thanks for your feedback. I will do that

[@shree_divyansh]

this code doesn't work, the refresh token functionality doesn't work

[@SakuraDev]

Yeah I found that cookie Is not accessible in the API route. The ultimate solution is a database session. although I am searching for a solution with a cookie session and if I find one, I will fix it in the repo and also mention it in the next video. Thanks for bringing that to my attention.

[@shree_divyansh]

@@SakuraDev I figured out a working solution for my app, I'm using session cookies. Using nextjs middleware I'm updating the session. Its difficult to explain the whole process here.

[@SakuraDev]

@@shree_divyansh That's great. Can you share a code example?

[@DatNguyen-wb8jr]

@@shree_divyansh can u share the github repo for me

[@shree_divyansh]

@@DatNguyen-wb8jr Hey I can't share the github repo, working on some business app, can share the few code and logic explanation so that you all can also implement it

[@AydinVivik]

It's a great approach, but I wondered why you never prefer session-based auth? All the examples in your videos are token-based.

[@SakuraDev]

Yeah! I should try this

[@imkir4n]

1:17:00

[@imkir4n]

very well explained. W Sakura Dev

[@SakuraDev]

@imkir4n Thanks for your support ❤️

[@imkir4n]

@@SakuraDev I successfully implemented this approach, and it worked wonderfully. Honestly, I was searching for a solid pattern to handle authentication without relying on NextAuth or any third-party providers, so we could manage it through our own separate backend.

[@SakuraDev]

I am glad it was helpful for you. And I personally prefer this approach

[@AtomicPixels]

We need social auth. That’s the only thing people struggle with. Email and pass were cooked decades ago already. Nothing new there.

[@SakuraDev]

Google authentication is included in this video.