An error has occurred with Firebase: Error (auth/network-request-failed)

Having trouble with an error while following a tutorial on YouTube. I've searched for solutions but all the tutorials focus on Google sign-in, which I don't need.

If anyone can offer help, Thank You Very Much.

P.S. I'm still new to Firebase.

App.tsx

import React from 'react'
import { StatusBar } from 'expo-status-bar';
import { Alert, StyleSheet, View } from 'react-native';

import { getAuth, createUserWithEmailAndPassword, isSignInWithEmailLink, signInWithEmailAndPassword } from 'firebase/auth'
import {initializeApp} from 'firebase/app'
import { firebaseConfig } from './src/config/firebase';
import { Input, Button, Div, Text } from 'react-native-magnus';

import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen(){
  return(
    <Div flex={1} justifyContent='center' alignSelf='center'>
      <Text>Hallo</Text>
    </Div>
  )
}

function LoginScreen(){

  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')

  const app = initializeApp(firebaseConfig)
  const auth = getAuth(app)
  
  const nav = useNavigation()

  const handleCreateAccount = () => {
    createUserWithEmailAndPassword(auth, email,password)
    .then((userCredential) => {
      console.log("Account Created")
      const user = userCredential.user
      console.log(user)
    })
    .catch((err) => {
      console.log(err)
      alert(err.message)
    })
  }

  const handleSignIn = () => {
    signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      console.log("Signed In!") 
      const user = userCredential.user
      console.log(user)
      nav.navigate("Home")
    })
    .catch((err) => {
      console.log(err)
    })
  }

  return(
    <View style={styles.container}>
      <Div w={300}>
        <Input value={email} onChange={(val:any) => setEmail(val) } placeholder='Email..'  />
        <Input value={password} onChange={(val:any) => setPassword(val)} placeholder='Password..' mt={10} />
      </Div>

      <Div justifyContent='center'>
        <Button onPress={handleSignIn} w={100} mt={10}>
          Sign-In
        </Button>
        <Button onPress={handleCreateAccount} w={100} mt={10}>
          Register
        </Button>
      </Div>

      <StatusBar style="auto" />

    </View>
  )
}


const Stack = createNativeStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} options={{headerShown: false}} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Encountering an error when trying to register because login isn't working.

Answer №1

When you receive this error, it often indicates that there is an issue with the connection of your device to the web.

Take a moment to verify the internet connection on your device and attempt the task once more!

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

Influence of Asynchronous State on the Conditional Visibility of an Element

I am encountering an issue on a screen (parent) that contains a FlatList with Child elements in the renderItem. Each Child element has a Pressable component, which should display a Checked Icon and change its background color when clicked by the user. Th ...

Type of event target MouseEvent

I am currently working on a custom hook const hasIgnoredClass = (element: Element, ignoredClass: string) => (element.correspondingElement ? element.correspondingElement : element ).classList.contains(ignoredClass); const isInIgnoredElement = ( ...

Is there a way to detect a specific button press in react-native-picker-select?

I am currently utilizing the react-native-picker-select library. My objective is to set ingrebool to false when options a, b, c, or d are selected and true when option e is chosen from the data called ingre. How can I achieve this? Here is my code snippet ...

What exactly do .d.ts files encompass?

Currently, I am utilizing react-table within a Typescript Next.js project. This particular package is made up of modules (such as sorting, pagination, etc.) that are not automatically included but need to be enabled in the primary useTable hook. The defaul ...

Breaking news in the world of programming! The @types/tabulator-tables import is causing a

When you install the following packages: npm install tabulator-tables npm install @types/tabulator-tables And then import them like this: import Tabulator from 'tabulator-tables'; You may encounter an error: Module Usage (Error node_modules @ty ...

tips for accessing the output of a function within an object using TypeScript

I have developed a TypeScript module that simplifies the process. This function takes an object as input and executes all the functions while updating the values of the corresponding properties. If any property in the object is not a function, it will be ...

Issue encountered with connecting to development server on Expo iOS simulator that is not present when using a browser

During the development of a chat application with React Native Expo, I encountered an issue when running "expo start" in my typical workflow. The error message displayed was "could not connect to development server." If anyone has experienced a similar pr ...

When grouping an array of objects by their property, the error "object index does not have an explicit type" may be encountered

My task involves dealing with an array of objects called Product. The structure of the Product class is as follows: class Product { id: string; type: string; price: number; constructor(id: string, type: string, price: number) { thi ...

What is the correct syntax for using the apply method in combination with console.log()?

Below is the class I've created to capture the console.log function in my application. This allows me to review logs on devices where accessing the browser console isn't easy, and also helps in bundling captured logs for error reporting later on. ...

An issue has occurred: TransformError SyntaxError: Unexpected keyword 'const' was encountered

While practicing programming with React-Native, I encountered a problem that I couldn't figure out how to solve. I attempted to use solutions from various forums, but none of them worked. import { StyleSheet, Text, View, Image } from 'react-nativ ...

Unable to organize list of entities based on numerical values

I am working with an array of objects structured like this: [ { "value": 351.68474, "o_p": [ "$.text" ] }, { "value": 348.0095, "o_p": [ ...

Sending user to a different page once Firebase login is confirmed

I recently switched from using Passport for login in my web app to Firebase authentication. With Passport, I had control over when a user could access certain pages by using middleware on the server side like this: // isAuthenticated is my middleware on ...

Retrieving data from an Ajax response using Typescript

I encountered the following problem while using this code: return new Promise(resolve => { this.http.get(Config.rootUrl, { params }).subscribe(response => { resolve(response.data); }, (err: HttpErrorResponse) => { ...

Removing/modifying selected choices in an element

I have implemented a material ui select element with the ability to make multiple selections using checkboxes. My query is, can I incorporate the functionality to delete or update names directly from the select element itself? For instance, by clicking on ...

The ngAfterViewChecked function seems to be caught in an endless loop

I am facing an issue where the <cdk-virtual-scroll-viewport> starts from the bottom, but I am unable to scroll up. I suspect that this problem is related to the use of AfterViewChecked. Even after trying AfterViewInit, the issue persists. @ViewChil ...

Generate a customized object with specified criteria

Looking to achieve the same goal as described in this reference, I am attempting to generate an object of a mapped type. Despite my efforts, I continue encountering type errors during implementation. Here is a simplified example: [code snippet] When ass ...

Receiving a blank array from the firestore database

I have written a code for the LeftBar Component where I am trying to retrieve data stored in the "contacts" document in Firebase. However, I am getting an empty array and I'm not sure why this is happening. Additionally, I would like to know how to ac ...

What steps can be taken to resolve the 'TypeError: Network Request Failed' issue even after attempting a variety of troubleshooting methods?

Currently, I have a node.js server set up with app.post and app.get to allow users to input data into a form. This data is then intended to be inserted into a database in phpmyadmin. I am utilizing Express, body-parser, and mysql for my node server. The is ...

No defined outcome when using a conditional input with a name attribute

I am facing an issue while trying to determine whether to show/hide mybutton. The console keeps throwing an error stating that mybutton is undefined whenever it tries to evaluate mybutton.disabled. To troubleshoot, I included a true statement: 1===1, but ...

Encountering a TypeORM error while attempting to execute migrations

I'm encountering an issue while trying to set up migrations for my application. The error message I receive is: No changes in database schema were found - cannot generate a migration. To create a new empty migration, use the "typeorm migration:create" ...