Hey! I tried to send a signup request, but I am only getting the 401 User already exists error, which is strange. I have checked prisma studio to make sure that there wasn't a user already created with the same credentials, and of course there wasn't. If anyone was able to make it work please let me know. Thank you!!

Getting this error on Components/player.tsx line 45 :
Uncaught TypeError: Cannot read properties of null (reading 'seek') at f
if (playing && !isSeeking) { const f = () => { setSeek(soundRef.current.seek()); timerId = requestAnimationFrame(f); };

even I copied your code from repo still getting this error.

On npm install with the current version of dependencies, it throws this error all the time
Packages are not compatible with each other and some of them are not updated in a while

Can you help by providing an alternative to the dependencies?

i ran into this issue in the middleware.ts file. I solved it with changing it into this, just in case someone else has this problem

export default function middleware(req: NextRequest) {
  if (signedinPages.find((p) => p === req.nextUrl.pathname)) {
    const token = req.cookies.TRAX_ACCESS_TOKEN;
    const url = req.nextUrl.clone();
    url.pathname = "/signin";
    if (!token) {
      return NextResponse.redirect(url);
    }
  }
}

I have to say, I can't launch the app after cloning this repo, even if I set all .env required variables. Your documentation is not thorough, explanation on the video is vague and with latest next.js there are errors in the code that prevent continuation of the development.

I've added the database and shadow database URLs in the .env file as shown in the tutorial. However, I am getting the following error when I try to run npx prisma db push:

Error: P1001: Can't reach database server at :5432

Please make sure your database server is running at :5432.

I've tried adding the ?connect_timeout=300 at the end of the URL, but it did not seem to work.

I'm not sure if it is relevant to ask for help on this repository, but could you please assist me in the right direction?

I just through to the Middleware Edge section and I still cannot figure out why it's not redirecting me to the login page. I even just cloned the repo from main, updated my .env.local to my PostgreSQL I was using before, ran the migrations and can see everything in prisma studio but I still get a 401 from the fetcher.ts lib too. There is no cookies that match to token which should be right since I haven't logged in. Not sure even where to start.

export default function fetcher(url: string, data = undefined) {
  return fetch(`${window.location.origin}/api${url}`, {
    method: data ? 'POST' : 'GET',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  }).then((res) => {
    if (res.status > 399 && res.status < 200) {
      throw new Error()
    }
    return res.json()
  })
}

I did update to middleware.ts and to do the response

import { NextResponse } from 'next/server'

const signedinPages = ['/', '/playlist', '/library']

export default function middleware(req) {
  if (signedinPages.find((p) => p === req.nextUrl.pathname)) {
    const token = req.cookies.TRAX_ACCESS_TOKEN

    if (!token) {
      return NextResponse.rewrite(new URL('/signin', req.url))
    }
  }
}

Hey @Hendrixer ,

I'm following your course on frontend masters which uses this app.
It would be great if you add tests to this app so we can see best practices.

II have recently been getting these build failures in my personal repo and it is causing my live page to 404. I've made adjustments to my yml file to make sure the job finds my package-log.json file in my subdirectory but still nothing. Any help is appreciated :)

In the course, I got an error Parameter 'handler' implicitly has an 'any' type. if I don't give handler type with any.
Below is my solution, hope this can help. ;)

// lib/auth.ts
export const validateRoute = (
  handler: any // I have to give type any, and the error will disappear
) => {
  return async (
    req: NextApiRequest,
    res: NextApiResponse
  ): Promise<void> => {
    const { SPOTIFY_ACCESS_TOKEN: token } = req.cookies

    if (token) {
      let user

      try {
        const { id } = verify(token, 'hello') as JwtPayload
        user = await prisma.user.findUnique({
          where: { id },
        })

        if (!user) {
          throw new Error('Not real user')
        }
      } catch (e) {
        return res.status(401).json({ error: 'Not authorized' })
      }

      return handler(req, res, user)
    }

    return res.status(401).json({ error: 'Not authorized' })
  }
}

So I wrapped user to req method, tweak a little bit code, and this work very well. ;)

