Anh ơi cho e hỏi cái useAuth này e thấy nó đủ để mình dùng rồi thì cái Next-Auth nó có gì hay ho hơn cái này không ạ. a có thể ra thêm 1 video làm về Next-Auth không ạ. e cảm ơn ạ
hi Thông, next-auth nó xịn hơn nhiều em nhen, nó hỗ trợ để tích hợp mấy cái như Google / Facebook / ... login luôn, có cả password login luôn em 😅 Làm đơn giản thì giống ae mình làm, còn phức tạp hơn thì dùng next-auth cho tiện em hen
hay quá a ơi, a cho em hỏi đoạn lấy profile mình có set dedupingInterval: // 1h mà sao lúc em reload lại trang profile, thông tin profile phải đợi một lúc mới hiện nhỉ, em tưởng phải hiện luôn chứ, có cách nào cho nó hiện luôn thông tin profile đã load trc đó ko nhỉ a
à em mà reload trình duyệt là nó chạy lại app rồi em hahaa reload thì phải fetch lại dữ liệu em nhen còn em muốn persist giữa các lần reload, thì có thể suy nghĩ tới việc lưu tạm dưới local storage nhen Đức 😉
à tại nó là async func em nha 😉 LoginPage gọi hàm login(), này là hàm async nên cần await bên trong hàm login, lại gọi hàm async khác, nên lại cần await 😅
hi em, trong trường hợp này thì anh nghĩ ko nên dùng useSWRMutation em nhen, mình dùng cái hàm mutate() nó đã bind với cái useSWR() hook rồi thì sẽ tiện hơn hen. Do cái mutation kia mình cũng ko cần update thông tin gì bên BE, mà chỉ đơn giản là invalidate cache, rồi fetch lại thông tin mới hihi
Khi mà em post data ng dùng thay đổi profile lên server, và em muốn gọi lại API get data profile để update profile thì em chỉ cần gọi hàm mutate() trong phần onSuccess của hàm post data anh Hậu nhỉ.
a ơi có cách nào ktra khi login or có id thì mới gọi swr ko , tại binh thường const { data } = useSWR(url/id) chưa có id nó đã gọi một api /underfined rồi
a ơi ví dụ em khi em login,nếu là admin login sẽ trả về isAmin = true, em muốn truyền qua menu component để nếu là admin thì hiện thêm tab quản lí user mà em chưa biết truyền kiểu gì, dùng swr truyền qua đc ko nhỉ hay phải dùng redux, a có cách anof không chỉ em với
thông thường cái này là role ở trong phần user trả về luôn, em có thể thêm cái props isAdmin trong logged in user luôn nhé Đức, rồi dùng giống như anh là đc òi, chỗ nào cần thì lấy từ thông tin logged in user ra là đc em nghen 😉
à cái đó mình phải check docs hoặc đọc file definition của thư viện, hoặc Ctrl + click vào cái type em quan tâm, nó sẽ dẫn tới chỗ định nghĩa types, rồi mình check ra em nhen hehee
00:00 Purpose setting useAuth hook 00:40 Duplicate when use in components 01:20 Example create useAuth hook 02:50 Re-Explain options of useSWR 03:56 How to pass options to useSWR 04:40 Handle return elements of hook 05:10 Setting export element 05:50 Explain idea mutate when login, logout 08:20 Use hook login, logout in login page 09:50 Use profile by param return from hook 10:30 Explain how to pass params into hook & revalidateOnMount 11:15 Explain await mutate in hook 13:00 Logout problem and how to trace error 15:50 Example some case can use hook useAuth 17:00 Introduce next video (Protected Pages)
anh có cách nào để lấy được url trước đó không anh nhỉ. kiểu url trước khi vào trang login để back lại sau khi qua ProtectedRoute ấy anh. e dùng router.back() thì có case là người ta vào thẳng trang login nên nó back ra trang trình duyệt :((
thường bài toán này, mình sẽ hay làm theo kiểu là khi vào trang A, mà cần đăng nhập mình sẽ redirect qua login kèm tham số return_url=URL trang A khi login thành công, thì dựa vào param trên URL mà redirect về cho đúng em nha còn ko có param thì về trang mặc định em dựa vào hint đó mà làm thử xem sao hen 😉
@@EasyFrontend Anh ơi, hiện tại em có tìm hiểu về seri next này ạ. Nhưng em không call được API để test các trường hợp so sánh qua video ạ. Anh có thể hỗi trợ cho em xin link API không ạ?
Không mong series này kết thúc :)))
hehe yeah trc mắt vẫn còn hơi dài đó Tân haha
@@EasyFrontend xưa chỉ nghe nextjs dùng để SEO chứ có biết nhiều thứ hay ho như này đâu, nhiều bao nhiều cũng xem hết nha a :)))
@@lenhattan46 hahaa okie em nha 😍
Anh ơi cho e hỏi cái useAuth này e thấy nó đủ để mình dùng rồi thì cái Next-Auth nó có gì hay ho hơn cái này không ạ. a có thể ra thêm 1 video làm về Next-Auth không ạ. e cảm ơn ạ
hi Thông, next-auth nó xịn hơn nhiều em nhen, nó hỗ trợ để tích hợp mấy cái như Google / Facebook / ... login luôn, có cả password login luôn em 😅
Làm đơn giản thì giống ae mình làm, còn phức tạp hơn thì dùng next-auth cho tiện em hen
A cho e hỏi là khi mình login là token tự động được lưu ở cookie luôn à a.. Tại e k thấy hàm set cookie ạ...
à cái này mình xử lý ở mấy videos trước òi á em, phần làm proxy api
hay quá a ơi, a cho em hỏi đoạn lấy profile mình có set dedupingInterval: // 1h mà sao lúc em reload lại trang profile, thông tin profile phải đợi một lúc mới hiện nhỉ, em tưởng phải hiện luôn chứ, có cách nào cho nó hiện luôn thông tin profile đã load trc đó ko nhỉ a
à em mà reload trình duyệt là nó chạy lại app rồi em hahaa
reload thì phải fetch lại dữ liệu em nhen
còn em muốn persist giữa các lần reload, thì có thể suy nghĩ tới việc lưu tạm dưới local storage nhen Đức 😉
anh Hậu cho e hỏi video nào nói về useSWR dùng put và post request vậy ạ?
hình như anh nhớ là chưa có em nhen, chỉ có phần loggedin user này thôi à hihi
chổ 10:18, cái tham số thứ 2 thứ 3 của hàm JSON.stringify là gì vậy anh ơi?
à em đọc từ docs của nó luôn nha em ơi hehe
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
a Hậu cho em hỏi là tại sao bên useAuth có await rồi mà bên LoginPage lại có await nữa ạ
à tại nó là async func em nha 😉
LoginPage gọi hàm login(), này là hàm async nên cần await
bên trong hàm login, lại gọi hàm async khác, nên lại cần await 😅
dùng useSWRMutation thì sẽ ntn ạ a. vì dùng useSWRMutation sẽ cần truyền vào fetcher luôn a
hi em, trong trường hợp này thì anh nghĩ ko nên dùng useSWRMutation em nhen, mình dùng cái hàm mutate() nó đã bind với cái useSWR() hook rồi thì sẽ tiện hơn hen. Do cái mutation kia mình cũng ko cần update thông tin gì bên BE, mà chỉ đơn giản là invalidate cache, rồi fetch lại thông tin mới hihi
Khi mà em post data ng dùng thay đổi profile lên server, và em muốn gọi lại API get data profile để update profile thì em chỉ cần gọi hàm mutate() trong phần onSuccess của hàm post data anh Hậu nhỉ.
yeah đúng òi Trung, em gọi cái mutate là được rồi nhen, giống như trong ví dụ anh đưa là nó mutate() xong trigger gọi lại lấy profile vậy á em hehe
@@EasyFrontend hehe oke ạ
a ơi có cách nào ktra khi login or có id thì mới gọi swr ko , tại binh thường const { data } = useSWR(url/id) chưa có id nó đã gọi một api /underfined rồi
hi Đức, em tham khảo chỗ này nhen hehe
swr.vercel.app/docs/conditional-fetching
a ơi ví dụ em khi em login,nếu là admin login sẽ trả về isAmin = true, em muốn truyền qua menu component để nếu là admin thì hiện thêm tab quản lí user mà em chưa biết truyền kiểu gì, dùng swr truyền qua đc ko nhỉ hay phải dùng redux, a có cách anof không chỉ em với
thông thường cái này là role ở trong phần user trả về luôn, em có thể thêm cái props isAdmin trong logged in user luôn nhé Đức, rồi dùng giống như anh là đc òi, chỗ nào cần thì lấy từ thông tin logged in user ra là đc em nghen 😉
a hậu có thể cho e hỏi một xí đó là làm s để mình biết được các type như (option?: Partial) vậy ạ
à cái đó mình phải check docs hoặc đọc file definition của thư viện, hoặc Ctrl + click vào cái type em quan tâm, nó sẽ dẫn tới chỗ định nghĩa types, rồi mình check ra em nhen hehee
@@EasyFrontend dạ e cảm ơn ạ
00:00 Purpose setting useAuth hook
00:40 Duplicate when use in components
01:20 Example create useAuth hook
02:50 Re-Explain options of useSWR
03:56 How to pass options to useSWR
04:40 Handle return elements of hook
05:10 Setting export element
05:50 Explain idea mutate when login, logout
08:20 Use hook login, logout in login page
09:50 Use profile by param return from hook
10:30 Explain how to pass params into hook & revalidateOnMount
11:15 Explain await mutate in hook
13:00 Logout problem and how to trace error
15:50 Example some case can use hook useAuth
17:00 Introduce next video (Protected Pages)
wohoo một nùi đóng góp cho videos từ Sinh luôn, cảm ơn em nhiều nhiều nhé Sinh ơi 😊
anh có cách nào để lấy được url trước đó không anh nhỉ. kiểu url trước khi vào trang login để back lại sau khi qua ProtectedRoute ấy anh. e dùng router.back() thì có case là người ta vào thẳng trang login nên nó back ra trang trình duyệt :((
thường bài toán này, mình sẽ hay làm theo kiểu là
khi vào trang A, mà cần đăng nhập
mình sẽ redirect qua login kèm tham số return_url=URL trang A
khi login thành công, thì dựa vào param trên URL mà redirect về cho đúng em nha
còn ko có param thì về trang mặc định
em dựa vào hint đó mà làm thử xem sao hen 😉
@@EasyFrontend dạ vâng e cảm ơn a
khó muốn khóc luôn :((
haha vậy mới học em nè, chịu khó luyện tập, làm lại vài lần cho thật sự hiểu em nha, đến khi nào em tự viết ra những dòng code đó là okie hehe
Hình như api server chết rồi ad
à hình như heroku hết cho free òi, để mình check lại nhen
em test lại y nha, được rồi á em. Heroku giờ phải trả phí, chứ ko cho free như trước giờ nữa haha
@@EasyFrontend
Anh ơi, hiện tại em có tìm hiểu về seri next này ạ.
Nhưng em không call được API để test các trường hợp so sánh qua video ạ.
Anh có thể hỗi trợ cho em xin link API không ạ?