Last active
January 28, 2024 15:10
-
-
Save hackinf0/dee2adcaf51e932df90462ba288a6818 to your computer and use it in GitHub Desktop.
Cookie not being set in production
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Hello everyone, today I'll demonstrate how to troubleshoot the issue where the cookie is | |
being successfully set in development environments but not in production. | |
Suppose that in you server you are sending the cookie in the res like bellow: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
app.get( | |
"/auth/google/callback", | |
passport.authenticate("google", { failureRedirect: "/appform" }), | |
async (req, res) => { | |
try { | |
req.session.userId = req.user._id | |
console.log("login successful") | |
console.log(req.user) | |
console.log("Token?:", req.user.token) | |
res.cookie("token", req.user.token, { | |
httpOnly: true, | |
secure: true, | |
sameSite: "none", | |
}) | |
res.redirect(`https://www.somehttpswebsite.in/home}`) | |
} catch (error) { | |
console.error("Error in callback route:", error) | |
res.redirect("/unauthorized") | |
} | |
} | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This code sets a cookie named "token" with the value of the user's token. | |
It ensures the cookie is only accessible via HTTP and not JavaScript, is sent only over HTTPS connections, | |
and allows cross-site usage for authentication while preventing CSRF attacks. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Let's say that you have a protected route which require you to have the token like here: | |
`app.get('/check-login-status', requireAuth)` . Here we have a middleware requieAuth which is responsible | |
for authenticating incoming requests by checking for a token in the request cookie. | |
So in the front end i'd have someting like bellow: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const [isLoggedIn, setLoggedIn] = useState(false) | |
const [loading, setLoading] = useState(true) | |
const navigate = useNavigate() | |
const handleLoginSuccess = async () => { | |
try { | |
const response = await fetch(`${API_BASE}check-login-status`, { | |
method: "GET", | |
credentials: "include", | |
headers: { | |
"Content-Type": "application/json", | |
}, | |
}) | |
}, []) | |
//Notice that here we put a crucial line(this would be the first step for solving this issue): | |
credentials: "include", | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
It instructs the browser to include cookies, HTTP authentication, and client-side SSL certificates on cross-origin requests. | |
When you set credentials: "include", the browser will include cookies associated with the request's origin | |
in the request headers. | |
This is important for authentication purposes because it allows the server to identify | |
and authenticate the user based on stored session information or tokens sent via cookies. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
To resolve the cookie-setting issue in the production environment, | |
I synchronized the frontend domain "example.com" with the backend domain "api.example.com," | |
ensuring seamless cookie management across both components. | |
I recommend implementing one of the two suggestions I provided to resolve the issue effectively. | |
🦉OWL=>MERN STACK DEV |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment