Phone Auth

Chat.tsx

import * as React from "react";
import { Image, Platform, Text, TouchableOpacity, View } from "react-native";
import firebase from "react-native-firebase";
import { NavigationParams } from "react-navigation";
import Bot from "./botMessage.json";
import { Input } from "./Input";
import { Messages } from "./Messages";
import { styles } from "./styles";

const bot = Bot;

interface IProps {
    message?: string;
    messages?: [];
    navigation?: NavigationParams;
    username?: string;
    action(): void;
}
interface IState {
    codeInput: string;
    confirmResult: {};
    isLoading: boolean;
    message: string;
    messageId: number;
    messages: { message: string; username: string }[];
    phoneNumber: string;
    user?: {};
    username: string;
    verified: boolean;
    verifying: boolean;
}
const timeOut = 1000;

/**
 * A custom chat view
 */
export class Chat extends React.Component<IProps, IState> {
    private constructor(props: IProps) {
        super(props);
        this.state = {
            messages: [],
            username: "",
            isLoading: false,
            messageId: 0,
            user: {},
            message: "",
            codeInput: "",
            phoneNumber: "+33",
            confirmResult: {},
            verified: false,
            verifying: false,
        };
        this.sendHandler = this.sendHandler.bind(this);
        this.userNameSendHandler = this.userNameSendHandler.bind(this);
        this.done = this.done.bind(this);
    }
    public componentDidMount(): void {
        this.unsubscribe = firebase.auth().onAuthStateChanged((user: any) => {
            if (user) {
                this.setState({ user: user.toJSON() });
            } else {
            // User has been signed out, reset the state
                this.setState({
                    user: undefined,
                    message: "",
                    codeInput: "",
                    phoneNumber: "+44",
                    confirmResult: undefined,
              });
            }
        });
    }
    public componentWillMount = (): void => {
        const botMessage = bot.botMessage[this.state.messageId].message;
        const messages = this.state.messages;
        messages.push({ username: "bot", message: botMessage });
        this.setState({ messages });
    }
    public confirmCode = () => {
        const { codeInput, confirmResult } = this.state;

        if (confirmResult && codeInput.length) {
            confirmResult.confirm(codeInput)
            .then(
                this.setState({ verified: true })
            );
        }
    }
    public done = () => {
        const { phoneNumber } = this.state;
        firebase.auth().signInWithPhoneNumber(phoneNumber);
        if (Platform.OS === "android") {
            const { action } = this.props;
            action();
        }
    }
    public loader = () =>
        (
            <View>
                <Image
                    style={{ height: 50, width: 60, backgroundColor: "#5036ce", marginLeft: 15, borderRadius: 20 }}
                    source={require("./images/loader.gif")}
                />
            </View>
        )
    public render(): React.ReactNode {
        return (
            <View style={{ marginTop: 50 }}>
                <View style={{ height: "70%" }}>
                    <Messages messages={this.state.messages} />
                    {this.state.isLoading && this.loader()}
                </View>
                <Text>{this.state.message}</Text>
                {this.state.verified ? this.renderButton() : this.renderInput()}
            </View>
        );
    }
    public renderButton(): React.ReactNode {
        return (
            <View>
                <TouchableOpacity onPress={this.done}>
                    <Text style={styles.button}>
                        GOOOOOOO !!!!
                </Text>
                </TouchableOpacity>
            </View>
        );
    }

    public renderInput(): React.ReactNode {
        return (
            <View style={{ height: "40%", marginTop: 10 }}>
                {this.state.username === "" ? this.nameInput() : this.anyInput()}
            </View>
        );
    }
    public signIn = () => {
        const { phoneNumber } = this.state;
        this.setState({ message: "Sending code ..." });
        firebase.auth().signInWithPhoneNumber(phoneNumber)
          .then((confirmResult) => this.setState({ confirmResult, message: "Code has been sent!" }))
          .catch((error) => this.setState({ message: `Sign In With Phone Number Error: ${error.message}` }));
    }

    public verifyPhoneNumber = () => {
        const botMessage = bot.botMessage[this.state.messageId].message;
        const messages = this.state.messages;
        firebase.auth()
            .verifyPhoneNumber(this.state.phoneNumber)
            .on("state_changed", (phoneAuthSnapshot) => {
                switch (phoneAuthSnapshot.state) {
                case firebase.auth.PhoneAuthState.CODE_SENT:
                    if (Platform.OS === "android") {
                        this.setState({ verifying: true });
                    }

                    break;
                case firebase.auth.PhoneAuthState.ERROR:
                    break;
                case firebase.auth.PhoneAuthState.AUTO_VERIFY_TIMEOUT:
                    break;
                case firebase.auth.PhoneAuthState.AUTO_VERIFIED:
                    if (Platform.OS === "android") {
                        this.setState({ verified: true, verifying: false });
                    }
                }
            },  (error) => {
                console.log(error.message);
            },  (phoneAuthSnapshot) => {
                if (Platform.OS === "android") {
                    this.setState({ messageId: this.state.messageId + 1 });
                }
                messages.push({
                    username: "bot",
                    message: `${botMessage}`,
                });
                console.log(phoneAuthSnapshot);
            });
    }
    private addMessage(message: { message: string; username: string }): void {
        const messages = this.state.messages;
        messages.push(message);
        this.setState({ messages });
        if (this.state.messages.length >= 2 && this.state.messages.length <= 6) {
            this.ShowAlertWithDelay();
        }

        return;
    }
    private anyInput(): React.ReactNode {
        return (<Input onSend={this.sendHandler} />);
    }
    private nameInput(): React.ReactNode {
        return (<Input onSend={this.userNameSendHandler} />);
    }
    private sendHandler(message: {}): void {
        const { user, confirmResult } = this.state;
        const messageObject: any = {
            username: this.state.username,
            message,
        };
        {!user && !confirmResult && this.setState({ phoneNumber: messageObject.message }); }
        {!user && confirmResult && this.setState({ codeInput: messageObject.message }); }
        this.addMessage(messageObject);
    }
    private readonly ShowAlertWithDelay = () => {
        const that = this;
        this.setState({ isLoading: true });
        setTimeout(() => {
            const botMessage = bot.botMessage[this.state.messageId].message;
            const messages = that.state.messages;
            if (this.state.messages.length >= 2 && this.state.messages.length < 6) {
                messages.push({
                    username: "bot",
                    message: `${botMessage} ${this.state.username}${bot.botMessage[this.state.messageId].message2}`,
                });
                if (this.state.messages.length === 5) {
                    this.signIn();
                }
            } else if (this.state.verified) {
                console.log(this.state.verified);
                this.setState({ messageId: this.state.messageId + 1 });
                messages.push({
                    username: "bot",
                    message: `${botMessage}`,
                });
            } else {
                messages.push({
                    username: "bot",
                    message: `${botMessage}`,
                });
                if(this.state.message.length > 6 ){this.confirmCode()};
            }
            that.setState({ messages, isLoading: false, messageId: this.state.messageId + 1 });
        },         timeOut);
    }
    private readonly userNameSendHandler = (message: string) => {
        const messageObject = {
            username: message,
            message,
        };
        this.addMessage(messageObject);
        this.setState({ username: this.state.messages[1].message, messageId: this.state.messageId + 1 });
    }
}