#Cookie not picked up after request from external source

5 messages · Page 1 of 1 (latest)

rare bronze
#

I have a custom auth solution that is designed to work like this:

  1. User adds email
  2. Email is sent to the user with link (with a token)
  3. User clicks link, which hits an auth endpoint. If the token is valid, a cookie is set and they are redirected to the home page, signed in.

When I mimic the email behavior by printing a link on the screen, everything works fine.

But when I mimc an email service (using Nodemailer + Ethereal in the test), I run into a consistent issue. Flow is like this:

  1. User lands on the auth page as expected.
  2. Auth page does what it should and sets the cookie. I can log the cookie to the console from the auth page.
  3. Redirects, as expected to the home page.
  4. Home page can't get the cookie (which is set).
  5. Refreshing doesn't help, including a hard refresh
  6. What ultimately solves it is clicking another link in the UI.

This is all happening locally and with SSR. I haven't tried deploying it yet.

oak gulchBOT
#

Hi @rare bronze. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, it seems like you might be encountering a known issue with Astro where cookies are lost after a redirect when using middleware. This issue was reported on GitHub (source (https://github.com/withastro/astro/issues/7484)).

Here's the code snippet from the issue that demonstrates the problem:

const middleware = defineMiddleware(async (context, next) => {
        // ...
	if (isAuthSuccess) {
		context.cookies.set('jid', '<TOKEN>')
		return context.redirect(`/dashboard`)
	}
	return next()
})
export const onRequest = sequence(middleware)

In this case, when the user is successfully authenticated, a cookie is set and the user is redirected to the dashboard. However, when checking the cookie value on the dashboard page, it's found to be empty. If the redirect statement is removed, then it works as expected.

Unfortunately, the extracts do not provide a solution to this issue. You might want to follow the GitHub issue for updates or consider submitting a bug report if your issue is different.

In the meantime, you could try using Astro's server-side rendering (SSR) capabilities to handle user authentication. Astro SSR allows you to write server code directly in the component front matter, which could potentially help with your issue. Here's an example of how user authentication works in Astro SSR (source (https://astro.build/blog/experimental-server-side-rendering/)):

---
// Example: src/pages/index.astro
// In an Astro component (*.astro), you write server code directly
// in the component front matter (this space between the two --- fences).

// 1. Import any dependencies (Full support for JavaScript/TypeScript)
import { getUser } from "../api/index.js"

// 2. Check that the user token exists and is not malicious.
const user = await getUser(Astro.request)
#

// 3. If no user was found, return a redirect. This instantly
// completes the response with the correct status code & headers.
if (!user) {
return Astro.redirect("/login")
}

// 4. If the user is logged in, you can now use the user object
// right in your page template to show an avatar, name, etc.

<html>
...
<h1>Hello {user.name} 👋</h1>
<img src={user.avatar} alt={user.name} />
...
</html>


This approach might help you to handle the user authentication and redirection more effectively.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
#

@rare bronze kapa.ai is still learning and improving, please let us know how it did by reacting below