Building an auth app using native with the expo.
Create firebase.js
file and link the app
exported auth
properly in firebase.js
still can't import auth
in my LoginScreen.js
file
It keeps throwing the error
"export 'auth' was not found in 'firebase'
11 |
12 | const handleSignup = () =>{
> 13 | auth
| ^
14 | .createUserWithEmailAndPassword(email,
password)
15 | .then(usersCredentials => {
16 | const user = userCredentials.user;
Firebase.js
// Import the functions you need from the SDKs you need
// import * as firebase from "firebase";
import firebase from "firebase/app"
// import "firebase/auth"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyB4R4he96dglIFlyGQyP8aYKLtzfGGc_ZQ",
authDomain: "fir-auth-ec54a.firebaseapp.com",
projectId: "fir-auth-ec54a",
storageBucket: "fir-auth-ec54a.appspot.com",
messagingSenderId: "211989329100",
appId: "1:211989329100:web:765e2715889a0fc374be69"
};
// Initialize Firebase
let app;
if (firebase.apps.length == 0) {
app = firebase.initializeApp(firebaseConfig)
} else{
app = firebase.app()
}
const auth = firebase.auth()
export default { auth }
dependencies in package.json
"dependencies": {
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"firebase": "8.2.3",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-web": "0.17.1"
},
EDIT
This is where I am importing the firebase:
import React, { useState } from 'react'
import { KeyboardAvoidingView, StyleSheet, Text, View } from 'react-native'
import { TextInput, TouchableOpacity } from 'react-native-web'
// import firebase from "firebase/app"
// import "firebase/auth"
import { auth } from '../firebase'
const LoginScreen = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const handleSignup = () =>{
auth
.createUserWithEmailAndPassword(email, password)
.then(userCredentials => {
const user = userCredentials.user;
console.log(user.email)
})
.catch(error => alert(error.message))
}
return (
<KeyboardAvoidingView
style={styles.container}
behavior='padding'
>
<View style={styles.inputContainer}>
<TextInput
placeholder="Email"
value={email}
onChangeText={text => setEmail(text) }
style={styles.input}
/>
<TextInput
placeholder="Password"
value={password}
onChangeText={text => setPassword(text) }
style={styles.input}
secureTextEntry
/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => {}}
style={styles.buttonText}
>`enter code here`
<Text style={styles.button}>Log In</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={handleSignup}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>Register</Text>
</TouchableOpacity>
</View>
</ KeyboardAvoidingView>
)}
export default LoginScreen
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
inputContainer:{
width: '80%',
},
input:{
backgroundColor:'white',
paddingHorizontal: 15,
paddingVertical: 10,
borderRadius: 10,
marginTop: 5,
},
buttonContainer:{
width: '60%',
justifyContent:'center',
alignItems:'center',
marginTop: 40,
},
button:{
backgroundColor: '#1674B5',
width:'100%',
padding:15,
borderRadius:10,
alignItems:'center'
},
buttonText:{
color:'white',
fontWeight:'700',
fontSize:16,
},
buttonOutline:{
backgroundColor:'white',
marginTop:5,
borderColor:'#1674B5',
borderWidth:2,
},
buttonOutlineText:{
color:'#1674B5',
fontWeight:'700',
fontSize:16,
},})
But now I can't see anything on the Web Browser Emulator. VS code console is showing "Build Complete"
. What should I do to fix it?
This is the Screenshot of my emulator now:
Snack is giving me this error
This line is exporting an object, as the default export, with a single property of auth
:
export default { auth }
To import this object, you would use:
import lib from './yourfile.js';
const auth = lib.auth;
// or
const { auth } = lib;
However, if you intend on using:
import { lib } from './yourfile.js';
Remove the default
keyword to define an export called auth
using either:
const auth = firebase.auth()
export { auth }
or
export const auth = firebase.auth();
Firebase has recently undergone significant changes; make use of this.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
....
};
// Use this to initialize the firebase App
const firebaseApp =firebase.initializeApp(firebaseConfig);
// Use these for auth
const auth = firebase.auth();
export {auth};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.