I am implementing user authorization using Google using next auth.
The logic is as follows:
The user clicks on the login button using Google, after which he is taken to a page with an account selection.
After selecting an account, it is returned back to the page.
When the page is rendered, the following useEffect is executed:
const { data: session } = useSession();
const dispatch = useDispatch<any>();
useEffect(() => {
console.log(session);
if (session) {
dispatch(
logInWithGoogle({
type: "google",
email: session?.user?.email,
name: session?.user?.name,
socialID: session?.user?.id,
})
);
console.log("qwe");
}
}, [session]);
- loginWithGoogle sends a request to the server, and most importantly, RECEIVES a response.
export const logInWithGoogle = createAsyncThunk("user/logInWithGoogle", async (data: loginWithGoogleData) => {
const formData = new FormData();
formData.append("type", `${data.type}`);
formData.append("email", `${data.email}`);
formData.append("name", `${data.name}`);
formData.append("socialID", `${data.socialID}`);
const response = await serviceFetch.post("/auth/social-networks", undefined, formData);
const res = await response.json();
if (res.result && !Object.keys(res.errors).length) {
updateTokenStorage(res.data.token);
console.log(res);
data.router.replace("/profile");
}
return res;
});
But the data in the storage itself appears only after the page is reloaded, why is that? The session is available immediately after authorization.