Auth: 04 - Chức năng đăng nhập với FirebaseUI siêu đơn giản 😍

Cùng mình tìm hiểu, cài đặt tính năng đăng nhập bằng Gmail siêu đơn giản với FirebaseUI nhé 😍
Trong video này mình sẽ chia sẻ với các bạn:
✅ Giới thiệu FirebaseUI Web React
✅ Cách config cho Firebase trong ReactJS app.
✅ Gắn thêm UI và config để thực hiện việc đăng nhập bằng Gmail.
✅ Tự động gắn token vào tất cả requests sau khi đã đăng nhập.
Hi vọng sau video này, các bạn biết được những bước đơn giản để có thể setup một cái giao diện đăng nhập bằng Google nhé! 😉
🌐 Link tham khảo:
- Code changes: github.com/pau...
- FirebaseUI Web: github.com/fir...
- FirebaseUI Web React: github.com/fir...
- Firebase: firebase.googl...
- Firebase Prebuilt UI docs: firebase.googl...
#firebase
#firebaseui
#firebase_react_login
-----
💻 Easy Frontend 🎉
Nơi kiến thức lập trình web frontend (html/css/javascript/reactjs) được chia sẻ một cách đơn giản, dễ hiểu mà đặc biệt là vui 😊 Với những tài liệu (tutorial) được biên soạn một cách kĩ lưỡng để giúp các bạn developer mới có thể nắm bắt vấn đề một cách nhanh chóng và hiệu quả. Từ đó nâng dần khả năng coding của các bạn lên theo thời gian.
❤️ Ủng hộ mình làm videos thì đóng góp qua MoMo/ZaloPay: 0901 309 729 nhé!
Kết nối với mình:
- 🎉 Fan page: / learn.easyfrontend
- ❓Group: / easyfrontend
- 💻Github: github.com/pau...
- 💼 LinkedIn: / haunguyenmn

[@toantrinhbao3604]

Anh có khóa học này em rất mừng luôn. Cám ơn anh

[@EasyFrontend]

Yeah rất vui khi videos hữu ích với em Bảo ơi 😊

[@ninedev99]

Rất là hay luôn nha anh ơi

[@EasyFrontend]

Yeahhh toẹt zời Tiền ơi, thật sự là do em nỗ lực nhiều đó, chứ cái anh dạy còn thiếu nhiều điều hihi, nhưng mà rất vui khi nghe em chia sẻ như vậy hihi 😍

[@EasyFrontend]

Hi vọng video này có thể gợi ý cho mọi người về những bước thực hiện một cái flow đăng nhập bằng Gmail đơn giản với Firebase 😊 Nếu có thắc mắc hay câu hỏi gì, cứ thoải mái để lại bên dưới nhé mn 😍

[@NguyenHung-ep2zk]

Hay quá a ơi, cảm ơn a!

[@EasyFrontend]

hehee cảm ơn em nhiều nhé Hưng ơi 😍

[@jockerthe8189]

hi vọng anh sớm làm thêm trang youtube easy backend :))

[@EasyFrontend]

hahaa backend anh hơi ngu, nên chắc phải hard backend, chứ ko easy nổi em ơi 😅

[@kinnguyen1495]

Xịn quá anh ôi

[@EasyFrontend]

hehe cảm ơn em nhé Kin ơi 😍

[@nguyenquangtuyen3389]

Hay quá anh ơi!

[@nguyenquangtuyen3389]

Cho em hỏi thêm cái token em đang request lên server để check là refeshToken cái này firebase không tự lấy lại khi expired nên em sẽ dùng getIdToken thay cho refeshToken được không anh?

[@EasyFrontend]

hi Tuyền, như a có đề cập trong video, hàm getIdToken() nó sẽ giúp mình tự động refresh nếu bị expired, nên mình chỉ cần dùng hàm này và hk cần quan tâm tới vụ refresh token Tuyền hen 😉

[@nguyenquangtuyen3389]

@@EasyFrontend Yeah! Thanks anh ạ

[@nguyenquangtuyen3389]

@@EasyFrontend Em thấy có prj config firebase ở trên server client gửi userInfo lên server response về customToken khi nào mình dùng case này anh nhỉ?

[@haithach4179]

ai cài firebase bản 9.0.0 nó sẽ bị lỗi "Can't resolve firebase" thì cài lại phiên bản 7.17.0 nhé :))

