初心者がReact+FirebaseでWebアプリを作成する③　～Firebase Authenticationの認証機能を使ってみた～

constuiConfig={　　　//認証するときポップアップしますsignInFlow:'popup',　　　//サインインしたときのリンク先signInSuccessUrl:'/',//認証方法一覧。//Googleの部分をFacebook、Twitter等に変えれば、そのAPIが使用できますsignInOptions:[firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.EmailAuthProvider.PROVIDER_ID,]};

importReactfrom'react';import'./App.css';importfirebasefrom"firebase/app"import"firebase/auth"import"firebase/firestore"//①でモジュール化したfirebase.jsをインポートimport{firestore}from'./plugins/firebase';importButtonfrom'@material-ui/core/Button';importTextFieldfrom'@material-ui/core/TextField';importTextareaAutosizefrom'@material-ui/core/TextareaAutosize';importStyledFirebaseAuthfrom'react-firebaseui/StyledFirebaseAuth';classAppextendsReact.Component{constructor(props){super(props);this.state={name:'',address:'',isLogin:false,}this.getName=this.getName.bind(this);this.getAddress=this.getAddress.bind(this);this.addData=this.addData.bind(this);this.logOut=this.logOut.bind(this);}//コンポーネント配置時にログインできてるか確認しますcomponentDidMount(){firebase.auth().onAuthStateChanged(user=>{this.setState({isLogin:true,});});}　//名前の入力フォーム情報読み込みgetName(event){this.setState({name:event.target.value,});};　//住所の入力フォーム情報読み込みgetAddress(event){this.setState({address:event.target.value,});};　//登録ボタンを押すとデーターベースに反映addData(){firestore.collection('users').add({name:this.state.name,address:this.state.address,created_at:newDate(),}).then(()=>{this.setState({name:'',address:'',});})};　//ログアウトボタンを押すとisLoginがfalseになるlogOut(){this.setState({isLogin:false,});}render(){constuiConfig={signInFlow:'popup',signInSuccessUrl:'/',signInOptions:[firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.EmailAuthProvider.PROVIDER_ID,]};　　//空の変数を定義してifでログイン／ログアウト時の表示画面を切り替えるletsuccessfulUser;if(this.state.isLogin){successfulUser=(<div><form><TextFieldlabel="名前"value={this.state.name}onChange={(event)=>{this.getName(event)}}/><br/><TextareaAutosizearia-label="住所"rowsMax={4}placeholder="住所"value={this.state.address}onChange={(event)=>{this.getAddress(event)}}/>;
<br/><Buttonvariant="contained"color="primary"onClick={this.addData}>登録</Button>
</form>
<Buttonvariant="contained"color="secondary"onClick={this.logOut}>ログアウト</Button></div>
);}else{successfulUser=(<div><p>Pleasesign-in:</p>
<StyledFirebaseAuthuiConfig={uiConfig}firebaseAuth={firebase.auth()}/>
</div>
);}return(　　　　//最終的な表示画面<div>{successfulUser}</div>
);}}exportdefaultApp;