New Cookie Auth Example

[dastrong]

Feature request

Is your feature request related to a problem? Please describe.

The current with-cookie-auth example is lacking

Describe the solution you'd like

If the following is actually secure and preferable (newer to cookies), I'd love to improve that example or build a newer, larger one for everyone.

From what I've read (#10062 and #9913), a cookie needs to be set in the Next API route (with plain old 'cookie' and setHeader) with the following to be secure:

secure: process.env.NODE_ENV === 'production',
httpOnly:  true,
expires: 'Same date/time here',
sameSite: 'Strict'

Implementation details: I'm using Next with an external Express API on a different origin. The user would be stored in a React Context Provider along with a JWT used to verify user on CRUD operations. So when a user logs in or signs up, we'll send a sessionID, user object, and that a JWT.

In my case, I want to store a sessionId (sid) in a cookie, so that if the user closes the tab and comes back within a day, they'll automatically be logged back in. So after the Context Provider mounts, we'd make a fetch request to a Next verify API route. If there's a sid cookie, we'll send that to our external API to get the user object and that JWT. Both of which would be put in our User Provider.

We'd have to include the cookie in the fetch like this, since it's cross domain.

fetch('external api url', {
  method: "POST",
  headers: { cookie: 'attach the cookie here' }
})

We're not storing the sid in localStorage or a client-side cookie, so that would be secure. Would sending the cookie through the header to the external API be okay?

Describe alternatives you've considered

Well I could do an unsecured method using a client cookie or localStorage, but I'm trying to avoid doing that since it's not secure.

Additional context

@lfades I saw you comment on both the issues I linked above. Maybe you could give some insight into if an example like this would be beneficial to the community.

[lfades]

@dastrong If you're not storing the cookie client-side then how are you sending the cookie in a header?

If the fetch is happening in an API route it's okay, because the server will have access to the cookie, but if that's happening from the browser the cookie won't be available in any way if httpOnly is set. What you can do is set credentials: 'include' in the fetch to send the cookies over cross-origin request, or if the external API lives in the same domain, you don't have to do anything.

[dastrong]

@lfades hmm I tried using credentials include when fetching from the next API route, but wasn't receiving the cookie server side. So that's why I attached the cookie to headers.

I can see the httpOnly cookie in req.cookies and configured the backend cors to allow credentials. I'll have another go this afternoon

[Timer]

We have updated our auth examples since this was opened! See the new ones!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.