[@EasyFrontend]

yeah cảm ơn bạn chia sẻ nhen 😍

[@haithach4179]

@@EasyFrontend cảm ơn anh vì những video bổ ích ạ, giữ gìn sức khỏe anh nha

[@Mars-jl4ih]

Hello anh, anh ơi em đã npm i firebase và react-firebaseui mà khi import vào app.js nó cứ thông báo là Module not found: Can't resolve 'firebase' là em bị lỗi gì anh nhỉ. Em cảm ơn ạ

[@EasyFrontend]

à hơi lạ nè, chắc em chụp hình rồi upload lên nhóm để mn xem thử em nha :)

[@Mars-jl4ih]

@@EasyFrontend Dạ anh ơi em fix đc rồi ạ, do cái thằng firebase mới nhất là bản 9.0.0 nó chưa đc hỗ trợ nên em đã cài bản 7.24.0 và chạy ngon rùi ạ

[@xuaniennguyen6573]

Chào anh,em có một câu hỏi là mình dùng firebase để lấy token của google xong gửi lên BE xác thực 1 lần nữa(BE em tự viết ạ ) xong BE nó trả về token riêng của hệ thống em về client.Xong em lưu vào localstorage đồng thời gắn vào header của mỗi request.Cuối cùng mỗi lần logout thì em sẽ xóa token ở localstorage và xử lí logout user ở firebase.Cho em hỏi cách này có ổn ko ạ? Em cám ơn nhiều ạ !

[@EasyFrontend]

hi em ơi, anh thấy nếu em muốn BE xử lý thì FE ko cần làm việc với firebase nha. Em chỉ gọi lên BE thôi, rồi BE sẽ tự làm việc vs Firebase em nha hehe 😉

[@xuaniennguyen6573]

@@EasyFrontend Em cám ơn anh.Chúc anh 1 ngày tốt lành !

[@SangNguyen-gq7wq]

Dạ! Chào a Hậu. A ơi! A cho e hỏi là e đang tìm hiểu về firebase thì e có vài câu hỏi ạ: 1) mình dùng firebase trong những loại project nào. 2) e thấy dùng nó tiện lợi và tích hơp nhiều thứ thế có nhược điểm nào k a? 3) mình lưu trên cloud vậy có bị ảnh hưởng security về data k a? Thanks a!

[@EasyFrontend]

hi Sang ơi, anh làm chuyên bên FE nên mấy câu này anh cũng ko trả lời hết được cho em nè, nhưng anh có biết một vài ý để chia sẻ cho em sơ bộ hen. 1. Mình dùng Firebase cho những trường hợp như: Authentication (Firebase Auth), Realtime database ( cho những trường hợp cần đồng bộ dữ liệu theo thời gian thực như chat, hay các flow xử lý sự kiện cần đồng bộ tức thời giữa nhiều hệ thống khác nhau chẳng hạn ), ... 2. Nhược điểm thì anh nghĩ khi em làm một system lớn cần linh động, can thiệp sâu xuống cấu hình hệ thống các kiểu thì chắc hơi khó, vì Firebase thì config sẵn. Với một ý nữa là nhớ kiểm tra chi phí cho mỗi service em dùng để tránh bị phát sinh nhiều chi phí nha. 3. À cloud data security được ưu tiên hàng đầu, nếu em tin tưởng Google thì okie nè. 😉

[@NguyenMinh-hy7lt]

Mình cho vào localstorage cần thì lấy ra. Haha. Mà anh có hướng dẫn lấy thông tin người dùng sau khi đăng nhập không anh? Để hiển thị lên Navbar.

[@EasyFrontend]

hihi hiện a chưa làm thêm API riêng để get thông tin user đăng nhập, nên chắc mình dùng tạm user của Firebase nha Thảo hehe

[@codingwithtony]

Thanks

[@phuochuu4127]

anh ơi làm cái video nói nên lưu token ở đâu tốt hơn đi anh

[@EasyFrontend]

hihi mình lưu ở localStorage thôi em ơi 😊

[@vuongnh1705]

cho em hỏi cái lúc em đăng nhập Google thành công, xem xử lý lưu data lên firestore và lưu token vào storage ở callbacks, nhưng khi em đăng nhập thành công nó bay qua trang chính luôn mà chưa chạy callbacks thì xử lý sao nah

