hi, I'm trying to connect to my Youtube account via the @googleapis/youtube package to display video data on my page. I keep getting "error denied" but can't seem to troubleshoot why. Error is "Requests from referrer are blocked" even though I followed detailed instructions....

import React, { Fragment } from 'react'

import Link from 'next/link'

import youtubeService from '../../../../youtube'

import { Gutter } from '../../_components/Gutter'

export async function PlaylistPage() {

const playlistId = 'UUnIyytMWGt41WZAc6QocKcQ' // Replace with your actual YouTube playlist ID

const response = await youtubeService.playlistItems.list({

part: 'snippet',

maxResults: 50, // Set the number of videos you want to retrieve

playlistId,

})

const playlistItems = response.data.items

return (

<div>

<h1>YouTube Playlist</h1>

<ul>

{playlistItems.map(item => (

href={

https://www.youtube.com/watch?v=${item.snippet.resourceId.videoId}}

target="_blank"

rel="noopener noreferrer"

{item.snippet.title}

</a>

</li>

))}

</ul>

</div>

)

}

export default PlaylistPage

I suppose I'd like to rule out any issues with making a 3rd party API call from a Payload page - the above file is how I'm trying it.... Does Payload need me to do it a different way?

seanzubrickas
last year
Are you seeing errors in your console? If so please add screenshots here.
its_just_rich_32241last year

those are my console errors

and FWIW I also opened up the connection in Postman and got a "Permission denied" error so yes, I have every reason to suspect the issue is upstream with my credentials, etc. but I'm new to Payload so I wanted to rule out as much as I can
r0bsoniklast year
Looks to me completely unrelated to payload, but rather React
#
Google Service issue.

Try to add a
Referer
header with your app url to the
gaxios
call. I guess you have it in the
youtubeService
https://github.com/googleapis/gaxios?tab=readme-ov-file#request-options

Or rather in setting defaults:
```
gaxios.instance.defaults = {
  baseURL: 'https://example.com'
  headers: {
    Authorization: 'SOME_TOKEN',
    Referer: 'https://example.com', // <-- Here
  }
}
```
its_just_rich_32241last year
this turned out to be a permissions error that was assumed to be set in the Google console. Thanks for the input, very appreciated.
seanzubrickas
last year
oh wow

good find

glad you were able to sort that out!

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.