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

"Troubleshooting: Issue with AngularJS ng-click Functionality Not Working on Re

AngularJS (ui-mask) provides a valid input mask feature

Instructions on how to ensure that an AJAX call will only function when the user is logged in within a Rails application

When IntelliJ starts Spring boot, resources folder assets are not served

Creating dynamic images in Node.js using JavaScript without relying on HTML5 canvas

Using a JSP page to trigger a JavaScript function

Utilizing Sequelize to Convert and Cast Data in iLike Queries

Creating dynamic content in the Ajax-enabled Smart Admin theme: A step-by-step guide

Tips for showing a single progress message when uploading multiple files on eleme.io [vuejs]

Extracting data from a MySQL result array

Discover the #ID and apply AddClass through the URL in the Navigation Jquery

Pressing the button will activate the Ctrl+z and Ctrl+y key commands

`Why is it important to debug javascript code?`

What is the correct approach for detecting object collisions in Phaser 3?

Start the Vuepress build process and run the generated project

Encountering a 404 error in Codeigniter when making an AJAX call

Embarking on the journey of transitioning code from server-side to client-side

Activate an action only upon closing the page

An error occurred due to a state update being attempted on an unmounted component. The solution is to properly cancel all subscriptions and asynchronous tasks in a

Solution: The issue where the children's onChange event was not updating the parent in Ant Design was discovered to be due to the Select and Table components nested inside a Tab not changing according to the pageSize