[@EasyFrontend]

hi Vương ơi, hình như version của firebase nó thay đổi, có một số cập nhật òi, lâu quá a chưa update lại bên này nên ko rõ nữa, em check document mới nhất của firebase giúp anh nhé 😉

[@juhandvan]

Hi anh Hậu, lâu quá mới thấy a trở lại. Về chỗ request đầu tiên làm sao để gắn token vào header thì theo e xử lý bằng cách lần đầu tiên login, sau khi login qua Google thành công ta lưu thông tin user và token vào trong localStorage, sau đó trong file configClient của axios ta lấy token tử localStoagre ra luôn chứ không cần get lại từ firebase nữa. Làm vậy không biết có được không anh ?

[@EasyFrontend]

hi Juhand Van ơi, hôm giờ tuần nào cũng có đều đều videos á em hehe, phần auth này tới video số 6 òi hehe, còn vụ token, nó có thêm một trường hợp là nếu như token của firebase cần làm mới thì em làm sao biết được để cập nhật nè? 🙂

[@chontamthanhtinh]

hồi xưa vụ đăng nhập bằng facbook google nhấp vào nó tự di chuyển qua cái sign up tự động điền email tên ... rồi còn thiêu mình tự điền vậy phải làm sao a.

[@EasyFrontend]

hi Sang, cái đó là phần autofill của trình duyệt em nha, em ko cần làm gì hết nè 😉

[@igdev6095]

20:00 a ơi cái file env này mk ko push lên github mà chỉ push mỗi folder build của react thôi phải ko a :D

[@EasyFrontend]

hi em, đúng là ko push lên github, nhưng ko phải bỏ trong folder build nha. Tuỳ em run lệnh build ở đâu, thì ở đó phải có file .env, còn nếu dùng các service như Vercel, Heroku, … thì nó cho phép em config biến môi trường trực tiếp bằng UI òi, mỗi lần thay đổi, em chạy build lại là đc 🙂

[@igdev6095]

@@EasyFrontend cảm ơn a nhiều ah!, với e đăng nhập thì mấy lần đầu thì đc nhưng h nó báo thế này a là do máy hay do gì vậy a @@ Something went wrong. Please try again

[@igdev6095]

@@EasyFrontend a ơi e biết lỗi r, nó cũng ở đoạn 20:00 ấy a, e gán tên biến process.env.... như a vậy nó ko hiểu, e gán string như bth thì mơi ok, ko biết a có cao kiến j ko :v

[@linhhophamkhuong3215]

Anh cho em xin hỏi là nếu mình làm việc với google photo thì có những thư viện nào hổ trợ việc đăng nhập vậy anh. Em xin cảm ơn!

[@EasyFrontend]

hi em, cái này anh chưa làm nên hk rõ em nhen :)

[@nguyenkhanh6313]

anh ơi async - await là như nào vậy ạ mong a ra thêm video về bất động bộ trong js ạ

[@EasyFrontend]

À nó là syntax mới để viết cho thằng Promise đó Khánh ơi, viết code bất đồng bộ như đồng bộ =)))) www.digitalocean.com/community/tutorials/js-async-functions Em tham khảo thêm link này nghen 😉 Có time a sẽ làm về chủ đề này hehee

[@baonguyen7013]

A cho e hỏi a có sử dụng webpack ko ạ, và trong dự án thực tế thì có nhiều project sử dụng webpack ko ạ ? E tìm react cũng được 1 thời gian và hiện đang đi thực tập và được training về webpack với babel, và e thấy 2 cái keyword này lạ quá.

[@EasyFrontend]

hi em, tuỳ dự án em nha, anh ko biết có nhiều ko nè. Do mấy cái anh làm thì toàn dùng CRA nên nó config hết trơn òi. Còn mấy dự án tự setup manually thì em phải biết cách config 2 ông thần này em nha 😉

[@channelttn9460]

Anh có làm video nào làm login với username pasdword với api thật k phải làm trên fibase k ạ em làm theo người nước ngoài mà k đc khó hiểu nữa,

[@EasyFrontend]

à cái đó thì có trong khoá reactjs hoặc series NextJS nhen em, cơ mà còn tuỳ dự án em làm thế nào nữa, chứ ko đảm bảo giống 100% em nhen hihi

[@xuaniennguyen6573]

