18. Quản lý Authentication trong Next.js. Điều mà ít người nói với bạn!

[@duocdev]

Việc dùng root layout để lấy cookie sẽ làm toàn bộ page trong app chúng ta chuyển thành dynamic rendering. Điều này đôi khi không hay lắm 😃. Nếu các bạn muốn fix vấn đề này thì hãy xem video 38 trong series này nhé: kzbin.info/www/bejne/kKaQh56fg7-Be9k 🎥 Mình đã có khóa Next.js Super trả phí: duthanhduoc.com/courses/nextjs-super 📕 Đây là link github khóa học Next.js Free, các bạn không cần phải submit email nữa: github.com/duthanhduoc/nextjs-free

[@B8Official]

Hay quá a. E xem rất nhiều video về Nextjs. Đa số họ toàn dạy fullstack rất khó hiểu trong khi hầu hết những người học lại làm việc với FE là chủ yếu. Giờ xem video của anh em mới hiểu về Nextjs nhiều hơn. Em hi vọng anh ngày càng ra nhiều video chất lượng như thế này hơn nữa ạ

[@duyphantan9529]

Phải chi em xem được video của anh sớm hơn. Thật sự em đã rất mệt mỏi khi bắt đầu với Next và tìm hiểu về phần Authentication này. NextAuth có thể gọi là rất thuận tiện cho việc implement Oauth nhưng với xác thực credential thì nó lại phức tạp hóa thật sự, nhất là những callback của nó cấu hình rất khó hiểu, tính linh động không cao. Cảm ơn anh vì video rất chất lượng ạ

[@xxxibiamkiet839]

mặc dù là free nhưng mà những video của anh rất là chất lượng và cực kì chi tiết luôn, cảm ơn anh vì những video bổ ích như thế này

[@hoainhannguyenphan5318]

Cảm ơn video của bạn nhiều lắm. Mình cũng đang bí chưa tìm được cách giải quyết về auth trong nextjs server component, thật may mắn khi thấy video của bạn. Mình đã giải quyết được vấn đề rồi :D :D

[@B8Official]

Khoá học này đúng là khác biệt. Free nhưng chất lượng hơn nhiều khoá udemy thật

[@anhminh3888]

Video này em thấy rất hay. Trc giờ em toàn check ở token ở client 😂

[@PhúTăngTự]

quá hay, sau khi xem 2 lần thì phải nói là quá là hay điiii, respect my teacher

[@duocdev]

Trong khóa có phí còn hay nữa 🤪

[@trananh4894]

video hay quá ạ, em cảm ơn anh rất nhiều, chúc anh nhiều sức khỏe và ra thêm nhiều video hướng dẫn cho lớp trẻ noi theo nữa anh nhé

[@duocdev]

cảm ơn em

[@hvd0706]

Học đến video này em thấy khá hợp phong cách dạy của anh, có lẽ em sẽ là học viên của anh sớm thôi xD

[@duocdev]

Hehe, nào ra khoá next có phí anh sẽ thông báo

[@gshoanganh]

Bạn ns hợp í mình quá, next-auth phức tạp và tùm lum ghê gớm

[@duocdev]

chính xác :v

[@HuyTran.DevBackEnd]

