Having trouble with GoogleSignIn in React Native Firebase app

During the development of my React Native App, I integrated Firebase as the Authentication System. The app compiled successfully, but upon attempting to use the GoogleSignIn method, an error message appeared on the AndroidToast: "Se ha producido un error. Intentelo más tarde' + error", with the error message stating: InvalidUserName.

The code for my login screen looked like this:

// Code is protected and cannot be viewed here

As for my firebase.tsx file, it contained the following code:

// Code is protected and cannot be viewed here

I am seeking assistance in identifying where the error may lie, so any help would be greatly appreciated! Thank you in advance!

typescriptfirebasereact-native

Answer №1

Make sure to include the accessToken in your credentials.

Here is the updated code:

async function onGoogleButtonPress() {
    const {idToken, accessToken} = await GoogleSignin.signIn();
    const googleCredential = auth.GoogleAuthProvider.credential(idToken, accessToken);
    return auth.signInWithCredential(googleCredential);
  }

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

When attempting to import the image path from a JSON file, a ReferenceError occurs stating that the data variable is not

I'm currently attempting to iterate through image paths in a JSON file and display them in a browser using the "img" tag. While hardcoded values work perfectly fine, I encountered an issue when trying to switch to a variable as outlined in this post: ...

jsonreactjstypescript

How can I toggle the visibility of a div after the DOM has finished loading?

I was experimenting with a radio button on the interface linked to a property in the typescript file that controls the visibility of another div. However, I noticed that both *ngIf="isFooSelected" and [hidden]="!isFooSelected" only function upon initial pa ...

angulartypescriptangular-ng-if

ConfirmUsername is immutable | TypeScript paired with Jest and Enzyme

Currently, I am experimenting with Jest and Enzyme on my React-TS project to test a small utility function. While working on a JS file within the project, I encountered the following error: "validateUsername" is read-only. Here is the code for the utilit ...

javascriptreactjstypescriptjestjsenzyme

My reselect function seems to be malfunctioning - I'm not receiving any output. Can anyone help me

I'm looking to implement reselect in my code to retrieve the shopping cart based on product ids. Here's my reselect.ts file: import { createSelector } from "reselect"; import { RootState } from "../store"; export const shopp ...

reactjstypescriptreact-nativereduxreselect

Should I opt for the spread operator [...] or Array.from in Typescript?

After exploring TypeScript, I encountered an issue while creating a shorthand for querySelectorAll() export function selectAll(DOMElement: string, parent = document): Array<HTMLElement> | null { return [...parent.querySelectorAll(DOMElement)]; } ...

typescript

Error with Chakra UI and React Hook Form mismatched data types

Struggling with creating a form using ChakraUI and React-Hook-Form in TypeScript. The errors seem to be related to TypeScript issues. I simply copied and pasted this code from the template provided on Chakra's website. Here is the snippet: import { ...

javascriptreactjstypescriptreact-hook-formchakra-ui

What is the best way to change the name of an imported variable currently named `await` to avoid conflicting with other variables?

Here is the given code snippet: import * as fs from 'fs'; import {promises as fsPromises} from 'fs'; // ... // Reading the file without encoding to access raw buffer. const { bytesRead, buffer as fileBuffer } = await fsPromises.read( ...

node.jstypescriptasync-awaitlint

What is the best way to shorten text in Angular?

I am looking to display smaller text on my website. I have considered creating a custom pipe to truncate strings, but in my situation it's not applicable. Here's what I'm dealing with: <p [innerHTML]="aboutUs"></p> Due to t ...

angulartypescript

Prisma - Modify a single resource with additional criteria

Is it feasible to update a resource under multiple conditions? Consider the tables below: +----------+----------+ | Table1 | Table2 | +----------+----------+ | id | id | | param1T1 | param1T2 | | param2T1 | param2T2 | | idTable2 | ...

node.jstypescriptprisma

There is no index signature containing a parameter of type 'string' within the type '{ appointments: { label: string; id: number; minWidth: number; }[]; }'

Just getting started with React and Typescript. I'm attempting to extract data from the configuration file based on the input(props), but it seems like Typescript is throwing errors. Any suggestions on how to tackle this issue? config.json { "t ...

reactjstypescript

Is there a way to imitate the typeof operation on an object in TypeScript?

Today's challenge is a strange one - I've encountered a bug where the code behaves differently if typeof(transaction) returns object instead of the object name. To work around this issue, I introduced a new parameter called transactionType to my ...

typescriptjestjs

Determining the data type of a generic variable within an Angular component

I'm currently in the process of developing a versatile component that can handle data of only two specific types: interface X{ name: string, path: string, type: string, } interface Y{ name: string, path: string, } Both types X a ...

angulartypescript

What is the process for designing a type that accepts an object and provides an updated version?

Is there a way to create a function that can take an object and return a modified version of that object in this format? const data = { email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08a8f888ea0848f85ce838f8d"& ...

typescript

What is the best approach for presenting multiple entries with identical IDs in a table using Angular?

I obtained a JSON response in the following structure; https://jsonplaceholder.typicode.com/posts My goal is to format the table to resemble the attached image structure. However, my current implementation is displaying repeating user IDs. How can I adju ...

angulartypescriptuser-interfaceangularjs-directiveangularjs-scope

Using TypeScript to style React components with the latest version of Material UI, version

Styled typography component accepts all the default typography props. When I include <ExtraProps> between styled() and the style, it also allows for extra props. const StyledTypography = styled(Typography)<ExtraProps>({}) My query is: when I r ...

reactjstypescriptmaterial-uistyled-componentsreact-typescript

A guide on connecting multiple select components to a unified Angular 6+ reactive form without triggering redundant updates

I am facing an issue where I need to connect multiple input components to a single angular reactive form, but encounter two main obstacles: By default, only the form in which user input occurs gets updated If I use [(ngModel)] it does work, but it trigge ...

angulartypescriptangular-reactive-forms

Utilizing an Application Programming Interface in React Native

Recently diving into React Native, I embarked on creating a basic app leveraging the Marvel API along with an API wrapper. My aim is to implement an infinite scroll view using VirtualizedList. Here's where I could use some guidance: What should be pas ...

javascriptreactjsreact-nativeapi

I am working on an Angular application that includes a dynamic form for an attendance system for employees. I am currently trying to figure out how to generate the JSON data

I have a dynamic form in my reactive attendance system for employees. When I click on submit, I need to generate JSON data like the following: { "user_id": "1", "branch_id": "4", "auth_token": "59a2a9337afb07255257199b03ed6076", "date": "2019- ...

jsonangulartypescript

Angular - Ensuring correct rendering of a subcomponent with input parameter on the first update

Here is a snippet of code showcasing a list of educations and a component: <cdk-virtual-scroll-viewport itemSize="5" class="list-scroll"> <app-education-item *ngFor="let education of loadedEducations" ...

htmlangulartypescriptdata-bindingfrontend

What steps can be taken to troubleshoot a TypeScript-powered Node.js application running in WebStorm?

Seeking advice on debugging a node.js application utilizing TypeScript within WebStorm - any tips? ...

node.jstypescriptdebuggingwebstorm