Issue: Unable to retrieve redirect result data in Ionic 3 FirebaseExplanation: I am experiencing

I'm currently troubleshooting a minor issue with the

firebase.auth().getRedirectResult()
function in my Ionic 3 app. It seems that the function is not accessing the then block as expected. Even after attempting to log the result and a random string, nothing shows up in the console. Can anyone identify what may be causing this issue?

Here's the code snippet for reference:

signInWithGoogle() {
    const provider = new firebase.auth.GoogleAuthProvider();

    return firebase.auth().signInWithRedirect(provider)
    .then(() => {
        firebase.auth().getRedirectResult()
        .then(data => {
            console.log(data); // No output
            console.log('User signed in.'); // Still no output
        })
        .catch(error => {
            console.log(error);
            throw (error);
        });
    })
    .catch(error => {
        console.log(error);
        throw (error);
    });
}

Even though it successfully logs into the account, nothing is being logged to the console. Any insights on how to troubleshoot this further would be greatly appreciated.

Answer №1

Feel free to utilize my code.

To start, make sure to import the Google Plus dependency:

import { GooglePlus } from '@ionic-native/google-plus';

Then, include the following code in your login function:

this.googlePlus.login({
  'webClientId': ' ' // Your Google console id
}).then((success) => {
  console.log("===login with googlePlus==",success)
  Let credentials = firebase.auth.GoogleAuthProvider.credential(success ['idToken'], null);
  firebase.auth().signInWithCredential(credentials)
    .then((success) => {
      console.log("=====success", success)
    })
    .catch((error) => {
      console.log("=====error", error)
      let errorCode = error["code"];
    });
}, error => { });

I hope this solution works effectively for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Forwarding refs in React FC allows you to easily pass down

I have encountered an issue with references - I am trying to reference a function component and pass props to it. Currently, I have my Parent component and Child Component set up. In the parent component, I need to use a ref to access my child component. S ...

The value returned by Cypress.env() is always null

Within my cypress.config.ts file, the configuration looks like this: import { defineConfig } from "cypress"; export default defineConfig({ pageLoadTimeout: 360000, defaultCommandTimeout: 60000, env: { EMAIL: "<a href="/cdn-cgi/ ...

Tips for incorporating nested generics in Typescript

Currently, I am developing a straightforward activity execution framework that allows developers to define activities which can be executed within a workflow. To enhance type safety and boost developer productivity by utilizing type hints, I aim to incorp ...

The 'Group' type is lacking the 'children' properties needed for the 'Element' type in Kendo UI Charts Drawing when using e.createVisual()

In my Angular 10 project, I utilized the following function to draw Kendo Charts on Donut Chart public visual(e: SeriesVisualArgs): Group { // Obtain parameters for the segments this.center = e.center; this.radius = e.innerRadius; // Crea ...

Typescript - Stripping multiple characters from the start and end of a string/Retrieving attributes of a JSON list element

My challenge involves a string like the following : "{"element":"634634"}" My goal is to eliminate {"element":" which remains constant, as well as the final character "}. The only variable component is 634634. How can I achieve this? Alternatively, can ...

Determine the type and create an instance of a fresh class

In my app, I have a function that handles all API requests. Any interaction I make goes through this function. I'm trying to set a specific return type for this function, but the return type is of a class. In order to use the methods of this class, I ...

Encountered a React TypeScript issue stating that the type '{ ... }' cannot be assigned to the type 'IntrinsicAttributes & IntrinsicClassAttributes<...>'

Embarking on a new journey with a react typescript project, I encountered this puzzling error: Failed to compile. /Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx TypeScript error in /Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx(27,35 ...

Creating a Typescript version of the mongodb project aggregation functionality

Present scenario: I am currently working on creating a type-safe wrapper for the node-mongodb driver. I am facing challenges in determining the return type for the project aggregation stage. Feel free to check out the TypeScript Playground here class Base ...

Importing DateTimeFormatOptions into Your Project

I have been trying to store a specific DateTimeFormatOptions for the date.toLocaleString() function so that I can easily use it in various parts of my application. Here is how I defined it: export const timeFormat = { month: 'numeric', day: &apos ...

Tips for validating nominal-typed identifiers

I recently started experimenting with the enum-based nominal typing technique explained in more detail at this link. enum PersonIdBrand {} export type PersonId = PersonIdBrand & string interface Person { id: PersonId firstName: string lastName: ...

typescript - specifying the default value for a new class instance

Is there a way to set default values for properties in TypeScript? For example, let's say we have the following class: class Person { name: string age: number constructor(name, age){ this.name = name this.age = age } } We want to ens ...

Data from Firebase persists even after removal

Currently utilizing firebase for my project, where each user object includes their list of favorites. The structure is illustrated below: https://i.sstatic.net/vm6w8.png In the favorites object shown, there was initially two records, but one was manually ...

Resolving the non-null assertion error in TypeScript and React: A step-by-step guide

My code snippet is as follows: type ItemProps = { status?: string; } <Items status={status!} /> // encountering an error with a warning about forbidden non-null assertion // @typescript-eslint/no-non- ...

Tips for creating an input box that only accepts floating point numbers:

I have a custom component - a text box that I am using in two different places. In one location, it accepts integers and in another, floats. For the integer validation (where dataType=2), I have successfully implemented it. However, for the float validat ...

Notification Alerts within Mobile Apps

Just wanted to share an update on my progress with a mobile application built on Ionic and utilizing Firebase as the database. One of the features I'm currently working on is implementing local notifications. Below are the code snippets: HTML CODE ...

Exploring the inner components of an entity without the need for external tools

I am currently enhancing TypeScript usage in a project by implementing generics. The challenge I am facing involves dealing with a complex object retrieved from the backend, which consists of a class with numerous attributes, most of which are classes them ...

Using vue-class-component: A guide on creating and setting up reactive data

I am currently working with Vue.js using TypeScript and vue-class-component. My goal is to create a custom component with reactive data. Below is the code I have so far: <template> <div> <input v-model="data.name" placeholder=" ...

I'm encountering an issue with my React 18 application using TypeScript: the module './App' cannot be found

Encountering an issue while attempting to update to react 18. I'm curious if this problem is related to my file types. I am using Typescript, so do both the app and index files need to have a .tsx extension? Both the app and index files are located ...

What are the steps to set up ChartJS on a personal computer?

Currently, I am working on creating charts with ChartJS using the CDN version. However, I would like to have it installed directly on my website. After downloading ChartJS v4.1.1, I realized that it only contains typescript files. Since I cannot use TS fil ...

Save the URLs of multiple images uploaded to Firebase in Firestore

Can anyone provide assistance in updating this code to ensure it waits for the upload to complete before saving the image URLs to firestore? I am inexperienced with async and await and am struggling to resolve this issue. Despite trying to save to firest ...