Uploading Spotify tokens

[walter-grace]

What would the terminal script look like for using the firebase cli to uploading your client id and secret. I'm not having such luck. Really great project!

[walter-grace]

This is the error I am getting, I tried the npm install and it didn't seem to work

Try npm install @types/query-string if it exists or add a new declaration (.d.ts) file containing `declare module 'query-string'; TS7016

 7 |     Redirect,
 8 | } from "react-router-dom"

9 | import * as querystring from 'query-string' | ^ 10 | 11 | import { ROUTES, SPOTIFY_REDIRECT_URL, DEV_SPOTIFY_REDIRECT_URL } from '../../constants' 12 | import { HomePage } from '../Home'`

[brianjychan]

Uploading firebase function env variables: https://firebase.google.com/docs/functions/config-env

Could you share what error occurred when you ran npm install @types/query-string ?

[walter-grace]

Thanks for the quick response! I am still getting the same error after installing, I put my firebase API in the .env and then just exported my Spotify keys via CLI.

[brianjychan]

of course. Try running npm uninstall query-string and then npm install query-string again?

[walter-grace]

npm uninstall query-string

great that worked! but now the screen loads and is just blank. does the firebase api go in the .env as REACT_APP_API?

[brianjychan]

make them match the vars here: https://github.com/brianjychan/react-spotify-firebase-boilerplate/blob/master/src/components/Firebase/firebase.tsx

Also be sure to stop and restart npm run start after adding new stuff in your .env

[brianjychan]

REACT_APP_API_KEY=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_APP_ID=
REACT_APP_AUTH_DOMAIN=

[walter-grace]

All working there! I am missing the client ID now, is that just not from inputing properly on the firebase cli ?

firebase functions:config:set spotify.secret="SECRET" spotify.id="THE CLIENT ID" ? Then firebase deploy?

[brianjychan]

Yup, when you run firebase functions:config:get you should see the env vars that are currently set in your Firebase Functions backend. Do you see it when you run that?

[walter-grace]

Okay that is showing the correct tokens, now when I try to firebase deploy I get this error sh: tslint: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! functions@ lint:tslint --project tsconfig.json npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the functions@ lint script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install?

[brianjychan]

Definitely relatable! Run npm install in the functions dir

[walter-grace]

Now getting this `src/Types/UserProfile.ts:1:1 - error TS6133: 'firestore' is declared but its value is never read.

1 import { firestore } from "firebase-admin"

Found 1 error.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! functions@ build: `tsc`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the functions@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.`

[brianjychan]

hmm, solving that would depend on your implementation. If you search that error up online, it would help you understand how it might relate to your code

[walter-grace]

hmm, solving that would depend on your implementation. If you search that error up online, it would help you understand how it might relate to your code

I found this and oddly enough, you commented on it. https://github.com/firebase/firebase-tools/issues/2513

I try to run firebase deploy --only functions just getting this

tsc

src/Types/UserProfile.ts:1:1 - error TS6133: 'firestore' is declared but its value is never read.

1 import { firestore } from "firebase-admin"

Found 1 error.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! functions@ build: `tsc`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the functions@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[brianjychan]

That may be a similar, but slightly different error. In your case, this may be expected behavior for tsc, which does intend to catch unused references. Do you use firestore? If not, try commenting it out?

[walter-grace]

That may be a similar, but slightly different error. In your case, this may be expected behavior for tsc, which does intend to catch unused references. Do you use firestore? If not, try commenting it out?

In the firebase.json? I dont see the import firestone in the user profile. I changed the firebase.json and still got the same error

[brianjychan]

It looks like in functions/src/Types/UserProfile?

Brian On Feb 24, 2021, 3:35 PM -0800, Walter Grace notifications@github.com, wrote:

That may be a similar, but slightly different error. In your case, this may be expected behavior for tsc, which does intend to catch unused references. Do you use firestore? If not, try commenting it out? In the firebase.json? I dont see the import firestone in the user profile. I changed the firebase.json and still got the same error — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[walter-grace]

