Initialize firebase and added firebase.js config file

[ranegray]

This should be everything we need to start coding. Everything else can be handled in the firebase console which I will add people too.

[ranegray]

This is my first ever PR so lemme know if I'm dumb or did something wrong.

[MacAndersonUche]

Nice Looks Good to me

[MacAndersonUche]

@toreylittlefield please review this

[toreylittlefield]

@MacAndersonUche / @ranegray you want to fix this up so we can merge it?

[ranegray]

@toreylittlefield do i just delete the conflict markers using the web editor?

[toreylittlefield]

@ranegray first switch to main.

Then pull down the changes git pull

Then switch back to your branch here.

Then merge main onto your branch git merge origin/main

You'll have the chance to solve the merge conflicts. I recommend just solving the conflicts in the package.json. Looks like new files have been installed. Don't worry about the package-lock it'll be too big a pain in the ass.

once you resolve the merge conflicts in package.json. Just delete package-lock and then run npm install it'll create a new package lock. Push up all the new changes for the package.json and package-lock 👍

[toreylittlefield]

I believe these keys need to be prefix with NEXT_PUBLIC to work clientside. I don't know enough about firebase yet but are these configuration values supposed to be exposed client side or server side only?

I think only firebase admin keys should be private and secured server side?

Also nextjs will work out of the box with a .local.env file or whatever but not .env see the docs.

https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

Can you also just confirm somehow that the configuration is working?

@MacAndersonUche @ranegray

[ranegray]

From the docs (https://firebase.google.com/docs/projects/api-keys):

Unlike how API keys are typically used, API keys for Firebase services are not used to control access to backend resources; that can only be done with Firebase Security Rules (to control which users can access resources) and App Check (to control which apps can access resources).

Usually, you need to fastidiously guard API keys (for example, by using a vault service or setting the keys as environment variables); however, API keys for Firebase services are ok to include in code or checked-in config files.

[toreylittlefield]

@ranegray you're right but maybe safer for now to use the .env.local because we haven't set the Firebase Security Rules

[ranegray]

There is a .env.local i created it. do you want me to put that file somewhere. obviously its not going to push to GitHub

[toreylittlefield]

@ranegray yep you're right no need to share it 😄 Just please update the variable name for those secrets to use the NEXT_PUBLIC syntax thank you!

[toreylittlefield]

@ranegray nice work and thanks! I got it working on my end using my own firebase credentials 💯 .

I'll merge for now but my suggestion is to move out this file into the lib directory under a firebase dir. So lib/firebase/firebaseConfig.js or something.

Another thing is the env variable names should be all uppercase and separated with an underscore. This is just JS convention. It doesn't change anything.

NEXT_PUBLIC_apiKey -> NEXT_PUBLIC_API_KEY

Last thing
const firebaseAnalytics = getAnalytics(app); throws an a window not defined error. It's a nextjs thing because of SSR. I think we don't need the analytics right now so we can remove it and figure out the solution later.

I'll create a separate ticket for these issues here #20.

Again great job and congrats!