Hello anh, em mới tìm hiểu về ReactJS gần đây và em có 1 thắc mắc là cách của anh là login với Firebase và cách dùng module react-facebook-login thì khác nhau điểm nào ạ ? Với lại em định dùng BackEnd là SpringBoot của Java thì em nên dùng cái nào trong 2 cái trên ạ ? Em cám ơn anh.

[@EasyFrontend]

hi em ơi, 1. Firebase hay react-facebook-login: Anh chưa dùng react-facebook-login nên a hk rõ nữa nè. Nhưng Firebase thì hỗ trợ đc nhiều loại đăng nhập gồm: email, fb, google, ... Còn cái kia hỗ trợ có mỗi Facebook. Nên nếu chọn, a sẽ chọn Firebase. 2. Xài provider có sẵn hay tự viết BE của mình: a thì nghĩ cái nào cũng đc, tuỳ vào dự án của em thôi nè. Nếu có đủ người, đủ lực làm thì nên tự viết, còn nếu ko thì cứ xài Provider có sẵn cho khoẻ hehe (nhưng nhớ có thể phải trả phí sau này) 😊

[@xuaniennguyen6573]

@@EasyFrontend Dạ em cám ơn anh nhiều đã trả lời em ạ.Nhưng cho em xin hỏi thêm 1 câu ạ là em sắp làm đồ án tốt nghiệp định viết bằng ReactJS và Spring Boot ấy a.Em có tìm hiểu là đăng nhập bằng account bình thường thì dùng jwt xác thực để truy cập api và em định tích hợp login bằng facebook,google,.. vào đồ án.Nhưng em có 1 thắc mắc là login bằng mxh khác thì làm gì mình có token mà mình truy cập api.Em có ý tưởng là mỗi khi login bằng mxh khác thì thêm cái " kiểu account "để gọi lấy token và phân biệt với account bình thường.Liệu cách làm của em có ổn không ạ và có giống bên ngoài thực tế ngta làm không ạ.Em cám ơn anh.Chúc anh 1 ngày tốt lành!

[@daodevkidieu2022]

Anh có dự định làm khóa Firebase từ zero-to-hero k ạ. Em thấy giờ người ta dùng firebase để hadle back-end nhiều ạ. Cũng muốn học để làm app cho nhanh ^^

[@EasyFrontend]

hi Lâm, hiện thì mình chưa có dự định làm full cái đó nè, chỉ gắn vào phần nào liên quan thôi à hihi

[@vancuongnguyen2749]

Anh ơi, cho em hỏi, khi client nhận đc token của server gửi ra. thì các request tiếp theo từ client sẽ tự động đc đính kèm phần header mà sever đã gửi ra ạ. hay là mình phải có lệnh gì đó để setup ạ. mong nhận đc phản hồi từ anh ạ. em cảm ơn

[@EasyFrontend]

hi Cường ơi, phần này có ở video sau á em hehe, em coi tiếp mấy videos sau nha hehe

[@vietthangnguyen5157]

Cho e hỏi là mục đích của việc gắn Token lên request header để làm gì ạ ? nếu như login xong không gắn cái đấy có ảnh hưởng gì không ?

[@EasyFrontend]

hi Thắng, việc gắn token để authorized trên server rồi lấy dữ liệu nè. Ví dụ em muốn lấy danh sách sản phẩm của user hiện tại? Làm sao server biết user hiện tại là user nào? Server cần một cái gì đó để biết đúng hk? Thì cái token đó chính là giấy chứng nhận à đây là user nào, và user đó được quyền lấy dữ liệu gì 😉 Còn trong trường hợp em chỉ cần lấy những thông tin public, tức ai cũng lấy được thì ko cần token nha Thắng hehee

[@kienang7850]

lần này tiếng anh bị vang, mong anh dùng cái mic như mọi khi ạ

[@EasyFrontend]

Kiên Đặng hi Kiên cảm ơn em, a vẫn dùng cái mic mọi khi đó em, điều khác biệt là a mới chuyển sang windows nên có thể nó hơi khác, để a xem lại thử 😊

[@vud.d9926]

anh cho em hỏi khi e tắt StrictMode thì sử dụng được còn để thì lỗi v ạ

[@EasyFrontend]

hi Vũ, em nên dùng và fix lỗi nó báo em nhen

[@minhtaingo9182]

