Kesalahan cookie situs sama di localhost dengan auth0
Saya menggunakan auth0 untuk mengimplementasikan otentikasi di aplikasi react saya. Saya menggunakan hook useAuth0 () sebagai berikut,
const { isAuthenticated, isLoading } = useAuth0();
Saya juga telah menerapkan login menggunakan
const { loginWithRedirect } = useAuth0();
.
.
.
<button onClick={() => loginWithRedirect()} />
Ketika saya menekan tombolnya, itu dialihkan ke auth0, dan saya bisa masuk. Setelah masuk, itu mengarahkan kembali ke aplikasi, dan menunjukkan rute masuk tanpa masalah apa pun. Namun masalahnya adalah ketika saya membuat perubahan apa pun di aplikasi, itu memuat ulang, dan saya disajikan dengan halaman masuk lagi, meskipun saya sudah masuk. Di tab Masalah Chrome itu menunjukkan pesan ini.

Saya tidak dapat mengetahui mengapa itu tidak berfungsi pada penyegaran, tetapi mengapa itu berfungsi pada pengalihan setelah masuk, dan saya telah mencoba menemukan solusi sejak kemarin, tetapi sejauh ini tidak berhasil. Saya menemukan Temukan cookie yang menyebabkan peringatan SameSite Chrome yang merupakan pertanyaan terdekat yang dapat saya temukan, tetapi tampaknya tidak memberikan jawaban yang tepat tentang cara mengatasinya.
Jawaban
Apa yang berhasil bagi saya pada akhirnya adalah jawaban atas pertanyaan SO lainnya .
Ini isinya,
Masalahnya adalah Brave dan Safari sama-sama menggunakan Intelligent Tracking Prevention (ITP), yang mencegah autentikasi senyap berfungsi.
Solusi yang berhasil bagi saya adalah mengaktifkan token penyegaran yang berputar (melalui dasbor Auth0) dan memberikan alat peraga tambahan ke penyedia Auth0.
Dua props baru untuk ditambahkan adalah: useRefreshTokens={true}
dan 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>
Berikut adalah dokumen resmi untuk mempelajari lebih lanjut tentang memutar token penyegaran: https://auth0.com/docs/tokens/refresh-tokens
Dan ini adalah masalah github yang menyelesaikan masalah tersebut https://github.com/auth0/auth0-react/issues/101