scrimba
Learn Firebase
Authentication
Firebase Setup
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Firebase Setup
AboutCommentsNotes
Firebase Setup
Expand for more info
index.js
run
preview
console
/* === Imports === */

/* === Firebase Setup === */

/* === 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"
}
Console
/index.html
-5:17