nextAuth học một hồi choáng váng cái đầu :((((

[@ThangVo-u7d]

Đúng thứ mình đang thắc mắc, cảm ơn bạn rất nhiều

[@MsHaTrang]

Ad làm lại bài này khi api server dùng accesstoken và cả refreshtoken nhé! Video này quá hay rồi nhưng sẽ còn hay hơn nhiều nhiều nữa nếu giải quyết được mong muốn kia!

[@duocdev]

Có trong series đó bạn. Xem các video sau sẽ thấy

[@MsHaTrang]

Cảm ơn ad, e đã đk kênh nhé 😊

[@OrionChocoboy]

Cái này có hướng dẫn ở trong tài liệu của NextJS mà nhỉ

[@geekfam_wap7515]

Trong trường hợp BE sử dụng cookies mode, thì 1 request từ Next server đến BE làm sao có thể xác thực được ạ?

[@duocdev]

Gắn cookie thủ công vào request á em, được mà

[@vanhungnguyen7543]

Cám ơn bạn làm video này. Mình tìm kiếm mãi toàn thấy hướng dẫn bằng NextAuth

[@duocdev]

Rất vui vì giúp đc bạn

[@HoangTruong-wu6tq]

a làm video về xử lý accesstoken và refreshtoken đi a

[@duocdev]

cái này khá dài, trong khóa có phí anh có nói á em

[@indiealucard]

bạn có bạn chung vơi anh Dao Vo không, thấy video của ổng :))

[@Dannynguyen.e-commerce]

Hóng sếp ra video setup axios intercepters config

[@duocdev]

Hiện tại thì k nên dùng axios với nextjs 14.

[@maicaotri3668]

@@duocdev vì sao ko nên dùng axios với nextjs 14 vậy anh?

[@tupham2856]

Anh Được cho em hỏi, nếu như login BE check authen dựa vào Authorization. Thì khi login ok thì BE trả về token mình vẫn sử lý như dưới được đúng ko ạ - Gọi ở next client: Ok vì có thể set vào LocalStorage - Gọi ở next server: Cũng ok vì có thể gọi qua next server api/auth để set Authorization ở header khi login thành công

[@duocdev]

Được em.

[@dandoan-zi4gn]

Để set token vào cookie thì cần phải có backend nữa phải không a? Nhưng nhiều khi mình không can thiệp được vào back end thì phải làm như nào ạ? A có thể làm 1 clip hướng dẫn cho em và mọi người được không ạ? Cảm ơn a nhiều ạ!

[@duocdev]

thì trên ví dụ của anh cũng nêu ra rồi đó em, Next.js server em có thể dùng để set token vào cookie theo domain của next.js đc mà. Anh có nêu 2 trường hợp Backend Server set cookie và không set cookie thì làm ntn rồi đó

[@mcofficial3128]

Lưu token vào trong context api ( trong đây context api là gì vậy ạ) a có thể ví dụ không ạ

[@duocdev]

là lưu vào state context đó em, em tìm useContext react là ra

[@KieuDiem-zp7es]

1:16:59 em xem chỗ này hoài mà khá khó hiểu . Sau khi relay 3 lần thì xem đã pass hihi. Chỗ đấy nghĩa là khi mode backend là set cookie thì backend sẽ tự set cookie cho Next client và Next client tiếp tục yêu cầu Next sever set cho tao thêm 1 cái cookie đi. Tổng cộng có 2 cái Cookie tại client đúng không anh. 😂❤❤❤

[@duocdev]

Đúng rồi em. Cookie nó được lưu theo domain

[@dwchau.254]

Tại sao cần tận 2 cái cookie thế bạn, mình tưởng 1 cái từ server là đủ rùi ?

[@dwchau.254]

à liệu có phải là client gọi đến server next để nó set-cookie Thì thằng server component mới lấy ra được cookie path= cái server nextjs Còn server conponent không lấy được cookie do server ngoài set-cookie (path= server ngoài) nhỉ

[@duocdev]

@@dwchau.254 bạn hiểu đúng vấn đề rồi đó.

[@dwchau.254]

Có phải server component là server, vậy nên khi vào 1 route là server component, thì client tự động đính kèm cookie ở trình duyệt để gửi lên server component (và chỉ gửi lên cookie với domain là domain của server compont đó, do client đã call đến api route để set-cookie trở lại nên nó sẽ có cookie domain là domain của server compoent ở browser), do đó ở server component hoặc api route, có thể dùng cookieStore = cookies() để lấy ra cookie đúng không ạ? bản chất cookie này là do client gửi lên, chứ không phải do server component hoặc api route truy cập vào cookie ở browser lấy ra đúng không anh

[@duocdev]

chính xác em nhé, em hiểu đúng bản chất r đó

[@ngocduongofficial290]

Anh ơi cho em hỏi là sao login thì sao k lưu luôn token vào localStorage để dùng token bên client mà phải dùng useContext để lưu token ạ.

[@duocdev]

Thực ra là em lưu local storage cũng k sao nhé. Chỉ là anh muốn client không dùng js để truy cập vào đc cái token thôi, tránh xss acctack. Em cứ xem hết series anh sẽ có đoạn anh chuyển sang local storage

[@trungminh549]

Hữu ích qá

[@namcao7718]

Thay vì dùng Router Handler để set cookie cho server Next thì sao ko dùng Server Action để login và gắn cookie luôn hả bạn

[@duocdev]

Bạn dùng cách nào cũng đc

[@ThanhNguyen-ub7vi]

Hi a, cho e hỏi chút là next sever và backend sever thì cả 2 thằng đều là server thì điểm khác nhau là gì giữa 2 thằng này để phân biệt được next sever và backend sever. Mong câu trả lời từ a. Em cảm ơn anh

[@duocdev]

Khi em vào cty, người ta cho em đảm nhận làm phần Front-End dự án bằng Next.js với API có sẵn của team C# .NET. Thì trong trường hợp này API C# .NET là Backend Server - cái này em không can thiệp được, còn Next.js Server là phần thuộc source code Next.js của em, em làm gì cũng đc

[@B8Official]

Anh ơi cho em hỏi là mấy cái api của em nó là public nhưng mà api đó chứa nhiều query params. Nên em phải chuyển nó thành server client component hết thì điều này có ảnh hưởng đến SEO nhiều không ạ

[@duocdev]

không em

[@uPhanBa]

hi vọng khi anh đọc được cmt này sẽ giải thích giúp em ạ, hoặc mọi người trả lời giúp em ạ: (em mới học nextjs), tại sao không code server ở next luôn ạ, sao lại tách ra có 1 server riêng rồi next-client gọi đến server => next-client nhận dữ liệu rồi => gọi next-server để set cookie, như vậy nó có chậm hơn không ? và liệu nếu như không có server kia, thì mình có thể setup next-server làm mọi việc mà không cần server node kia được không ạ

[@duyphantan9529]

Hi mình xin trả lời câu hỏi của bạn như sau nha: - Q: tại sao không code server ở next luôn ạ? => Vì mục đích chính của nextjs sinh ra là để giải quyết vấn đề cố hữu của react là SEO, nhưng sẽ có các tác vụ không cần sử dụng SEO ví dụ admin dashboard thì việc sử dụng CSR là điều hoàn ổn. - Q: Việc gọi lằng ngoằng qua lại giữa client và server có làm app bị chậm đi không ? => Sẽ có chậm vì phải thực hiện nhiều request. - Q: và liệu nếu như không có server kia, thì mình có thể setup next-server làm mọi việc mà không cần server node kia được không ạ? => Câu này mình chưa hiểu lắm nhưng có vẻ bạn đang nói đến không cần external server thì có thể biến next-server thành một BE luôn được không. Điều này là hoàn toàn được nhưng nên hạn chế vì làm code bị to ra khó bảo trì.

[@uPhanBa]

@@duyphantan9529 mình cảm ơn nha đúng cái mình cần ạ

[@nguyenduc3012]

khó hiểu quá b ơi b nói tóm tắt đi vào vấn đề vd như be trả vè token và quyền làm sao để bảo mật route và check quyền là dc rồi

[@duocdev]

phải biết nguyên lý trước rồi mới làm chứ bạn. Bạn hiểu React rồi thì mới thấy dễ đc

[@nguyenduc3012]

@@duocdev mình cũng code react rồi cũng đọc code dự án thực tế rồi b ơi

[@duocdev]

@@nguyenduc3012 Thật ra tóm gọn thì chỉ có Next.js có 2 môi trường là Server và Browser. Bạn chỉ cần lưu token vào cookie là dùng được cho môi trường server, còn muốn dùng cho môi trường client thì bạn có thể lưu thêm token vào localstorage (là thành 2 nơi) hoặc khi request web lần đầu tiên server nextjs nhận token từ cookie rồi set lại cho client vào 1 variable hoặc state nào đó là đc

[@ntaanh2084]

e thắc mắc tại sao không dùng nextserver làm trung gian luôn ạ

[@duocdev]

Trung gian 1 vài API thôi chứ trung gian hết mọi API làm gì em

[@nguyentienthanh2185]

vậy có cách nào tự động refresh-token mỗi khi access-token hết hạn trong nextjs không a nhỉ? e không muốn sử dụng thư viện

[@duocdev]

Trong khóa có phí của anh có 1 chương dành riêng cái này đó em. Khá dài nên không nói hết ở 1 video được. Tốt nhất là refresh trước khi nó hết hạn

[@nguyendinhsang7888]

Anh ơi cho e hỏi nếu cứ dùng token ở cookie thì trường hợp token hết hạn thì check info nó ra sao ạ

[@duocdev]

Lúc login em nhận về token, em decode token ra và lưu cái exp vào localstorage là được. Lúc này em có thể biết được khi nào token sắp hết hạn để refresh

[@quannguyenviet643]

Anh cho em hỏi server component em thấy vẫn có thể truy cập được cookie ở phía client mà ( trong phần rootLayout) vậy việc gì phải đi đường vòng ( nhận token từ server BE rồi chuyển token lên serve nextjs để set lại cho next client) thay vì ( nhận token từ server rồi sét thẳng cho cookie của next client) vậy a :v

[@duocdev]

Do cookie nó lưu theo domain đó em. Nếu domain api và nextjs cùng domain cha thì có thể lấy đc chứ khác thì sao mà lấy em? Em test thử anh nói có đúng k nhé

[@thevinhhuynh3333]

Nếu dùng với firebase thì cũng lấy token của firebase trả về lưu vào cookie như cách a phải k a

[@duocdev]

Đúng em, như nhau cả

[@phantrungkien3049]

giờ đăng nhập vào r mà e ko muốn mình truy cập vào được page login thì phải làm thế nào a

[@duocdev]

thì xem tiếp các video sau em. Dùng middleware đó

[@phantrungkien3049]

@@duocdev thanks a mong a ra thêm khoá nestjs free nữa

[@CulakeShop-xw5tl]

anh oi ngoai sessionToken thi em thay trong cookie con luu them ca mot field token cung luu token, cai nay tu dau ma ra a

[@duocdev]

Có thể từ 1 source code khác em đã chạy trước đó nó gán vào cookie của em từ trước

[@CulakeShop-xw5tl]

@@duocdev da em hieu roi em cam on anh

[@anhhoccoder5358]

em đang để chế độ mode_cookie = true mà sao nó không tự động set cookie khi mình gọi api từ component client vậy ạ. Lần đầu em gọi từ component client server có set cookie, nhưng khi gọi 1 api từ component client thì không tự động set cookie cho server để xác thực

[@duocdev]

có thể code server của em là code cũ, em pull lại code server mới từ repo anh rồi test lại thử

[@anhhoccoder5358]

@@duocdev Em pull lại code và đổi sang mode_cookie = true bị lỗi. Khi đăng nhận thì tự động đăng xuất luôn anh ạ. còn mode_cookie = false thì vẫn ok anh ạ

[@anhtu9290]

Cho em hỏi chỗ set sessionToken em có thể set cookie đó ở client component cũng được mà ? tại sao mình phải tạo 1 api để set

[@duocdev]

vì không thể set httpOnly cho cookie em

[@anhtu9290]

@@duocdev câu trả lời hợp lý quá a ơi

[@anhvuuc8693]

:/ Dùng next auth vẫn tiện hơn chứ nhỉ. Như này là đi làm tay rồi, tích hợp thêm GG login nữa còn thở nổi k? Viết cho người mới để hiểu flow thì được...

[@duyphantan9529]

Thêm GG Login thì dùng firebase vẫn theo flow này làm được nhe bạn. Tiện thì bạn cứ dùng, còn ở đây người ta đang đưa ra một giải pháp khác thay thế chứ không có gì cả

[@trieunguyentuan4589]

Trường hợp người dùng f5 lại mà api load chậm thì tên username hiển thị bị giật. Có cách nào tối ưu việc đó ko bạn

[@duocdev]

Do bạn gọi API ở client nên mới thế, chứ gọi ở server thì k bị đâu. Nếu muốn xịn hơn thì bạn lưu thông tin cơ bản người dùng ở local storage để không bị giật

[@atnguyentien7770]

anh ơi ví dụ mình tạo cookie ở trình duyệt không login mặc dù cookie sai người ta vẫn vào đc trang private mà không cần login thì có phải xử lý gì ko ạ

[@duocdev]

Kệ đi em, vào được chứ có fetch API đc đâu (vì cookie sai) => không thấy content + web bị lỗi ngay.

[@atnguyentien7770]

@@duocdev dạ vg ạ

[@vietuc8485]

Dạ a cho em hỏi em đang làm chức năng login , với layout header là hiển thị button login (Dialog) nếu chưa đăng nhập, nếu đăng nhập rồi thị sẽ hiển thị user name.Em đang dùng get profile ở serverside để lấy thông tin user . Em đang làm cách là khi login nhận được access token và lưu vào cookie sẽ đóng Dialog và trigger reload lại page để get profile . Có cách nào khác ngoài việc dùng reload không anh nhỉ ?

[@vietuc8485]

Có 1 cách nữa là quản lý state ở phía client để call get profile mà có vẻ cách này header change ở phía client hơi bị giật . Nên e đang muốn nó xử lý ở phía serverside thôi á anh. Mong anh chỉ giáo 🙏

[@duocdev]

Đơn giản thôi em, khi đăng nhập thành công thì em dùng router.refresh() là đươc. Nó sẽ tiến hành gọi lên server nextjs để re-render lại server component, fetch lại data mà không cần full page reload. Anh có dùng cách này ở video kzbin.info/www/bejne/bqW4gJSkhJaljtE

[@vietuc8485]

​@@duocdev Dạ hồi chiều em cũng xem qua video rồi thử và apply vào luôn rồi anh , cảm ơn anh nhé

[@hoaimiqng]

hay anh ơi

[@duocdev]

Cảm ơn em

[@hoangpham1132]

Bạn ơi, nếu mình lưu token vào cookie và truy xuất ở app provider như vậy thì cả project mình sẽ bị chuyển thành dynamic hết, với Nextjs thì mình ko mong muốn vậy, phần lớn các trang nên là Static, thì có cách nào giải quyết vấn đề này không? Cảm ơn b

[@duocdev]

Có, thay vì gọi cookies() ở rootlayout thì bạn chia ra 2 layout, 1 layout cho authentication page, 1 layout cho các public page. Layout cho authentication page bạn gọi cookies(), và các page thuộc layout này chắc chắn phải là dynamic rồi. Còn layout cho public page không cần gọi gì cả, bạn có thể setting thêm bớt gì đó tùy bạn. Mình sẽ làm 1 cái video về optimize cái này trong video nào đó cuối khóa free này

[@hoangpham1132]

@@duocdev ok thế thì tuyệt quá

[@hoangpham1132]

@@duocdev Này mình nghĩ không được do llayout chung đều có phần header chung hiển thị thông tin user dc lấy từ cookie. Không biết bạn thấy thế nào

[@vannghia512]

A ơi cho e hỏi phần authentication nếu sử dụng Next Server làm proxy thì mình có thể xử lí khi gọi api ở client thì thì tất cả request đều gọi lên Next Server và Next Server sẽ forward request đến Backend Server. Với api login thì sau khi Next Server gọi đến Backend Server sẽ nhận đc token sau đó sẽ lưu token vào Cookie. Với những api cần token thì chúng ta cũng sẽ xử lí ở Next Server bằng cách lấy token từ Cookie sau đó gắn vào Authorization rồi gửi đến Backend Server thì sẽ bỏ qua được phần sử dụng Context để lưu token ở client, a thấy cách này gọn hơn ko ạ.

[@duocdev]

không em, vì mỗi một API url ở backend server em lại khai báo 1 Route Handler ở Next.js Server. Quá khổ

[@vannghia512]

@@duocdev mình khai báo 1 dynamic routes để match với tất cả api thì sao a

[@duocdev]

@@vannghia512 nếu như thế thì cũng oke

[@vannghia512]

@@duocdev cảm ơn a đã giải đáp ạ

[@hungify]

​@@vannghia512 App router đâu còn support Catch all API routes đâu bạn nhỉ?

[@thuanphamvan6210]

hi anh, dạ cho em hỏi là làm theo như doc Nextjs và không báo lỗi gì cả nhưng vẫn không set được cookie á anh

[@thuanphamvan6210]

à với cả đoạn fetch("/api/...") này em phải dùng fetch("localhost/api/...") thì nó mới ăn, cho em hỏi cái này là sao vậy anh?

[@duocdev]

Có thể do logic set cookie em không đúng, em coi lại cú pháp thử nhé

[@duocdev]

đây em stackoverflow.com/questions/76905386/typeerror-fetch-failed-during-next-js-project-build

[@thuanphamvan6210]

@@duocdev cảm ơn câu trả lời của anh nhưng mà nó vẫn chưa đúng với em anh ạ :(( export async function POST(request: Request) { const res = await request.json(); const deviceId = res.deviceId; console.log('deviceId: ', deviceId); return new Response(null, { status: 200, headers: { "Set-Cookie": `deviceId=${deviceId}; Path=/;`, }, }); } code trên em log được deviceId nhưng mà vẫn không set được Cookie ạ

[@thuanphamvan6210]

@@duocdev update: dạ em dùng middleware thì lại set được anh, anh có thể giải thích lý do tại sao được k ạ? export function middleware(request: NextRequest) { let response = NextResponse.next(); let deviceId = cookies().get("deviceId")?.value; if (!deviceId) { deviceId = uuidv4(); response.cookies.set("deviceId", deviceId); } return response; }

[@nguyenmanh-c6p]

Next server lưu session ở trong ram đúng không anh. Nếu server next bị sập thì người dùng phải đăng nhập lại hết ạ. Có cách nào để tối ưu hơn việc lưu session ở server không ạ.

[@duocdev]

Ai lại đi lưu session trong ram bao giờ, lưu là lưu ở db á. Còn trong video anh session lưu ở db của server backend. Nextjs chỉ lưu token cookie thôi

[@nguyenmanh-c6p]

@@duocdev nếu server next js bị tắt đi bật lại thì những token cookie có bị mất không anh. Nếu token cookie bị mất thì người dùng phải đăng nhập lại không anh.

[@duocdev]

@@nguyenmanh-c6p k hiểu về cookie rồi. Cookie lưu ở máy ng dùng k phải server. Vào F8 coi mấy video mới nhất họ làm về cookie cho rõ đi em

[@phuqn10x]

Anh cho em hỏi với ạ : tại sao mình phải dùng cả 2 backend để triển khai auth ạ ? e được hiểu là vì nextjs đã được tích hợp sẵn server lẫn client ,khi sử dụng server để gọi api bên ngoài , thì nextjs server bớt đi khoản api nhưng người dùng vẫn muốn dùng server nextjs vì nó có những tính năng khá ngon như route , middleware , optimize seo ..., cái e không hiểu là auth tại sao ko gọi thẳng từ client request định danh(username ,password...) -> server ngoài response trả luôn header Set-cookie ? (ko qua thằng server nextjs) mong anh giải đáp

[@duocdev]

Cơ chế cookie là lưu dựa trên domain, nên khi server ngoài nó set cookie thì chỉ những request từ client gọi đến server ngoài mới có tác dụng. Còn những request từ client ->server component-> gọi đến server ngoài thì k nhận cookie. Do nextjs có thể khác donain với server ngoài. Xem lại kỹ video, và thực hành mới hiểu đc cách nextjs hoạt động. Còn nếu như em “đc hiểu” hay “nghe nói” mà chưa code cái này thì khó mà thấm đc em

[@phuqn10x]

@@duocdev dạ vâng em cũng đang code và muốn tìm hiểu rõ nên có vấn đề thì hỏi anh luôn , em cảm ơn anh đã giải đáp ạ, , vậy là nếu để set-cookie thì chỉ set đc trên cùng một domain đúng không anh ?, nếu set khác domain thì sẽ có nguy cơ bị CSRF nên trình duyệt đã chặn ,

[@duocdev]

@@phuqn10x nếu domain cha thì có thể share với domain con. Về chi tiết Cookie thì F8 mới làm vài clip về nó á. Chi tiết lắm em, lên xem là hiểu

[@euclid90]

Không nên dùng Cookie nha, xài Cookie khiến App thành Stateful, khó Scale Out :D Thực tế nên xài Authorization Token.

[@duocdev]

Cookie do FrontEnd Next.js tự quản lý chứ có phải do backend đâu mà bạn lo stateful :D

[@hungminhphan6095]

sco là gì a

[@duocdev]

SEO đó em

[@tieungaoonline]

mình thì lại quan tâm cái next-auth :|

[@tuantech9943]

Token nó là 1/2 vấn đề, còn thằng Refresh token đau đầu nữa sếp =))

[@duocdev]

Đây là authentication dựa trên session token chứ không phải là kiểu access token và refresh token. Những video sau mình sẽ nói về vấn đề này nhé

[@tuantech9943]

@@duocdev Yup, mình hiểu mà. Comment thế ý là vẫn còn nhiều vấn đề khác nữa á