Store each user's ice-cream collection in protected routes

[sheleoni]

for now, give each user a unique ice-cream flavor (e.g. a string, like 'chocolate', 'strawberry', etc) users can view their own collection (not others') when they are signed in at http://localhost:3000/user/collection

• [x] create an iceCream schema in /models
• [x] in mongodb, create a new collection that stores all available ice-cream varieties without user-specific info
• [x] supply the collection with initial data by creating 3 samples of iceCream. Use the .save() method to store these iceCream varieties in mongodb

  linking the collection of user to the collection ice-cream flavors

• [x] update (with code) the existing user collection to include a new field unlockedIceCream. It should contain an empty array.

  ways to update existing schema

• updateMany(); or
• loop through the records in a db and add the new unlockedIceCream field Conclusion: we will use updateMany for now.

stuff to consider

• schema versioning when updating the schema
• when to update the schema (on user login, i.e. lazy update or all users at once)

viewing each users' owned ice-cream

• [x] add a sample icecream object in one user's document in the database (e.g. let a user have 1 Chocolate ice-cream)

  in user/collection, allow users to see the ice-cream that they currently own

• [ ] for next-auth with app-router, refer to the docs on using getServerSession() with app router

QA

• [x] (created new issue for this) check to see if an ice-cream flavor is deleted, whether it will be reflected in the database → probably deal with in another issue https://github.com/sheleoni/authJS-next-google-template/issues/7

[sheleoni]

problem: const session = await getServerSession(); returns null when called in api/user/userCollection. solved by: adding headers: headers() as a parameter when fetching api/user/userCollection.

 const response = await fetch('http://localhost:3000/api/user/userCollection', {
            method: 'GET',
            headers: headers() // add this
        });

reason for why this solves the issue: ref: https://github.com/nextauthjs/next-auth/issues/7423#issuecomment-1531064680 My understanding is:

1. You must have cookies to check if a user is authenticated.
2. Fetching from a server-side component does not pass cookie to the api/user/userCollection.
3. So, you must pass cookie when are fetching from a server-side component.

Solved by 9fed7a5

[sheleoni]

Problem: fetch failed in production mode Try: https://github.com/vercel/next.js/issues/44062#issuecomment-1445183293

• [x] try to lower node version to 14.21.3
• [x] use 127.0.0.1 in place of localhost:3000 in fetch url http://127.0.0.1/api/user/userCollection
• [x] add dns to next.config.js ref: https://github.com/vercel/next.js/issues/44062#issuecomment-1445185361
• [x] add NODE_TLS_REJECT_UNAUTHORIZED=0 to .env.local ref: https://github.com/vercel/next.js/issues/44062#issuecomment-1482581149
• [x] tried to add revalidate const export const revalidate = 0 // todo: https://stackoverflow.com/questions/76555935/next-js-13-4-fetching-not-working-in-production
• [x] tried to add 'use client'
• [x] adding { cache: "no-store" }, { cache: "no-cache" } to fetch parameters (ref)

None of the above has worked. Found this on stack overflow: https://stackoverflow.com/questions/76905386/typeerror-fetch-failed-during-next-js-project-build Option 1: fetch data directly from component without using /api route handler (?) Option 2: Ignore this fetch error on local build. It may work on deployment. Let's try.

↑ Didn't work.

Now reading: https://medium.com/@kaloyan_17221/fix-vercel-next-js-fetch-failed-from-undici-polyfill-8c66346c9c2f

search keyword:

• app router fetch URL on production build not working

[sheleoni]

OMG FINALLY SOLVED!!! PROBLEM WITH HEADER

        const response = await fetch('http://localhost:3000/api/user/userCollection', {
            method: 'GET',
            // headers: headers() ◀️ delete this
        });

Steps to debug: 1) log the headers()

2) read the error

[sheleoni]

OMG FINALLY SOLVED!!! PROBLEM WITH HEADER

But here comes a new issue occurring at http://localhost:3000/user/collection

After I delete headers(), I won't be able to retrieve user ice-cream flavors anymore:

Only with headers() am I able to retrieve use ice-cream flavour data. However, it breaks in production.

Breaking in production:

[sheleoni]

Update: Maybe api routes aren't available at build time!

Ref: https://stackoverflow.com/questions/76591751/next-js-13-app-router-build-error-when-i-try-fetch-api-route-in-server-compone

[sheleoni]

Ref: https://stackoverflow.com/a/76569284 maybe fetching from own app's api endpoint won't work. maybe really try fetching the data within the component itself without using route handlers?