I am using firebase for react-native with expo. When i use the createUser, the resolve function doesn't work correctly, i need to re-render the component to see the response.`
const login = useCallback(async () => {
try {
const response = await firebase
.auth()
.signInWithEmailAndPassword(email, password);
console.log("response", response);
} catch (error) {
console.log("erreur code", error.code);
setError(error.code);
setLoading(false);
}
}, [name, email, password]);
Related
I got an issue with fcm tokens, they are identical for some devices (as you can see from screenshot). On internet it is said that they should be unique for each device, but it seems that in our case they are not. This is the way how I get fcm tokens from messaging library (react native firebase):
export const AppMaintainer = () => {
const fullname = useAppSelector(getMyFullName);
const photoUrl = useAppSelector(getPhotoUrl);
const userDocId: string = useAppSelector(getCurrentUserDocId);
const token: TokenOrProvider = useAppSelector(getCurrentStreamToken);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(actions.authStateChangeUser());
}, []);
const requestUserPermission = async () => {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
console.log('Authorization status:', authStatus);
const deviceToken = await getFcmToken();
try {
await firestore()
.collection('usersDescriptiveData')
.doc(userDocId)
.update({
deviceToken,
});
} catch (error: any) {
console.log('error in deviceToken update');
dispatch(
globalActions.setIsGlobalSnackbarVisible({message: error.message}),
);
}
}
};
const getFcmToken = async () => {
try {
const fcmToken = await messaging().getToken();
return fcmToken;
} catch (error) {
console.log('error in fcm', error);
}
};
useEffect(() => {
if (userDocId && photoUrl && token && fullname) {
requestUserPermission();
}
}, [userDocId, photoUrl, token, fullname]);
return (
<>
<NavigationContainer ref={navigationContainerRef}>
<RootNavigator />
</NavigationContainer>
<NetGlobalSnackbar />
</>
);
};
Could you please say what i am doing wrong?
Package.json:
"react-native": "0.69.6",
"#react-native-firebase/messaging": "12.9.3".
Additionally, I assume that these duplicated tokens are the reason why some users get notifications more then two times (but this is another story).
I tried calling the getFsmToken function again when deviceToken was already in use by another user, but it didnt help. Additionally, tried deleting and generating the deviceToken again, but it didnt help too. I expected this token to be unique for each device, but it is not, which means i am doing something wrong. FYI: i dont do it with browser, the app is available on stores and some users get the same token for their devices
Could anyone guide me with this?
Notice: I have seen this question, but creating a whole landing page just to verify a user seems a bit much.
I added a login functionality to my react-native app using firebase/auth with email and password. This works well so far and I have no issues doing that.
I then continued to send a verification email to a new user and only allow him/her to use the app, once the email is verified. Again, no issues here.
The next step would be to login the user right after the email was verified. This is where I'm stuck, since the onAuthStateChanged eventhandler doesn't update after the user pressed the verification link in the email.
Is there any way to listen to the emailVerified state in real-time? I tried to use polling with setInterval() but this is not great since there is a notable delay between verification and login. I read about a continueLink you can pass to sendEmailVerification, but I couldn't figure out how to make that work in react-native.
I'm using Expo and therefore the Firebase SDK, not the Firebase react native package.
Here is the code I use for the signup:
export const signUp = async (username: string, email: string, password: string) => {
try {
const auth = getAuth();
if (email && password && username) {
// sign up
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
// save username in firestore
await setUserName(userCredential, username);
// send Email Verification
await sendEmailVerification(userCredential.user);
return true;
}
} catch (error) {
onError(error);
}
};
And this is my onAuthStateChanged handler:
auth.onAuthStateChanged(authenticatedUser => {
try {
if (authenticatedUser?.emailVerified) {
setUser(authenticatedUser)
} else {
setUser(null)
}
} catch (error) {
console.log(error);
}
});
So in the end I did follow this question, but I changed it a bit to fit my needs. I'll post my steps for anyone who's doing the same.
Create a simple static website with firebase init and host it on firebase or somewhere else (check the hosting tab in your firebase console to get started)
Follow this guide to create the appropriate handlers on the website
Add the following to your verificationHandler to update the user (don't forget to import firestore) (I send the userId via the continueURL, but there are probably better ways)
// You can also use realtime database if you want
firebase.firestore().collection("users").doc(userId).set({
emailVerified: true
}, {merge: true}).then(() => {
message.textContent = "Your email has been verified.";
}).catch((error) => {
message.textContent = "The verification was invalid or is expired. Please try to send another verification email from within the app.";
});
Got to authentication -> templates in your firebase console and change the action url to your hosted website's url
Add a listener to the firestore doc to your react-native app
const onUserDataChanged = (uid, callback) => {
onSnapshot(doc(firestore, "users", uid), doc => callback(doc.data()));
}
Use the data from the callback to update the login state in the app
// As an example
auth.onAuthStateChanged(authenticatedUser => {
if (authenticatedUser && !authenticatedUser.emailVerified) {
unsubscribeFirestoreListener?.();
unsubscribeFirestoreListener = onUserDataChanged(authenticatedUser.uid, (data: any) => {
if (data?.emailVerified) {
setUser(authenticatedUser);
unsubscribeFirestoreListener?.();
}
});
}
}
use the codes below for your authentication context. for user id, you should use 'user.uid'
import React, { useState, createContext } from "react";
import * as firebase from "firebase";
import { loginRequest } from "./authentication.service";
export const AuthenticationContext = createContext();
export const AuthenticationContextProvider = ({ children }) => {
const [isLoading, setIsLoading] = useState(false);
const [user, setUser] = useState(null);
const [error, setError] = useState(null);
firebase.auth().onAuthStateChanged((usr) => {
if (usr) {
setUser(usr);
setIsLoading(false);
} else {
setIsLoading(false);
}
});
const onLogin = (email, password) => {
setIsLoading(true);
firebase.auth().signInWithEmailAndPassword(email, password)
.then((u) => {
setUser(u);
setIsLoading(false);
})
.catch((e) => {
setIsLoading(false);
setError(e.toString());
});
};
const onRegister = (email, password, repeatedPassword) => {
setIsLoading(true);
if (password !== repeatedPassword) {
setError("Error: Passwords do not match");
return;
}
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then((u) => {
setUser(u);
setIsLoading(false);
})
.catch((e) => {
setIsLoading(false);
setError(e.toString());
});
};
const onLogout = () => {
setUser(null);
firebase.auth().signOut();
};
return (
<AuthenticationContext.Provider
value={{
isAuthenticated: !!user,
user,
isLoading,
error,
onLogin,
onRegister,
onLogout,
}}
>
{children}
</AuthenticationContext.Provider>
);
};
I am building an app with firebase .
I had successfully implemented a function that will enable the user to upload a pic to firebase storage
here it is
const uploadImageToBucket = async () => {
let blob;
try {
setUploading(true);
blob = await getPictureBlob(image);
const ref = await storage.ref().child(uuid.v4());
const snapshot = await ref.put(blob);
return await snapshot.ref.getDownloadURL();
} catch (e) {
alert(e.message);
} finally {
blob.close();
setUploading(false);
}
};
the problem is that I want the picture to be uploaded based on certain user and I want to set that pic as user profile pic .any suggestion please!!
here the user sign up function
const handleSignUp = () => {
setErrortext("");
if (!FullName) return alert("Please fill Name");
if (!Email) return alert("Please fill Email");
if (!Password) return alert("Please fill Address");
setIsLogged(true);
firebase
.auth()
.createUserWithEmailAndPassword(Email, Password)
.then((user) => {
alert("Registration Successful. Please Login to proceed");
console.log(user);
if (user) {
firebase
.auth()
.currentUser.updateProfile({
displayName: FullName,
})
.then(() => navigation.replace("Log_In"))
.then(() => {
firebase.auth().onAuthStateChanged((userData) => {
setuserData(userData);
});
})
.catch((error) => {
console.log(error);
setErrortext(error);
});
}
})
.catch((error) => {
if (error.code === "auth/email-already-in-use") {
setErrortext("That email address is already in use!");
setIsLogged(false);
} else {
setErrortext(error.message);
setIsLogged(false);
}
});
};
You can simply use updateProfile method to update currently logged in user's photoURL and set it to the download URL just requested. The uploadImageToBucket function returns that URL back so you can try this:
uploadImageToBucket().then(async (photoURL) => {
const user = firebase.auth().currentUser
await user.updateProfile({ photoURL })
console.log("Photo URL updated")
})
I create a simple interface to send notification using firebase cloud messaging service. It displays notification when I send notification using firebase - console. But when I insert data using my interface to firebase, It is not showing anything. How can I solve this problem.
Future<void> insertItem() async {
final form = formKey.currentState;
form.save();
Firestore.instance.runTransaction((transaction) async {
await transaction.set(Firestore.instance.collection("Notification").document(), {
'User': _user,
'Title': _title,
'Body': _msg,
});
});}
-Insert Data into Firebase Code-
exports.notificationTrigger = functions.firestore
.document("Notification/{notificationId}")
.onCreate((snapshot, context) => {
msgData = snapshot.data();
var userRef = admin.firestore().collection("Token").doc(msgData.User);
return userRef.get().then((doc) => {
if (!doc.exists) {
console.log("No Devices");
} else {
token = doc.data().Token;
var payload = {
notification: {
title: msgData.Title,
body: msgData.Body,
},
data: {
sendername: msgData.Title,
message: msgData.Body,
},
};
return admin
.messaging()
.sendToDevice(token, payload)
.then(() => {
console.log("pushed notification");
})
.catch((err) => {
console.log(err);
});
}
});});
index.js -
I create one web App for graduation research (developed with Vue.js, vue-router). I'm using Firebase Authentication to sign in. Even though using the correct Email Address and password, I can't sign in and the site redirect from 'localhost:8080/signin' to 'localhost:8080/signin?' .
This is developed with Vue(2.6.10) and firebase.
(ellipsis)
input(type="text" placeholder="your#email.com" v-model="email")#MailAddress
(ellipsis)
input(type="password" placeholder="password" v-model="password")#Password
(ellipsis)
import firebase from "firebase";
export default {
name: "Signin",
data() {
return {
email: "",
password: ""
};
},
methods: {
signIn() {
firebase
.auth()
.signInWithEmailAndPassword(this.email, this.password)
.then(
() => {
alert("Success");
this.$router.push("/");
},
err => {
alert(err.message);
}
);
}
}
};
I expect to redirect to 'localhost:8080/'
This works for me.
In my Vue component:
import firebase from '../database';
async signIn () {
let result = await firebase.signIn(this.email, this.password);
if (result.message) {
this.error = result.message;
} else {
// Go to your route
}
}
In my database file:
const database = firebase.initializeApp(config);
database.signIn = async (email, password) => {
try {
await firebase.auth().signInWithEmailAndPassword(email, password);
return true;
} catch (error) {
return error;
}
};