Hình như thằng StylefirebaseAuth bị xoá rồi a ạ, em xài theo doc mà ko hiện lên đc

[@EasyFrontend]

à series này nó cũ òi á em, nên mấy thư viện chắc outdated hết òi, em có xem thì tham khảo ideas thôi em nhen 😉

[@ChiNguyen-ft4yq]

Anh ơi cho em hỏi cái 'Bearer' được gán trong Authorization để làm gì vậy anh, và nếu server node thì làm sao lấy được token đó ạ, splits chuỗi để tách bearer với token hả anh

[@EasyFrontend]

hi Chí, em dùng thư viện để decode cái token nhé hihi Ví dụ em dùng Firebase thì tham khảo link này nhen firebase.google.com/docs/auth/admin/verify-id-tokens#node.js 😉

[@ChiNguyen-ft4yq]

À dạ cảm ơn a nhiều nha

[@tuananhhoang9528]

Trước e học làm authen bằng passport phức tạp lắm , k nghĩ có cái đơn giản như này á a

[@EasyFrontend]

hehe nó làm sẵn hết trơn =)) Giờ có nhiều thư viện backend toàn làm sẵn auth nên gắn vào là xong, nhanh gọn lẹ 🙂

[@EasyFrontend]

Cơ mà anh hk chuyên BE, nên a mới dùng cái có sẵn cho đơn giản em nhen 😉

[@tuananhhoang9528]

@@EasyFrontend may nhờ có những video của a e mới hiểu được thằng react này ý

[@EasyFrontend]

@@tuananhhoang9528 yeah rất vui khi các videos của a hữu ích cho em nè Anh ơi 😉 nếu em muốn học thêm hãy đk fan cứng học redux saga và tham khảo full khoá reactjs trên udemy em nhé 😍

[@giahynguyen7360]

nó bị lỗi cors là sao vậy anh ơi giải thích giúp em với em dùng axios post dữ liệu lên server á anh hự hự fix hoài k đc luôn ạ

[@EasyFrontend]

CORS là lỗi bên phía backend em nhen. Kiểu như backend chỉ cho phép một số domain bên phía client gọi tới. Giờ muốn sửa thì phải bổ sung thêm rules bên backend để cho phép bên domain nào đó phía client được phép gọi tới API em nha 😉

[@HuyNguyen-yp5nr]

Uncaught TypeError: Cannot create property '_updatedFibers' on number '0' Em bị lỗi vậy mà không biết fix. Mong được giúp đỡ ạ

[@EasyFrontend]

hi Huy, cái firebase anh dùng nó lâu òi, giờ nó ra updates mới nên khả năng em làm nó ko còn giống như anh hướng dẫn lúc trước u nhen. Em xem lấy ideas tham khảo rồi search document để update lại API tương ứng nhé

[@HuyNguyen-yp5nr]

@@EasyFrontend em cảm ơn anh

A ơi a cho e hỏi là khi access token khi đăng nhập theo cách này hết hạn thì có cách nào để tạo 1 access token mới không ạ. Vì access token đăng nhập qua google theo em biết là sẽ hết hạn sau 1h ạ

[@EasyFrontend]

hi Anh ơi, em có thể dùng cái hàm getIdToken() này của firebase nhen. firebase.google.com/docs/reference/js/firebase.User#getidtoken Nếu token chưa expired thì nó trả về cho token hiện tại. Còn nếu đã expired thì nó refresh token và trả về cho em cái token mới hehe

[@chontamthanhtinh]

cho em hỏi cái này khi đăng nhập vào thì phần Profile làm sao thêm vào dc. Như là FullName, taikhoan

[@EasyFrontend]

hmm anh sau khi em đăng nhập xong thì có thông tin người đăng nhập rồi thì em check nếu có thì show lên thôi nhé Sang 😉

[@NguyenHung-hb3sb]

e nghĩ là để cho token luôn có sẵn trước khi gọi api thì mình nên để useEffect onAuthStateChanged lên đầu để nó gọi trước :v và thêm nữa là bên trong useEffect gọi product thì mình check if là user đã login. ko biết work ko 🤷

[@EasyFrontend]

Nguyễn Hùng hi Hùng ơi, em thử setup dưới local và chạy thử xem sao Hùng nhé hehe 😉

[@tv.tai2k1]

anh ơi. video này trong khóa react js trên udemy của anh có k ạ

