Conditional UI SvelteKit w/ Firebase Auth - firebase-authentication

Question

I'm trying to show and hide links (black boxes and circle) based on the onAuthStateChanged from Firebase with SvelteKit. The sign-in & logout functionality work based on console.log() but whenever I use SvelteKit's {If} with {#if user} to check for a user nothing changes.
Page Structure:
The Code:
signIn.svelte(Main Login Function)
function login() {
let email = document.getElementById("emailInput").value;
let password = document.getElementById("passInput").value;
if (title == "Login") {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
localStorage.setItem("uid", user.uid);
localStorage.setItem("isLoggedIn", true);
goto("/");
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
} else {
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
console.log(user);
goto("/");
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
}
}
Navbar.svelte
Navbar , NavUl , and NavLi are from the flowbite-svelte library
<script>
// Gets User
const auth = getAuth();
const user = auth.currentUser;
</script>
//Navbar
<Navbar>
<NavUl>
<!-- Logged In Links -->
{#If user}
<NavLi>Team</NavLi>
<NavLi>Reps</NavLi>
<NavLi>Profile</NavLi>
<NavLi>Dark Mode Toggle</NavLi>
{else}
<!-- Logged Out Links -->
<NavLi>Dark Mode Toggle</NavLi>
{/if}
</NavUl>
</Navbar>