#Firebase Setup Problem

47 messages · Page 1 of 1 (latest)

uneven ferry
#

Hi, I have just started the Firebase authentication project. I am facing an issue with the Firebase setup. When I paste the Firebase setup code. The output shows a blank screen.

Untitled.jpg
lone torrent
#

IIRC the initial setup of firebase only does a console.log() so that's where you should see something...

uneven ferry
lone torrent
#

can you share your scrim?

uneven ferry
#

/* === Imports === */
import { initializeApp } from "firebase/app"

/* === Firebase Setup === */
const firebaseConfig = {
apiKey: "AIzaKyDlWGe69-ly-YTd-BeF0kTaU1MHOW4uBfw",
authDomain: "loginfiretest.firebaseapp.com",
projectId: "loginfiretest",
storageBucket: "loginloginfiretest.appspot.com",
}

const app = initializeApp(firebaseConfig)
console.log(projectId)

/* === UI === */

/* == UI - Elements == */

const viewLoggedOut = document.getElementById("logged-out-view")
const viewLoggedIn = document.getElementById("logged-in-view")

const signInWithGoogleButtonEl = document.getElementById("sign-in-with-google-btn")

const emailInputEl = document.getElementById("email-input")
const passwordInputEl = document.getElementById("password-input")

const signInButtonEl = document.getElementById("sign-in-btn")
const createAccountButtonEl = document.getElementById("create-account-btn")

/* == UI - Event Listeners == */

signInWithGoogleButtonEl.addEventListener("click", authSignInWithGoogle)

signInButtonEl.addEventListener("click", authSignInWithEmail)
createAccountButtonEl.addEventListener("click", authCreateAccountWithEmail)

/* === Main Code === */

showLoggedOutView()

/* === Functions === */

/* = Functions - Firebase - Authentication = */

function authSignInWithGoogle() {
console.log("Sign in with Google")
}

function authSignInWithEmail() {
console.log("Sign in with email and password")
}

function authCreateAccountWithEmail() {
console.log("Sign up with email and password")
}

/* == Functions - UI Functions == */

function showLoggedOutView() {
hideElement(viewLoggedIn)
showElement(viewLoggedOut)
}

function showLoggedInView() {
hideElement(viewLoggedOut)
showElement(viewLoggedIn)
}

function showElement(element) {
element.style.display = "flex"
}

function hideElement(element) {
element.style.display = "none"
}

lone torrent
#

I can't help you debug this problem with only part of the picture - please send a link to your Scrim

#

Also, this line looks suspicious;
console.log(projectId)

uneven ferry
lone torrent
#

It'll take you 90 seconds to setup a scrim

uneven ferry
lone torrent
#

BTW are you getting errors in your console?

uneven ferry
lone torrent
#

ok, lemme take a look

#

Ok, so the login form is showing for me... what's the problem you're experiencing exactly?

#

it's cause you commented out that console.log(projectId) right?

uneven ferry
#

same Code not working in VS Code

lone torrent
#

Did you comment out that line in vs code as well?

uneven ferry
#

Yeah

lone torrent
#

and it's still not showing?

uneven ferry
#

even if i paste import { initializeApp } from "firebase/app" in the "Import" Section, the Screen shows noting

lone torrent
#

your code is EXACTLY what's in scrimba?

uneven ferry
#

Yeah.

#

I copy paste form there

lone torrent
#

ok, lemme setup in my vs code to see

#

wait, did you install firebase in your vs code?

uneven ferry
#

Yeah like this : npm install firebase

lone torrent
#

ok, yeah

uneven ferry
#

up to date, audited 90 packages in 1s

3 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

lone torrent
#

and how are you starting your app? do you just load the .html page in your browser?

uneven ferry
#

using live server

lone torrent
#

that's your problem.

#

you have an installed version of firebase libraries but you aren't bundling them into a full "app"

uneven ferry
#

oh. How to do that?

lone torrent
#

instead you can use the esm "static" packages OR you'll need a bundler...

#

well, you could setup a new project using vite which will do it for you

#

or, as I say, reference the firebase stuff via their cdn

#

just a sec lemme find it for you

uneven ferry
#

ok, Thanks for helping me out.

lone torrent
#

add this to your html file - you'll need to tweek the bits that you're importing as you progress:

<!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.6.0/firebase-app.js'

    // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
    import { getAnalytics } from 'https://www.gstatic.com/firebasejs/10.6.0/firebase-analytics.js'

    // Add Firebase products that you want to use
    import { getAuth } from 'https://www.gstatic.com/firebasejs/10.6.0/firebase-auth.js'
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/10.6.0/firebase-firestore.js'
  </script>
uneven ferry
#

I just pasted it in HTML (Just before index.js) but still not working

lone torrent
#

sorry, stick those imports into your .js file not your html file...

#

now I see this using live server:

image.png
#

Get it working?

uneven ferry
#

Not yet