// lib/auth.ts
import { JwtPayload, verify } from 'jsonwebtoken'
import type { NextApiRequest, NextApiResponse } from 'next'
import prisma from './prisma'

export type NextApiRequestWithUser = NextApiRequest & { user: JwtPayload } // need to export this to me.ts

// higher order function wrapper for validateRoute
export const validateRoute = (
  handler: (req: NextApiRequestWithUser, res: NextApiResponse) => void
) => {
  return async (
    req: NextApiRequestWithUser,
    res: NextApiResponse
  ): Promise<void> => {
    const { SPOTIFY_ACCESS_TOKEN: token } = req.cookies

    if (token) {
      let user

      try {
        const { id } = verify(token, 'hello') as JwtPayload
        user = await prisma.user.findUnique({
          where: { id },
        })

        if (!user) {
          throw new Error('Not real user')
        }
      } catch (e) {
        return res.status(401).json({ error: 'Not authorized' })
      }

      req.user = user // register user to req

      return handler(req, res)
    }

    return res.status(401).json({ error: 'Not authorized' })
  }
}

// pages/api/me.ts
import { NextApiResponse } from 'next'
import { NextApiRequestWithUser, validateRoute } from '../../lib/auth'

export default validateRoute(
  (req: NextApiRequestWithUser, res: NextApiResponse) => {
    res.json(req.user)
  }
)

eslint will show an 'no-unused-vars' error. Below is my solution.
ref: https://stackoverflow.com/questions/55807329/why-eslint-throws-no-unused-vars-for-typescript-interface

// eslint.js
rules: {
'@typescript-eslint/no-unused-vars': [
      2,
      {
        args: 'none',
      },
    ],
}

When we try to run the http:3000/api/hello command in cmd , i get the error : http is not recognized has an internal or external command. And after that i installed the http server using the command "npm install http-server". this command installed the http server, but still if i run the the http command i get the same error. please solve this issue.

Hi,

I have an issue regarding the use of Heroku postgresql database.
I received an email from Heroku speifying that the database needed maintenance.

It seems the credentials on Heroku are rotating ?

When I update my .env files, it does not work and authentication fails.
Is anyone knowing about this ?
How to set-up this in order to keep it working ?

Thanks in advance

I'm up to the part in the lesson where we add a logo.

Looking at the resources though I don't see the URL for the site in notion that contains this image? Can someone link it please?

Receiving this error from next.js due to the '/signin' route.

I resolved by hardcoding 'https://localhost3000/signin' but I was wondering if anyone had a more dynamic solution?

import { NextResponse } from 'next/server'

const signedinPages = ['/', '/playlist', '/library']

export default function middleware(req) {
  if (signedinPages.find((p) => p === req.nextUrl.pathname)) {
    const token = req.cookies.TRAX_ACCESS_TOKEN

    if (!token) {
      return NextResponse.redirect('/signin')
    }
  }
}

Unhandled Runtime Error : "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. Caused by Button in the AuthForm component

Error shows up when button attribute isLoading={isLoading} , and we click the button text content then (setLoading is triggered and spinner should showup in place of a text node):

<Button
   type="submit"
   bg="green.500"
   isLoading={isLoading}
   sx={{
     '&:hover': {
        bg: 'green.300',
     },
   }}
>
  {mode}
</Button>

• Generate the same error,

 <Button 
    type="submit" 
    bg="green.600" 
    isLoading={isLoading}
    loadingText="loading..."
    sx={{
        "&:hover": {
            bg: "green.400"
        }
    }}
 >
        Submit
</Button>

No errors with:

• Button works correctly when we click area outside the button text.
• The lack of the text as a child doesn't produce any errors:

 <Button 
    type="submit" 
    bg="green.600" 
    isLoading={isLoading}
    loadingText="loading..."
    sx={{
        "&:hover": {
            bg: "green.400"
        }
    }}
 >
</Button>

• The button doesn't cause an error when a child is another react component (not a text node):

 <Button 
    type="submit" 
    bg="green.600" 
    isLoading={isLoading}
    loadingText="loading..."
    sx={{
        "&:hover": {
            bg: "green.400"
        }
    }}
 >
        <Text>{mode}</Text>
</Button>

• no issues when isLoading is set to false