[@EasyFrontend]

à cái này ko có trên khoá udemy em nhen hihi 😉

[@nguyenbao799]

Mình đang dự định làm FE react, BE laravel. Có dựng thử vài project nhưng bị vướng đoạn submit react gọi api post bên laravel, FE đã login firebase thành công và có gắn token vào header khi gọi api, nhưng khi post lại bị lỗi 419 mistoken của laravel. Bạn có thể tư vấn solution giải quyết vấn đề này giúp mình được không? Thanks

[@EasyFrontend]

ù chết, mình bị miss tn của Bảo, xin lỗi Bảo nhé. Phần Laravel mình chưa làm nên cũng không rõ Bảo ơi, mình search thì có cái thread này trên StackOverflow stackoverflow.com/questions/46266553/why-does-the-laravel-api-return-a-419-status-code-on-post-and-put-methods Không biết có giúp đc cho Bảo hk? 🙂

[@nguyenbao799]

@@EasyFrontend hi Thanks nhé :D

[@NguyenHuy-pj4qj]

Cảm ơn anh. anh có thể làm 1 video về cách axios nó check headers authorization bearer không ạ. Ví dụ có 2 api A và B, A được thì không cần header token vẫn fetch được, còn B nếu fetch phải check header token, nếu token là giả thì không cho. : v em không rành về mấy cái này ạ T_T

[@EasyFrontend]

hi Huy, thường cái này em sẽ check URL nhen. Sẽ có quy ước từ Backend là những URL nào là ko cần token, URLs nào thì cần token. Ví dụ: - nếu url bắt đầu /e thì ko cần token - nếu url bắt đầu /a thì cần token Thế nên trong axios em sẽ check URL, nếu nó có dạng /e/products chẳng hạn, rõ ràng bắt đầu bằng /e nên em có thể bỏ qua token nha 😉 Còn headers lúc gửi ở phía client, headers là do em tạo ra, setup, ko phải headers từ bên BE, nên ko thể dựa vào headers mà check để biết có cần gửi token ko em nha 😉

[@NguyenHuy-pj4qj]

​@@EasyFrontend amazing anh Hậu ơi. Cảm ơn anh nhiều nha :3 Em còn ở vn chắc em phải tìm gặp anh -.-

[@NguyenHuy-pj4qj]

mỗi lần em add thêm variable vào .env file, em phải restart lại server, không thì nó không đọc được variable vừa thêm vào. Làm sao để sửa cái này vậy anh ạ.

[@EasyFrontend]

hi Huy, cái này là behavior đúng rồi em nha, file .env đó nó chỉ đọc một lần lúc start server lên thôi à 😉

[@NguyenHuy-pj4qj]

@@EasyFrontend Thanks anh nhiều nha :3 Em tưởng nó giống như thằng dotenv.config() ở BE, nó đọc được liên tục : V

[@trantrungchinh9284]

Chào anh, em muốn hỏi là nếu mình dùng firebase và muốn gọi api ở Backend lên thì làm như thế nào ạ ? Em cám ơn ạ!

[@EasyFrontend]

hi Chính ơi, em thử Cloud Function nhen hehe firebase.google.com/docs/functions

[@trantrungchinh9284]

@@EasyFrontend dạ em cám ơn ạ !!!

[@phammanhkien2824]

a cho e hỏi là khi generate ra token thì send cho backend để verify ạ

[@EasyFrontend]

hi em, token là bên backend sẽ cung cấp em nha, mình frontend chỉ nhận và sử dụng thôi à Kiên

[@phammanhkien2824]

@@EasyFrontend dạ em cảm ơn a ạ

[@vuongnh1705]

Mình có thể đổi chữ signin with Google ở cái button không anh

[@EasyFrontend]

à thường thì ko nên em nha, tại mấy cái nút này nó có quy định hết òi. Em muốn dùng thì phải tuân thủ đúng styles của nó hehe 😉

[@vuongnh1705]

@@EasyFrontend dạ, cho em hỏi thêm là khi đăng nhập với google, em muốn lưu một vài thông tin của user vào firestore thì làm sao ạ, em định lưu nó ở onAuthStateChanged nhưng lưu ở đây thì mỗi lần đăng nhập hay mỗi lần vào web thì nó đều lưu lên firestore, giờ làm sao để nó chỉ lưu một lần khi mới đăng nhập bằng google lần đầu vậy anh

