Fix the Sign In, Sign Up with email & password and Facebook #176
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,6 @@ | ||
| <resources> | ||
| <string name="app_name">Go_social</string> | ||
| <string name="facebook_app_id">222891166977339</string> | ||
| <string name="fb_login_protocol_scheme">fb1234</string> | ||
| <string name="facebook_client_token">PLACE_YOUR_CLIENT_TOKEN_HERE</string> | ||
| </resources> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,132 +9,103 @@ import { | |
| KeyboardAvoidingView, | ||
| ScrollView, | ||
| } from "react-native"; | ||
| import { LoginManager, AccessToken } from "react-native-fbsdk-next"; | ||
| import { app, auth, db } from "../../../config/config.js"; | ||
| import { | ||
| signInWithEmailAndPassword, | ||
| onAuthStateChanged, | ||
| signInWithCredential, | ||
| FacebookAuthProvider, | ||
| } from "firebase/auth"; | ||
| import { ref, set } from "firebase/database"; | ||
| import * as EmailValidator from "email-validator"; | ||
| import { SocialIcon } from "react-native-elements"; | ||
| import styles from "./style"; | ||
|
|
||
| export default class LoginScreen extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| email: "", | ||
| password: "", | ||
| }; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| var that = this; | ||
| onAuthStateChanged(auth, function (user) { | ||
| if (user) { | ||
| that.redirectUser(); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| redirectUser() { | ||
| const { navigate } = this.props.navigation; | ||
| navigate("App"); | ||
| } | ||
|
|
||
| // Validate the user's email and password | ||
| async _signInAsync() { | ||
| if (!EmailValidator.validate(this.state.email)) { | ||
| alert("Please enter a valid email!"); | ||
| } else if (this.state.password == "") { | ||
| alert("Enter your password!"); | ||
| } else { | ||
| this.login(); | ||
| } | ||
| } | ||
|
|
||
| // Signin with email and password | ||
| async login() { | ||
| try { | ||
| let email = this.state.email; | ||
| let password = this.state.password; | ||
ajaman190 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| const res = await signInWithEmailAndPassword(auth, email, password); | ||
| } catch (error) { | ||
| alert(error.message.toString()); | ||
| } | ||
| } | ||
|
|
||
| // Signin user with facebook account | ||
| async _fbSignInAsync() { | ||
| try { | ||
| const result = await LoginManager.logInWithPermissions(["public_profile", "email"]); | ||
| if (!result.isCancelled) { | ||
| // Get the user's access token | ||
| const data = await AccessToken.getCurrentAccessToken(); | ||
|
|
||
| // Use the user's access token to authenticate with Firebase Authentication | ||
| const credential = FacebookAuthProvider.credential(data.accessToken); | ||
| const { user } = await signInWithCredential(auth, credential); | ||
|
|
||
| const response = await fetch( | ||
| `https://graph.facebook.com/v2.8/me?fields=id,first_name,last_name,email,birthday&access_token=${data.accessToken}` | ||
ajaman190 marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. We can use Promise.allSettled() for this. Would be an performance improvement on my perspective. There was a problem hiding this comment. I got this on internet "Uses of await or Promise.allSettled() depends on the specific use case and the performance characteristics of the promises being used. In general, if the promises can execute in parallel and the outcome of rejected promises is not important, Promise.allSettled() can be a good choice. However, if the promises need to execute sequentially or the outcome of rejected promises needs to be handled specifically, await may be a better choice." Also in our case the response of promises are dependent on each other. There was a problem hiding this comment. @shehand Whats your suggestion on it. There was a problem hiding this comment. Could you please explain that how they are depending in each other? I can see two awaited calls which do not depend on each other at all. There was a problem hiding this comment. Yes you are right, these two promises are independent of each other but they are dependent on the above promises, which are not visible in this snippet. So, I can either execute these two promises in parallel using Promise.allSettled() and explicitly check for their success and failure (since Promise.allSettled() will wait for all functions passed in the array to either resolve or reject without rejecting itself), |
||
| ); | ||
| const userData = await response.json(); | ||
|
There was a problem hiding this comment. So then we can remove await in here |
||
| const photoURL = `https://graph.facebook.com/${userData.id}/picture?height=120`; | ||
| this.createUser(user.uid, userData, data.accessToken, photoURL); | ||
| } | ||
| } catch (error) { | ||
| alert(error.message.toString()); | ||
| } | ||
| } | ||
|
|
||
| // Create user | ||
| async createUser(uid, userData, token, photoURL) { | ||
| try { | ||
| const defaults = { uid, token, photoURL, Range: [20, 30] }; | ||
| const usersRef = ref(db, "users/" + uid); | ||
| set(usersRef, { ...userData, ...defaults }); | ||
| } catch (error) { | ||
| alert(error.message.toString()); | ||
| } | ||
| } | ||
|
|
||
| handleInput(input, text) { | ||
| this.setState(prevState => ({ ...prevState, [input]: text })); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
|
|
@@ -151,7 +122,7 @@ export default class LoginScreen extends Component { | |
| keyboardType="email-address" | ||
| placeholderTextColor="rgba(255,255,255,0.7)" | ||
| style={styles.input} | ||
| onChangeText={text => this.handleInput("email", text)} | ||
| ref={input => { | ||
| this.textInput = input; | ||
| }} | ||
|
|
@@ -161,24 +132,24 @@ export default class LoginScreen extends Component { | |
| secureTextEntry={true} | ||
| placeholderTextColor="rgba(255,255,255,0.7)" | ||
| style={styles.input} | ||
| onChangeText={text => this.handleInput("password", text)} | ||
| ref={input => { | ||
| this.textInput = input; | ||
| }} | ||
| /> | ||
| </View> | ||
| </KeyboardAvoidingView> | ||
| <TouchableOpacity onPress={this._signInAsync.bind(this)} style={styles.loginButton}> | ||
| <Text style={styles.buttonText}>Sign In</Text> | ||
| </TouchableOpacity> | ||
|
|
||
| <TouchableOpacity onPress={() => this.props.navigation.navigate("ForgotPassword")}> | ||
| <Text style={styles.text}>Forgot Password?</Text> | ||
| </TouchableOpacity> | ||
|
|
||
| <TouchableOpacity onPress={this._fbSignInAsync.bind(this)}> | ||
| <SocialIcon | ||
| style={{ width: 290 }} | ||
| title="Sign In With Facebook" | ||
| button | ||
| type="facebook" | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If these are configurations that should be configured by the developer, readme file should contain step by step guide to config this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added configuration in old readme file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please review the update reademe pr #169, so that i can also update this comfig in new readme file.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please address the issues in #169 first.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure, i will address this first
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added this configuration, please review #169