Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to link Firebase's Authentication to Realtime Database?

As the title said. I need to link authenticated user to database. So that different user can only see their data.

I had successfully implement the Authentication function of Firebase. But the record does not save to Realtime Database and I don't know how to do this.

Can anyone please teach me how do I do such function? I tried the database and I roughly know it use (push) to create a unique ID to differentiate user. But still I have no idea how to combine this to authentication function.

The following code is my function of Login() and Register()

login (){

    const validate = this.refs.formId.getValue();
    if (validate) {
        firebase.auth().signInWithEmailAndPassword(validate.email, validate.password)
        .then(() => {
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            if (errorCode === 'auth/wrong-password') {

            Toast.show({ text: `${Strings.ST30}`, position: 'bottom', buttonText: `${Strings.ST33}` })

            }
            else if (errorCode === 'auth/user-not-found') {

            Toast.show({ text: `${Strings.ST31}`, position: 'bottom', buttonText: `${Strings.ST33}` })

            }
            else{
            Toast.show({ text: `${Strings.ST32}`, position: 'bottom', buttonText: `${Strings.ST33}` })
            }

        });
    }

}
    register () {

    const validate = this.refs.form.getValue();
    if(this.validate) {
        const errorHandler = ((e)=>{
        console.log(e);
        if(e.code == 'auth/email-already-in-use'){
            Toast.show({ text: `${Strings.ST36}`, position: 'bottom', buttonText: `${Strings.ST33}` })

        } else {
            Toast.show({ text: `${Strings.ST32}`, position: 'bottom', buttonText: `${Strings.ST33}` })
        }

    })
    firebase.auth().createUserWithEmailAndPassword(validate.email,validate.password).then((response) => {
        firebase.auth().currentUser.updateProfile({
            displayName : validate.name,
        }).then(()=>{
        }).catch(errorHandler);

    }).catch(errorHandler)
}}

Thank you so much for your time and help. Appreciate it a lot!

enter image description here enter image description here enter image description here enter image description here enter image description here

Edit 2:

        firebase.auth()
    .createUserWithEmailAndPassword(validate.email,validate.password)
    .then((response) => {
        firebase.auth().currentUser.updateProfile({
            displayName : validate.name,
        }).then(()=>{
            firebase.database()
            .ref('users/' + firebase.auth().currentUser.uid + "/profile")
            .set({
                Username: validate.name,
                UserEmail: validate.email,
                CreationDate: d1.getFullYear() + "/" + (d1.getMonth() + 1) + "/" + d1.getDate()
            })
        }).catch(errorHandler);
    }).catch(errorHandler)
}}

I had successfully link to Firebase Realtime Database. enter image description here

But I can't write and read other function from my database. This is my rules for Firebase Database. May I know which part should I change?

{
"rules": {
    ".read": false,
    ".write": false,
    "users":
    {
        "$userId":
        {
            ".read": "auth.uid === $userId",
            ".write": "auth.uid === $userId"
        }
    }
}

}

Edit 3: (ExampleSendData.js)

constructor(props) { super(props)
this.state = { message: '', messages: [] }

this.addItem = this.addItem.bind(this); }

    componentDidMount() {
        firebase
        .database()
        .ref()
        .child("messages")
        .once("value", snapshot => {
            const data = snapshot.val()
            if (snapshot.val()) {
            const initMessages = [];
            Object
                .keys(data)
                .forEach(message => initMessages.push(data[message]));
            this.setState({
                messages: initMessages
            })
            }
        });

        firebase
        .database()
        .ref()
        .child("messages")
        .on("child_added", snapshot => {
            const data = snapshot.val();
            if (data) {
            this.setState(prevState => ({
                messages: [data, ...prevState.messages]
            }))
            }
        })

    }

    addItem () {
        if (!this.state.message) return;

        const newMessage = firebase.database().ref()
                            .child("messages")
                            .push();
        newMessage.set(this.state.message, () => this.setState({message: ''}))
    }

    render() {
        return (
        <View style={styles.container}>
            <View style={styles.msgBox}>
            <TextInput placeholder='Enter your message'
                value={this.state.message}
                onChangeText={(text) => this.setState({message: text})}
                style={styles.txtInput}/>
            <Button title='Send' onPress={this.addItem}/>
            </View>
            <FlatList data={this.state.messages}
            renderItem={
                ({item}) => 
                <View style={styles.listItemContainer}>
                <Text style={styles.listItem}> {item}
                </Text>
                </View>
            }

            />
        </View>
        );
    }
    }
like image 702
Alex Chong Avatar asked Jan 23 '19 15:01

Alex Chong


1 Answers

From the code you are writing I expect you are using react-native-firebase? If not - you should use it :-)

Solution for react-native-firebase:

As soon as you are registered or logged in you can use the firebase.auth().currentUser Object. This object includes a uid (currentUser.uid). You can then push some data to the database under the uid with something like firebase.database().ref('users/' + firebase.auth().currentUser.uid + "/profile").set(); For example in your register like this:

    register () {
        const validate = this.refs.form.getValue();
        if(this.validate) {
            const errorHandler = ((e)=>{
            console.log(e);
            if(e.code == 'auth/email-already-in-use'){
                Toast.show({ text: `${Strings.ST36}`, position: 'bottom', buttonText: `${Strings.ST33}` })
            } else {
                Toast.show({ text: `${Strings.ST32}`, position: 'bottom', buttonText: `${Strings.ST33}` })
            }
        })
        firebase.auth().createUserWithEmailAndPassword(validate.email,validate.password).then((response) => {
            firebase.auth().currentUser.updateProfile({
                displayName : validate.name,
            }).then(()=>{
                firebase.database().ref('users/' + firebase.auth().currentUser.uid + "/profile").set(firebase.auth().currentUser);
            }).catch(errorHandler);
        }).catch(errorHandler)
    }}

Security:

I do not recommend to set the whole user data in your database, since you do not need it there. Use the database to save user progress or something similar.

Security 2:

You should set the security rules of your database, that only the user can read and write in his db node. Use something like:

{
    "rules": {
        ".read": false,
        ".write": false,
        "users":
        {
            "$userId":
            {
                ".read": "auth.uid === $userId",
                ".write": "auth.uid === $userId"
            }
        }
    }
}

Edit 1: Please try to remove push since it generates a unique key, which has nothing to do with the user. It will be hard to find your user data again. And do not use set twice since it won't work. enter image description here

Edit 2: You have to set the nodes you want to be readable/writable to true like this:

{
    "rules": {
        ".read": false,
        ".write": false,
        "users":
        {
            "$userId":
            {
                ".read": "auth.uid === $userId",
                ".write": "auth.uid === $userId"
            }
        },
        // readable node
        "messages":
        {
            ".read": true
        },
        // readable and writable node
        "messages":
        {
            ".read": true,
            ".write": true
        }
    }
}
like image 118
Alexander Kuttig Avatar answered Sep 29 '22 05:09

Alexander Kuttig