Hướng dẫn React Native Firebase Authentication
Cài đặt thư viện:
npm i @react-native-firebase/app
npm i @react-native-firebase/firestore
Tạo mới dự án trên google firebase
tạo mới app và tải file config: google-services.json về bỏ vào thư mục: \android\app\google-services.json
- Lưu ý: đặt package_name trùng với package_name trong project react native trong file AndroidManifest.xml
Config cho Android
ở trong file: /android/build.gradle thêm đoạn sau:
apply plugin: 'com.google.gms.google-services'
ở trong file /android/build.gradle thêm đoạn sau:
buildscript {
dependencies {
// ... other dependencies
classpath 'com.google.gms:google-services:4.3.15' // thêm dòng này
// Add me --- /\
}
}
Code Auth:
import auth from "@react-native-firebase/auth";
class LoginScreen extends React.Component {
// ...
// hàm xử lý auth thông qua firebase
handleSubmit = values => {
auth().signInWithEmailAndPassword(values.email, values.password).then((response) => {
ToastAndroid.show("Login success!", ToastAndroid.SHORT);
console.log("Login Response:", response);
this.goToPage("TabNavigation");
this.setState({
isShowMessage: false,
});
}).catch((error) => {
this.setState({
isShowMessage: true,
});
});
};
// ...
}
Code firestore tạo mới user và lưu thông tin vào firestore:
import auth from "@react-native-firebase/auth";
import firestore from "@react-native-firebase/firestore";
class Register extends React.Component {
// hàm xử lý khi bấm nút sign up
handleSubmit = values => {
console.log(values);
// tạo mới user
auth().createUserWithEmailAndPassword(values.email, values.password).then((response) => {
const user = { id: response.user.uid, email: values.email, username: values.username };
// save thông tin user vào firestore
this.saveUserToFireStore(user);
}).catch((error) => {
ToastAndroid.show("Register Error!", ToastAndroid.SHORT);
console.log("Error from firebase:", error);
});
};
// hàm xử lý lưu thông tin vào firestore
saveUserToFireStore = user => {
const usersRef = firestore().collection("users");
usersRef.doc(user.id).set(user).then(() => {
this.goToPage("TabNavigation");
}).catch((error) => {
ToastAndroid.show("Save User Error", ToastAndroid.SHORT);
console.log("Save User Error:", error);
});
};
}
- Lưu ý khi sử dụng firestore: cần phải setting rule thì mới có thể truy cập data được để set quyền truy cập vào collection users thì sửa rule lại như sau:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Allow anyone to read from the "users" collection
match /users/{document=**} {
allow read;
// Only allow authenticated users to write to the "users" collection
allow write: if request.auth != null;
}
}
}
-
Khi sử dụng auth của firebase tạo mới user thực tế nó đã lưu thông tin lại rồi, truy cập vào bảng users trong Authentications sẽ thấy
-
nhưng ngoài ra nếu muốn lưu được nhiều thông tin hơn chẳng hạn lưu tên, sdt, note… thì cần lưu vào firestore còn nếu ko muốn lưu thì chỉ cần sử dụng Auth của firebase là đủ
-
Nguồn tham khảo: