After signing out, the function getRedirectResult in Firebase is being invoked

Question

After signing out, the function getRedirectResult in Firebase is being invoked

I'm a bit confused about some interesting behavior I've noticed while working with Firebase. Although I never used the older version, I believe getRedirectResult is a newer feature since they partnered with Google.

Currently, I am using Vue.js along with vue-router and Firebase for my single page application (SPA). The app has a landing page as well as another view where users can be logged in or not. Login is achieved through redirection. Upon loading this second view, I check getRedirectResult in the 'activate' hook of vue-router. If there is a user, I perform further actions based on the user information.

The issue arises as follows:

We are on the second page. The user logs in and getRedirectResult successfully finds the user.
The user then logs out and we return to the landing page.
When we click on a button that takes us back to the second page, getRedirectResult still remembers the previous user. How is this possible?

I couldn't find information on whether I am missing something and need an additional check, or if I should somehow force a page refresh after logout to erase the memory of the last logged-in user. Is this a bug or am I overlooking something? Any help would be greatly appreciated!

Here is the code snippet for calling getRedirectResult on the second page within the vue component router's 'activate' hook:

firebase.auth().getRedirectResult()
    .then((result) => {
        return result.user;
    }).then((user) => {
        // Perform necessary actions.
    });

Update: This issue was resolved by performing a hard page refresh in the logout callback, like so:

firebase.auth().signOut()
    .then(() => {window.location.href = '/'});

javascript firebase vue.js firebase-authentication vue-router

Answer 1

Answer №1

This situation had me feeling frustrated. You can find more information on the issue at this link (https://github.com/firebase/firebase-js-sdk/issues/133), and unfortunately, it seems to be an intentional behavior.

To work around this, I decided to completely avoid using getRedirectResult(), opting instead to achieve the same functionality by checking for the presence of an authenticated Firebase user without waiting for the redirect callback. In Angular, I utilized AngularFire's authState observable for this purpose. This approach ensures that there are no lingering user data in the client memory when you signOut(), as it wasn't stored in getRedirectResult().

The idea is to implement a Route Guard on the login page, allowing access only if there isn't an authenticated user present. Once you log in successfully (note that signInWithRedirect() may take a few seconds), the firebase user data loads into the client, triggering the Route Guard to prevent access to the login page and directing you to your preferred location.

For an added feature, if you wish to retain the returnUrl, you can store that string in local storage before initiating signInWithRedirect(). Subsequently, retrieve it in the Route Guard upon redirection (and remember to delete it from local storage).

I found inspiration for this solution in a Firebase blog post: . Hopefully, you can adapt this concept to your Vue.js development.

If you're interested, here's a snippet demonstrating how the Route Guard looks like in Angular 2:

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { Router, CanActivate } from '@angular/router';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LoginGuardService implements CanActivate {

  constructor(
    private auth: AuthService,
    private router: Router
  ) { }

  canActivate() {
    return this.auth.firebaseUser$.
      pipe(map(user => {
        // The firebaseuser determines if user is logged in
        // If logged in, block the route with a redirect
        if (user) {
          console.log('User detected', user);
          const returnUrl = localStorage.getItem('returnUrl');
          // Route user to returnUrl, if none, go to profile
          if (returnUrl && returnUrl !== '/') {
            this.router.navigate([returnUrl]);
          } else {
            this.router.navigate(['profile']);
          }
          return false;
        }
        return true;
      }));
  }
}

Answer 2

This situation had me feeling frustrated. You can find more information on the issue at this link (https://github.com/firebase/firebase-js-sdk/issues/133), and unfortunately, it seems to be an intentional behavior.

To work around this, I decided to completely avoid using getRedirectResult(), opting instead to achieve the same functionality by checking for the presence of an authenticated Firebase user without waiting for the redirect callback. In Angular, I utilized AngularFire's authState observable for this purpose. This approach ensures that there are no lingering user data in the client memory when you signOut(), as it wasn't stored in getRedirectResult().

The idea is to implement a Route Guard on the login page, allowing access only if there isn't an authenticated user present. Once you log in successfully (note that signInWithRedirect() may take a few seconds), the firebase user data loads into the client, triggering the Route Guard to prevent access to the login page and directing you to your preferred location.

For an added feature, if you wish to retain the returnUrl, you can store that string in local storage before initiating signInWithRedirect(). Subsequently, retrieve it in the Route Guard upon redirection (and remember to delete it from local storage).

I found inspiration for this solution in a Firebase blog post: . Hopefully, you can adapt this concept to your Vue.js development.

If you're interested, here's a snippet demonstrating how the Route Guard looks like in Angular 2:

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { Router, CanActivate } from '@angular/router';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LoginGuardService implements CanActivate {

  constructor(
    private auth: AuthService,
    private router: Router
  ) { }

  canActivate() {
    return this.auth.firebaseUser$.
      pipe(map(user => {
        // The firebaseuser determines if user is logged in
        // If logged in, block the route with a redirect
        if (user) {
          console.log('User detected', user);
          const returnUrl = localStorage.getItem('returnUrl');
          // Route user to returnUrl, if none, go to profile
          if (returnUrl && returnUrl !== '/') {
            this.router.navigate([returnUrl]);
          } else {
            this.router.navigate(['profile']);
          }
          return false;
        }
        return true;
      }));
  }
}

Answer 3

Answer №2

To indicate whether getRedirectResult() has been processed, a flag can be used as shown below:

firebase.auth().getRedirectResult()
  .then((result) => {
    return result.user;
  }).then((user) => {
    if (this.redirectProcessed)
      return; // Ignore

    // Perform necessary actions.

    this.redirectProcessed = true; // Mark redirection completed
  });

Answer 4

To indicate whether getRedirectResult() has been processed, a flag can be used as shown below:

firebase.auth().getRedirectResult()
  .then((result) => {
    return result.user;
  }).then((user) => {
    if (this.redirectProcessed)
      return; // Ignore

    // Perform necessary actions.

    this.redirectProcessed = true; // Mark redirection completed
  });

After signing out, the function getRedirectResult in Firebase is being invoked

Answer №1

Answer №2

Similar questions

Recursively toggle child elements using JQuery

Ways to identify files with identical names but located in separate subdirectories within a sourcemap

Difficulty displaying data from PapaParse in VueJS despite successful retrieval in console

Partial data sent through Ajax to PHP file

Adjusting the size of the iframe to match the dimensions of the window

Is it possible that v-parallax in Vue.js Vuetify does not support local files?

Clicking on the ng-repeat will trigger the ng-click event, which populates all the data using ng

Load VueSimpleSuggest with values from URL parameter upon page initialization

Shade within the autocomplete

Issue TS2349 occurs when attempting to use a combination of boolean and function types within union typing

Error encountered when attempting to create a new Vue project using Vue CLI (npm issue)

Discovering the original value of props in Vue 3 using the Composition API

What is the method for HTML inline handlers to retrieve the global window object and the variables contained within it?

Switching from PHP to JavaScript before returning to PHP to establish and manage sessions

The withRouter function in React Router does not automatically inject the router

Animating text with a shake effect using JQuery

Utilizing Node.js callback for validating JWT tokens

Send a property as a string, then transform the string back into JavaScript

Global jQuery variables are unexpectedly coming back as "undefined" despite being declared globally

Showing data from a Node.js Express application in a Jade template file