CODEWITHSUNDEEP
javascripthtmlfirebase
user18694296
user18694296

Reputation:

Firebase keep user logged in when navigating to other pages

I'm currently able to log in to my user account and successfully navigate to my dashboard while still logged in, but when I go to any other page, my login status is gone. Another issue is when updating my user's info, how can I write the function so that it's updating the info based on who's logged in? I have provided my code below. Thanks!

Edit profile JS:

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize variables
const auth = firebase.auth()

auth.onAuthStateChanged( auth,user => {
    var user = firebase.auth().currentUser;
    if (user) {
      alert("User active: ");

      // User is signed in.
      var email = user.email;
      var uid = user.uid;

      //Take user to a different or home page
      window.location.href ="editprofile.html?id=" + uid;
    
    } else {
      alert("No active user please signup or sign in.");

      window.location.href ="login.html?error";

    }
});

var studioName, email, password, firstName, lastName, address, country, state, city, zip, phoneNumber;

function updateStu() {

    //Get data
    studioName = document.getElementById("studioName").value;
    email = document.getElementById("email").value;
    password =  document.getElementById("password").value;
    firstName = document.getElementById("firstName").value;
    lastName = document.getElementById("lastName").value;
    address = document.getElementById("address").value;
    country = document.getElementById("country").value;
    state = document.getElementById("state").value;
    city = document.getElementById("city").value;
    zip = document.getElementById("zip").value;
    phoneNumber = document.getElementById("phoneNumber").value;

    console.log(studioName, firstName, email);

    firebase
    .database()
    .ref("/studiopick/studio/users" + studioName)
    .update({
        
    //studioName : studioName,
    firstName : firstName,
    lastName : lastName,
    email : email,
    password : password,
    address : address,
    country : country,
    state : state,
    city : city,
    zip : zip,
    phoneNumber : phoneNumber
    });

    document.getElementById("studioName").value ="";
    document.getElementById("email").value ="";
    document.getElementById("password").value ="";
    document.getElementById("firstName").value ="";
    document.getElementById("lastName").value ="";
    document.getElementById("address").value ="";
    document.getElementById("country").value ="";
    document.getElementById("state").value ="";
    document.getElementById("city").value ="";
    document.getElementById("zip").value ="";
    document.getElementById("phoneNumber").value ="";

    alert("Data Updated");
};

Upvotes: 1

Views: 502

Answers (1)

Rafael Zasas
Rafael Zasas

Reputation: 993

For your first question:

You are using the auth.currentUser property instead of the user returned from onAuthStateChanged

As per The Docs:


import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

If user is returned successfully from onAuthStateChanged you can set the value of the returned user globally to access it throughout the app. Otherwise you can navigate to /login (or equivalent).

For your second question: This depends on how you structured your database. It’s common practice to use the Firebase Auth Id as the users/ which can then be referenced from user.uid.

If you would like to keep record of who created or last edited a document you can keep fields that contain the users id.

Firestore also has security rules which leverage custom claims to secure the database CRUD operation.

Upvotes: 1

Related Questions