フロントをReact、サーバーサイドをNode、Expressで作成しました。
DBとしてFirebase Cloud Firestoreを使用し、フロントをFirebase Hosting、サーバーをHerokuにデプロイしました。
作ったアプリについて
私は現在エンジニアとしてインターンを２年間やっており、エラーが出たときに「このエラーどっかで見たなぁ」みたいなことが最初の頃よくありました。
今回はこのようなことを解消するためのアプリを作成しました。
使用方法
- 起きたエラーを入力
- カテゴリーを選択（React,Nodeなど）
- 解決できているならば参考になったURLを記入
- メモを書く
という流れになります。
今までに起きたエラーを蓄積していくことで、もし同じエラーが起きた場合は、エラーを入力した際に知らせてくれて再び解決策を探す作業が省くことができます。
こちらが作ったアプリ( Error Manager )になりますが
現在はサインアップを実装しておらず、私だけが使えるテスト段階です。
詰まったところ
Reactでのログイン認証
色々と調べたところ、しっかりとしたアプリならばセキュリティを考慮して自分でログイン認証を作成するべきではなく、Auth0などのサービスを使用したほうがいいというのが結論でした。
ただ、今回のような小規模な重要な情報を保持しないアプリであれば、LocalStorageやCookieを使って実装してもよいという意見もあり、CookieとFirebase Authenticationで実装しました。
Firebase Authenticationでログイン認証を行い、ログインしたらCookieにID、Passwordを保持し、ログアウトしたらCookieのID、Passwordを削除するという方法になります。
Firebase Authenticationのログイン認証の実装に関しては公式のドキュメントがわかりやすいので詳しい設定はこちらを参考に。
サインイン画面でSubmitボタンを押すと、以下のsigninFunc()が動き、
signInWithEmailAndPasswordでFirebase Authenticationの認証が成功したらCookies.setでemail、password、uid（Firebase Authentication側で勝手に割り振られるID）をCookieに書き込みます。
認証失敗したらEmailもしくはPasswordが間違っている可能性があることをユーザーに知らせます。
Cookieを操作するライブラリはjs-cookieを使用しました。
constsigninFunc=()=>{constemail=document.getElementById("email").valueconstpassword=document.getElementById("password").valuefirebase.auth().signInWithEmailAndPassword(email,password).then((user)=>{setOpenErr(false)setOpenSuc(true)Cookies.set("email",email,{"expires":7})Cookies.set("password",password,{"expires":7})Cookies.set("uid",user.user.uid,{"expires":7})document.location="/"}).catch((error)=>{setOpenErr(true)varerrorMessage=error.message;console.log(errorMessage)});}ログイン認証後は、Cookieにあるemail、password、uidを使ってホーム画面に遷移する際に認証します。
import'./App.css';importSignInfrom'./pages/signIn';importSignUpfrom'./pages/signUp';importMainfrom'./pages/main'import{BrowserRouter,Route,Switch}from'react-router-dom';importAuthfrom'./components/Auth';functionApp(){return(<BrowserRouter><Switch><Routepath="/signin"component={SignIn}/>
<Auth><Switch><Routepath="/"exactcomponent={Main}/>
</Switch>
</Auth>
</Switch>
</BrowserRouter>
);}exportdefaultApp;importCookiesfrom'js-cookie'importfirebasefrom'../firebase/firebase'exportfunctionisLoggedIn(){constemail=Cookies.get("email")constpassword=Cookies.get("password")if(!(email&&password))returnfalseconstisLogin=firebase.auth().signInWithEmailAndPassword(email,password).then((user)=>true).catch((error)=>{consterrorMessage=error.message;returnfalse});returnisLogin;}exportfunctionlogoutFunc(){Cookies.remove("email")Cookies.remove("password")Cookies.remove("uid")document.location="/signin"}ログインしていないとホーム画面に遷移できないようにする方法はこちらの記事を参考にしました。