Okay that did change it by removing import { firestore } from "firebase-admin" .

Now I am just missing the client id parameter everything seems to be working, but the client id is still missing.

firebase deploy --only works and doing what it should but the issue is still client id. I used firebase functions:config:get and my keys are showing up

---

I think if you could do a quick videocast of the setup that would be really helpful! Just doing your read.me, I am having issues many different times. If not, no worries! {Thanks again}

[brianjychan]

Sorry to hear that there's been bumps! Unfortunately I dont have the time to do a screencast right now, but happy to answer any specific questions you have here if you still have bumps implementing the repo

[walter-grace]

Do I do functions or databse? Maybe I am getting tripped up here.

[brianjychan]

Up to you, but I use the template repo with firestore: https://github.com/brianjychan/react-spotify-firebase-boilerplate/blob/master/src/components/Firebase/firebase.tsx#L41

Realtime database is the older product.

Check out google's docs about how Firestore and Firestore Rules work.

Then, firebase Functions is used for server-side computing tasks (such as those that use the spotify secret to get info from the spotify API). Because if you used that secret in your client side code, anyone on your site would see it.

https://github.com/brianjychan/react-spotify-firebase-boilerplate/blob/master/src/components/App/App.tsx#L45

[walter-grace]

Would this have any effect on saving the token on after running firebase deploy? This is the message that comes up after. The app is running locally but I can't get the client ID.

Error: package.json in functions directory has an engines field which is unsupported. Valid choices are: {"node": "10"}, {"node":"12"}, and {"node":"14"}.

Deploys to runtimes below Node.js 10 are now disabled in the Firebase CLI. Existing Node.js 8 functions will stop executing on 2021-03-15. Update existing functions to Node.js 10 or greater as soon as possible.

[brianjychan]

search the repo for client_id, youll need this env var: https://github.com/brianjychan/react-spotify-firebase-boilerplate/blob/master/src/components/App/App.tsx#L87

as for node 10, youll have to upgrade firebase functions in package.json. change the 8 to 10 here:

"engines": {
    "node": "8"
  },

[walter-grace]

That fixed my client ID issue! Thank you, now I am getting stuck on the log in screen. When I inspect my console here is what is showing up.

I think it is because of the URL redirect, do I need to put my firebase URL in the 'SPOTIFY_REDIRECT_URL" ? Also what URL do I need to put in the callback on Spotify devs like in this photo. I put http://localhost:3000/loginWithCode but it seemed not to work.

this is my config.ts export const SPOTIFY_REDIRECT_URL = 'https://mysite.com/loginWithCode' // The URL of your web app that users should be redirected to after completing spotify Auth export const DEV_SPOTIFY_REDIRECT_URL = 'http://localhost:3000/loginWithCode' // The dev version of the above

[brianjychan]

Hmmm do any errors show up in the firebase functions console?

when yuo publish the site, youll need to make SPOTIFY_REDIRECT_URL reflect your domain name, but for now while you’re running your local dev server, the frontend React code should be configured to ask the loginWithCode Function to redirect to your local dev server url: https://github.com/brianjychan/react-spotify-firebase-boilerplate/blob/master/src/components/App/App.tsx#L36

Brian On Feb 27, 2021, 6:39 AM -0800, Walter Grace notifications@github.com, wrote:

That fixed my client ID issue! Thank you, now I am getting stuck on the log in screen. When I inspect my console here is what is showing up. I think it is because of the URL redirect, do I need to put my firebase URL in the 'SPOTIFY_REDIRECT_URL" ? Also what URL do I need to put in the callback on Spotify devs like in this photo. I put http://localhost:3000/loginWithCode but it seemed not to work. this is my config.ts export const SPOTIFY_REDIRECT_URL = 'https://mysite.com/loginWithCode' // The URL of your web app that users should be redirected to after completing spotify Auth export const DEV_SPOTIFY_REDIRECT_URL = 'http://localhost:3000/loginWithCode' // The dev version of the above — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.