Back

Next js Appwrite cookie #2

  • 0
  • Web
discorrrdbomba
26 Nov, 2023, 18:58

i om on the way opening it 😉

TL;DR
The user is seeking clarification on using cookies in a Next.js and Appwrite application. There is a discussion about custom domains and whether the two apps need to be on the same main domain. The solution is provided in the form of code that uses the cookie header instead of the actual cookie in requests.
discorrrdbomba
26 Nov, 2023, 18:59

ahhh ja, i've been there, its a good starting point, but there is right away after you are starting coding, the next trap - they are making use of the anonymous account - which has another flow than using the email session

discorrrdbomba
26 Nov, 2023, 19:01

which @fafa for sure is also aware of, as I understood from his/her last posts 😉

fafa
26 Nov, 2023, 19:03

Yeah, I researched a lot and this is so far what been working well for me.

fafa
26 Nov, 2023, 19:04

Just make sure you use the cookie header instead of using the actual cookie in requests, like this:

TypeScript
import { NextResponse } from "next/server";
import { headers } from "next/headers";

export const runtime = "edge";

export async function GET(request) {
  try {
    const headersList = headers();
    const cookieHeader = headersList.get("cookie");

    // Assume the last segment of the URL is the user ID
    const galleryId = request.url.split("/").pop();

    // Construct the URL for the external fetch
    const fetchURL = `${process.env.NEXT_PUBLIC_API_URL}/v1/databases/65527f2aafa5338cdb57/collections/655cb829dbf6102f2436/documents/${galleryId}`;

    const response = await fetch(fetchURL, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "X-Appwrite-Project": `${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`,
        "X-Appwrite-Response-Format": "1.4.0",
        Cookie: cookieHeader,
      },
    });

    if (!response.ok) {
      throw new Error("Failed to fetch data");
    }

    const data = await response.json();
    return NextResponse.json(data, { status: 200 });
  } catch (error) {
    return NextResponse.json(error.message, { status: 500 });
  }
}
fafa
26 Nov, 2023, 19:05

Because the session cookie is (and should be) HTTPOnly and Secure, so you cannot read the cookie 🙂

Drake
26 Nov, 2023, 19:06

Did you read the readme?

discorrrdbomba
26 Nov, 2023, 19:06

so @fafa ...that means you are also using your app on the same base-domain, like the one your self-hosted appwrite instance is running on...?

Drake
26 Nov, 2023, 19:06

It's the same idea, just different API call

discorrrdbomba
26 Nov, 2023, 19:06

i'll have a check again right now

fafa
26 Nov, 2023, 19:07

My appwrite instance is not on the same domain. It doesn't need to be either 😄

discorrrdbomba
26 Nov, 2023, 19:08

i thought so, as far as i understood the code and docs, but @Drake you just mentioned it should....or did i missunderstand you?

fafa
26 Nov, 2023, 19:08

Well, not for my case, that is.

The most important part is having the platform added (web) so the api calls work

fafa
26 Nov, 2023, 19:09

I do use a custom domain using a subdomain, but it also works going directly to my other main domain :)

discorrrdbomba
26 Nov, 2023, 19:12

so @Drake you was stating that both apps have to be on the same main domain, meaning one could be on the domain, and one on some subdomain should be okay?

fafa
26 Nov, 2023, 19:13

the emote steven 💀 what does that even mean <:1lolol:638463120632709144>

Drake
26 Nov, 2023, 19:14

Yes, that's okay. Like Appwrite custom domain at appwrite.example.com and your nextjs running on example.com

Drake
26 Nov, 2023, 19:15

This domain, that domain. It's confusing without details

Drake
26 Nov, 2023, 19:16

This is explained in the readme

fafa
26 Nov, 2023, 19:17

Haha

discorrrdbomba
26 Nov, 2023, 19:20

okay, understand - but on the other hand, if I have my client calling/requesting a nextjs route, which then calls the appwrite api, and receives the email/session cookies including the hash from the api, and then returning the response (including the just received header/cookie object) to the client, which in turn saves the two "a_session_..." cookies to the browser - would not that be completely okay, also if the appwrite api runs on any other domain, as long as the domain name is saved as the value to the "domain"-key inside of the above mentioned cookies? Becaus then, any call from this domain, should be able to read the cookies, if the client does a request directly to this domain...?

discorrrdbomba
26 Nov, 2023, 19:20

or am I missing some part...

Drake
26 Nov, 2023, 19:22

It's a little confusing and hard to understand without concrete examples of domains...

fafa
26 Nov, 2023, 19:24

What you should do, is create custom domain called for example api.nextjs.com, where your project page would be nextjs.com. This is the best way

discorrrdbomba
26 Nov, 2023, 19:25

i'll give it a try, and get back to you! Thank you both!

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more