Firebase - Keep user signed in when redirecting to different page

Issue

I have 2 components to my website:

1. The landing page with a sign up form (https://example.com)

2. The single page anuglarjs application (https://app.example.com)

What I want to achieve is when the users comes to the landing page, they are able to sign up using Firebase, and once the sign up is complete, redirect the user to the single page application and automatically be signed in, so they don't have to enter their information again.

Here is my code for the landing page sign up:

Handling the sign up button press

$('.signUpBtn').click(function() {
        let name = $('#firstName').val();
        let email = $('#clientEmail').val();
        let pw = $('#clientPw').val();
        if (name != "" && email != "" && pw != "") {
            if (pw.length > 7) {
                firebase.auth().createUserWithEmailAndPassword(email, pw)
                    .then(function(user) {
                        ga('send', 'event', 'New account via landing page', 'created');
                        updateUser(name, email, true);
                        user.sendEmailVerification();
                    })
                    .catch(function(error) {
                        // Handle Errors here.
                        var errorCode = error.code;
                        var errorMessage = error.message;
                        showError(errorMessage);
                        console.log(errorMessage);
                        // ...
                    });
            } else {
                showError("Oops. The password must be at least 8 characters...");
            }
        } else {
            showError("Oops. The email, name, and password can not be empty...");
        }
    });

Handling the information that should get pushed to the user 'profile':

    function updateUser(name, email, clicked) {
        firebase.auth().onAuthStateChanged(function(user) {
            if (user && name != "" && email != "" && name != undefined && email != undefined) {
               name = name.charAt(0).toUpperCase() + name.slice(1);
                user.updateProfile({
                    displayName: name
                  }).then(function() {
                    firebase.database().ref('users/' + user.uid + '/user/').update({
                          name: name,
                          email: email,
                          first_signin: new Date(),
                          email_verified: false,
                          email_reminders: true,
                          pts: 0,
                          first_visit: true
                      }).then((snap) => {
                          console.log(snap)
                          window.location = 'https://app.example.com';
                      });
                  });
            } else {

            }
        });
    }

Pretty elementary Firebase stuff...

Here is my code for the app.example.com single page angularjs app for handling the user authentication:

firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
           //show their data
      } else {
           //show login component
      }
});

Again, pretty simple stuff.

The problem I'm having is that when it redirects the user, it doesn't have them signed in. It shows the login component, which, if you then type in the credentials you just signed up, totally works, but I want the user to be logged in as soon as they hit the page.

Is there something I'm missing? It should work as far as I can tell..

Any ideas? Thank you.

Solution

Firebase Auth sessions are single host origin. They are persisted via localStorage/indexedDB. (They do offer session and no persistence too: https://firebase.google.com/docs/auth/web/auth-state-persistence)

This is why you are unable to access the auth state in a different subdomain. You are signing in on https://example.com and then navigating to https://app.example.com, but the auth state is only persisted in the former.

Answered By - bojeil