ข้อผิดพลาดคุกกี้ Samesite บน localhost พร้อม auth0

Aug 18 2020

ฉันใช้ auth0 เพื่อใช้การตรวจสอบสิทธิ์ในแอปตอบกลับของฉัน ฉันใช้ตะขอ useAuth0 () ดังต่อไปนี้

const { isAuthenticated, isLoading } = useAuth0();

ฉันยังใช้การเข้าสู่ระบบโดยใช้ไฟล์

const { loginWithRedirect } = useAuth0();
.
.
.
<button onClick={() => loginWithRedirect()} />

เมื่อฉันกดปุ่มมันจะเปลี่ยนเส้นทางไปที่ auth0 และฉันสามารถเข้าสู่ระบบได้ หลังจากเข้าสู่ระบบระบบจะเปลี่ยนเส้นทางกลับไปที่แอปและแสดงเส้นทางที่เข้าสู่ระบบโดยไม่มีปัญหาใด ๆ อย่างไรก็ตามปัญหาคือเมื่อฉันทำการเปลี่ยนแปลงใด ๆ ในแอปมันจะโหลดซ้ำและฉันพบหน้าเข้าสู่ระบบอีกครั้งแม้ว่าฉันจะล็อกอินแล้วก็ตามในแท็บปัญหาของ Chrome จะแสดงข้อความนี้

ฉันไม่สามารถเข้าใจได้ว่าทำไมมันไม่ทำงานเมื่อรีเฟรช แต่ทำไมมันถึงใช้งานได้กับการเปลี่ยนเส้นทางหลังจากเข้าสู่ระบบและฉันพยายามหาวิธีแก้ไขตั้งแต่เมื่อวานนี้ แต่ก็ยังไม่มีโชค ฉันเจอคุกกี้ที่ทำให้เกิดคำเตือน SameSite ของ Chromeซึ่งเป็นคำถามที่ใกล้เคียงที่สุดที่ฉันสามารถหาได้ แต่ดูเหมือนจะไม่ได้คำตอบที่ถูกต้องเกี่ยวกับวิธีแก้ปัญหา

คำตอบ

KennyJohnJacob Aug 28 2020 at 05:18

สิ่งที่ทำงานสำหรับฉันในท้ายที่สุดเป็นคำตอบในคำถาม 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