{"id":24383702,"url":"https://github.com/path-yu/youtube_api_basic","last_synced_at":"2026-05-03T21:31:19.499Z","repository":{"id":271075087,"uuid":"909306504","full_name":"path-yu/youtube_api_basic","owner":"path-yu","description":"This is a basic project showing how to call the YouTube Data API using Nextjs.","archived":false,"fork":false,"pushed_at":"2025-04-05T09:48:53.000Z","size":195,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-01T04:55:27.173Z","etag":null,"topics":["google","googleapis","nextjs","oauth2","taliwindcss","typescript","youtubedataapi"],"latest_commit_sha":null,"homepage":"https://youtube-manger-nwpl.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/path-yu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-12-28T10:02:41.000Z","updated_at":"2025-04-05T09:48:56.000Z","dependencies_parsed_at":"2025-02-25T13:21:00.878Z","dependency_job_id":"3cafa9ab-00d4-49a0-a159-30e99489c52c","html_url":"https://github.com/path-yu/youtube_api_basic","commit_stats":null,"previous_names":["path-yu/youtube_manger"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/path-yu/youtube_api_basic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/path-yu%2Fyoutube_api_basic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/path-yu%2Fyoutube_api_basic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/path-yu%2Fyoutube_api_basic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/path-yu%2Fyoutube_api_basic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/path-yu","download_url":"https://codeload.github.com/path-yu/youtube_api_basic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/path-yu%2Fyoutube_api_basic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32586186,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google","googleapis","nextjs","oauth2","taliwindcss","typescript","youtubedataapi"],"created_at":"2025-01-19T10:15:45.514Z","updated_at":"2026-05-03T21:31:19.481Z","avatar_url":"https://github.com/path-yu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This is a basic project showing how to call the YouTube Data API using NextJs, completes Oauth2 login and realizes simple use of search and add comment interfaces.\nThis is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\n## Environment variables\n\nPlease create a .env file in the project root directory and add the following content\n\n```\nNEXT_PUBLIC_CLIENT_ID=YOUR_CLIENT_ID\nNEXT_PUBLIC_REDIRECT_URI=NEXT_PUBLIC_REDIRECT_URI\nNEXT_PUBLIC_CLIENT_SECRET=YOUR_CLIENT_SECRET\n```\n\n## Apply for YouTube Data API access\n\nTo use the YouTube Data API, you need to apply for API usage in the Google API Console:\n\n1. Open the [Google API Console](https://console.developers.google.com/).\n2. Create a new project or select an existing project.\n3. Navigate to the \"Credentials\" page, click on the \"Create Credentials\" button, and select \"API Key\".\n4. On the created API Key page, copy your API key and paste it into the `.env` file as `CLIENT_ID`.\n\n## Setting REDIRECT_URL\n\nIf you need to use OAuth 2.0 for authorization, please set the `REDIRECT_URL`:\nThe REDIRECT_URL can be filled with the Vercel deployment address when the project is deployed online. The default path is /oauth2callback.\n\n1. Navigate to the \"OAuth consent screen\" page in the [Google API Console](https://console.developers.google.com/) and configure the consent screen.\n2. Navigate to the \"Credentials\" page, click on the \"Create Credentials\" button, and select \"OAuth client ID\".\n3. On the created OAuth client ID page, fill in the redirect URI. Copy this URI and paste it into the `.env` file as `REDIRECT_URL`.\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n\n## Local Testing with testToken\n\nFor local development (NODE_ENV === \"development\"), the project includes a testToken in `lib/fetchGoogleApi.ts` to simulate an authenticated state. To use it effectively:\n\n### 1. Obtain a Test Token:\n\n- Visit the [Google OAuth 2.0 Playground](https://developers.google.com/oauthplayground/).\n\n- Select the desired YouTube API scopes `https://www.googleapis.com/auth/youtube.readonly`.\n\n- Exchange the authorization code for tokens and copy the access_token, refresh_token, and other fields.\n\n- Update the testToken object in `src/utils/fetchGoogleApi.ts` with these values.\n\n### 2. Example testToken:\n\n```ts\nconst testToken: Tokens = {\n   access_token: \"ya29.your-test-access-token\",\n   refresh_token: \"1//your-test-refresh-token\",\n   expires_in: Date.now() + 3600 \\* 1000, // 1 hour validity\n   token_type: \"Bearer\",\n   scope: \"https://www.googleapis.com/auth/youtube.readonly\",\n};\n```\n\n### Token Expiry:\n\n- The testToken will expire based on its expires_in value (typically 1 hour for access_token). When it expires, the app will attempt to refresh it using the refresh_token.\n- If the refresh_token also expires or becomes invalid (e.g., after 7 days or manual revocation), you must clear the localStorage and update the testToken with new values.\n\n### Clearing localStorage:\n\n- If you encounter errors like \"Token validation failed\" or \"Failed to refresh token\" in development, manually clear the localStorage by running\n- localStorage.clear() in the browser console, or use the logout function provided in `src/utils/fetchGoogleApi.ts`.\n  Example\n\n## Learn More\n\n- To learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n  [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n  You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpath-yu%2Fyoutube_api_basic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpath-yu%2Fyoutube_api_basic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpath-yu%2Fyoutube_api_basic/lists"}