[@nguyengianam499]

Anh ơi. Anh có thể làm 1 video về react router không ạ

[@EasyFrontend]

hi Nam ơi, phần router có trong project này luôn á Nam, em muốn tham khảo về việc gì e hen? Nếu chỉ chia route theo trang thì em xem lại video setup project redux này nghen 😉

[@nguyengianam499]

dạ em đang bị kẹt ở Redirects. E đọc doc mà vẫn k biết cách sử dụng ạ :

[@EasyFrontend]

nam ngn à nó có thẻ Redirect đó Nam, em có thể share nhu cầu cụ thể của em là gì hk?

[@phanhaiang7052]

mỗi khi f5 lại trang thì thông tin user đang đăng nhập có bị mất không anh

[@EasyFrontend]

à nó sẽ ko mất em nhen vì nó có lưu lại trong storage òi, à mà em lưu ý firebase version mới có một số thay đổi, em check docs của họ cho chắc nhen 😉

[@Huydev]

Em gặp lỗi : (auth/network-request-failed) là sao vậy anh

[@EasyFrontend]

hi Huy, chắc là do mạng bị issue gì đó, em thử lại xem sao hen

[@Huydev]

@@EasyFrontend em up lên vercel nhưng nó vẫn bị anh ạ. Không biết lỗi gì luôn. Em test ở cả điện thoại hay 4G cũng bị. Nó không hiện thị lên redirect hay popup mà nó lên dòng chữ “A network error has occurred”

[@Huydev]

@@EasyFrontend anh ơi hình như thằng firebase V9 nó không working với react v18 thì phải. em test react v17 thì nó hoạt động bình thường

[@haupham5505]

Chào A.. E làm theo a mà nó bị lỗi này là s ạ Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase').

[@EasyFrontend]

hi em ơi, em coi ở phút bao nhiêu vậy ta? Lâu quá anh hết nhớ òi hehe

[@haupham5505]

@@EasyFrontend Dạ e xem tới phút 17 á a ...Khi gắn cái thì nó báo bị v á a

[@EasyFrontend]

@@haupham5505 ý vậy em coi lại cái import đúng chưa nghen, chứ cái import ở phút 17 là khác nhen, hk phải firebase/app nè hehee

[@nguyenvanhieu9589]

font a dùng cho vscode là gì á anh Fira code ạ :x

[@EasyFrontend]

Yessss, nó là FiraCode đó Hiếu ơi 😍

[@llgleague6006]

sao e ko có domain như a v ạ

[@EasyFrontend]

hi em, ý em là cái domain nào hen?

[@giahynguyen7360]

cai file api project thuc te lam vay ha anh

[@EasyFrontend]

yeah đúng òi em nha, dự án thực tế anh cũng làm vậy hehee

[@TrungNguyen-eg5qc]

A cho e hỏi nó báo như vậy là sao ạ! Error: AuthUI instance is deleted! ở phút 18 nha a

[@EasyFrontend]

hi Trung, cái này lâu òi anh hk có làm việc với nó nữa nên hk chắc lắm em nhen hihi, em thử google xem sao nhé 😉

[@vanthiennguyen1751]

bạn fig được chưa a. mk cũng mắc lỗi này. đăng nhập nhưng không chuyển trang qua /photos

[@vanthiennguyen1751]

mk vừa mới tra gg bỏ stric mode thì chạy bình thường

[@vanthiennguyen1751]

@@EasyFrontend a ơi cho hỏi là sao dùng stric mode lại báo lỗi như trên vậy ạ.

[@user-up2be1nt8s]

Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase'). em bị lỗi này là như thế nào v anh , em đã tìm trên gg nhưng mà vẫn không fix được. Em cảm ơn

[@EasyFrontend]

hi em, cái này là nó bảo ông firebase ko có cái app nè, em import cái app để làm gì vậy e? 🙂

[@user-up2be1nt8s]

@@EasyFrontend Em import như a xong nó báo vậy

[@quangchientran9889]

@@user-up2be1nt8s bạn chuyển firebase về thấp hơn phiên bản 8.0.0 nhé, do với phiên bản này phần react-firebaseui chưa update kịp nên bị lỗi, mình bị lỗi tương tự và chuyển firebase về phiên bản 7.17.0 thấy ok nhé