ข้อผิดพลาดคุกกี้ Samesite บน localhost พร้อม auth0
ฉันใช้ auth0 เพื่อใช้การตรวจสอบสิทธิ์ในแอปตอบกลับของฉัน ฉันใช้ตะขอ useAuth0 () ดังต่อไปนี้
const { isAuthenticated, isLoading } = useAuth0();
ฉันยังใช้การเข้าสู่ระบบโดยใช้ไฟล์
const { loginWithRedirect } = useAuth0();
.
.
.
<button onClick={() => loginWithRedirect()} />
เมื่อฉันกดปุ่มมันจะเปลี่ยนเส้นทางไปที่ auth0 และฉันสามารถเข้าสู่ระบบได้ หลังจากเข้าสู่ระบบระบบจะเปลี่ยนเส้นทางกลับไปที่แอปและแสดงเส้นทางที่เข้าสู่ระบบโดยไม่มีปัญหาใด ๆ อย่างไรก็ตามปัญหาคือเมื่อฉันทำการเปลี่ยนแปลงใด ๆ ในแอปมันจะโหลดซ้ำและฉันพบหน้าเข้าสู่ระบบอีกครั้งแม้ว่าฉันจะล็อกอินแล้วก็ตามในแท็บปัญหาของ Chrome จะแสดงข้อความนี้

ฉันไม่สามารถเข้าใจได้ว่าทำไมมันไม่ทำงานเมื่อรีเฟรช แต่ทำไมมันถึงใช้งานได้กับการเปลี่ยนเส้นทางหลังจากเข้าสู่ระบบและฉันพยายามหาวิธีแก้ไขตั้งแต่เมื่อวานนี้ แต่ก็ยังไม่มีโชค ฉันเจอคุกกี้ที่ทำให้เกิดคำเตือน SameSite ของ Chromeซึ่งเป็นคำถามที่ใกล้เคียงที่สุดที่ฉันสามารถหาได้ แต่ดูเหมือนจะไม่ได้คำตอบที่ถูกต้องเกี่ยวกับวิธีแก้ปัญหา
คำตอบ
สิ่งที่ทำงานสำหรับฉันในท้ายที่สุดเป็นคำตอบในคำถาม SO อีก
นี่คือเนื้อหา
ปัญหาคือทั้ง Brave และ Safari ใช้ Intelligent Tracking Prevention (ITP) ซึ่งขัดขวางการตรวจสอบสิทธิ์แบบเงียบไม่ให้ทำงาน
วิธีแก้ปัญหาที่ได้ผลสำหรับฉันคือเปิดใช้งานโทเค็นการรีเฟรชแบบหมุน (ผ่านแดชบอร์ด Auth0) และจัดหาอุปกรณ์ประกอบฉากเพิ่มเติมให้กับผู้ให้บริการ Auth0
อุปกรณ์ประกอบฉากใหม่สองรายการที่จะเพิ่มคือ: useRefreshTokens={true}
และcacheLocation="localstorage"
.
<Auth0Provider
domain={process.env.REACT_APP_AUTH0_DOMAIN}
clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
useRefreshTokens={true}
cacheLocation="localstorage"
>
{children}
</Auth0Provider>
นี่คือเอกสารอย่างเป็นทางการเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการหมุนโทเค็นการรีเฟรช: https://auth0.com/docs/tokens/refresh-tokens
และนี่คือปัญหา github ที่เคลียร์ปัญหานี้ https://github.com/auth0/auth0-react/issues/101